Angular + Auth0 + .NET
Tags: webdev, angular, dotnet, fullstack
Published: 2024-06-21 17:33:12

## 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](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis?view=aspnetcore-8.0). You can see my introduction [here](https://dev.to/suneeh/net-fundamentals-minimal-api-1h9). A [PostgeSQL Database](https://www.postgresql.org/), EfCore and some [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) endpoints were created super quickly.

## 🌍 Frontend

I created a new Angular App using all the newest features: [Signals](https://angular.dev/guide/signals), the [new control flow syntax](https://angular.dev/guide/templates/control-flow), [standalone components](https://blog.angular-university.io/angular-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](https://auth0.com/) - a free Identity Provider by [okta](https://www.okta.com/). 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](https://github.com/Suneeh/webshop/commit/b6a0d3b83d886e50366ea8c68361583d4dfbb33c)

Auth0 has a nice [Angular npm package](https://www.npmjs.com/package/@auth0/auth0-angular) `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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) stuff on my local machine, but in the end everything worked out just fine, and a [POC](https://en.wikipedia.org/wiki/Proof_of_concept) 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](https://angular.dev/guide/routing/common-router-tasks#preventing-unauthorized-access) for the existing CRUD endpoints.

If you want to track my progress, or check out some [code](https://github.com/Suneeh/webshop), 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](https://github.com/Suneeh), [Instagram](https://www.instagram.com/_suneeh/) or [TikTok](https://www.tiktok.com/@_suneeh).