Angular + Auth0 + .NET

Intro

As some of you might know, I am on my road to become a senior software engineer. To do so, I follow a backend roadmap that will teach me everything I need to know about .NET, Databases and some deployment as well. Since I currently work as Fullstack Software Engineer - I wanted to start a frontend project along side with it.

Since Webshops were the biggest part of my training, the choice for the topic of the Angular frontend became very obvious. Today I want to share my first steps and future goals of this series.

🖥️ Backend

The backend will consist of the new minimal APIs of .NET. You can see my introduction here. A PostgeSQL Database, EfCore and some CRUD endpoints were created super quickly.

🌍 Frontend

I created a new Angular App using all the newest features: Signals, the new control flow syntax, standalone components and all that. I started out with a simple "shell" component, that will be the main "frame" of the website - it holds items like the side-nav, header, footer and a router-outlet for the content of the current page. Basically this is ALWAYS shown, to be consistent with my navigation and over all look and feel.

🔐 Auth0 and RBAC (Role based Access Control)

Today I started using Auth0 - a free Identity Provider by okta. They have a nice free plan that is very much enough for my little project and can be upgraded afterwards, if this project will ever go live and commercial. See my progress here

Auth0 has a nice Angular npm package ng add @auth0/auth0-angular that makes it super simple to handle login/logout/session/userinfo. After a 5-10 minute setup of your Auth0 App, API and Roles/Permissions you can start seeing the first results already! Registering your first user through your own Angular app and all that was needed was a login button that calls the AuthService provided by the package. After logging in, you get an AccessToken and IdentityToken holding all the information about the User and their permissions.

Afterwards I built an API-Service that can call my .NET backend while appending the AccessToken as an Authorization Header to the request.

On the Backend I then built an Authorization Handler that checked the AccessToken claims for the permissions and added the .RequireAuthorization(string permission) to the endpoints that I wanted to protect. It took me some time to figure out some CORS stuff on my local machine, but in the end everything worked out just fine, and a POC was successfully created.

📋 Future Tasks

Future goals will be, to copy this protection to all the endpoints, make a plan of what endpoints need protection.

Maybe rethink the Roles, currently there is a Admin role, that will be able to Create, Edit and Remove Products and Categories - as well as a User role that represents an authenticated user (since logged in users have more features than non logged in users - Cart/Profile/History...).

Create more endpoints (currently there is a set of endpoints that allows CRUD for Products).

Create frontend pages and guards for the existing CRUD endpoints.

If you want to track my progress, or check out some code, feel free.

🙏🏽 Thanks

Thank you so much if you read this article all the way! Leave a comment if you have any questions, I'll be more than happy to answer right away. If you are shy you can also message me directly on GitHub, Instagram or TikTok.