In this tutorial, we are going to learn how to implement Angular Authentication and Authorization with Angular 6 on client-side and ASP.NET Core on the server side using (JWT)JSON Web Tokens and Auth0. As you know securing your application is one of the toughest things to pull off and how important it is to implement in the application. After this tutorial series, you will be able to understand how to protect APIs, Routes, and Roles.
As you know we will do all the stuff using JWT(JSON web tokens) and Auth0. But first-of-all, we need to know what is JWT and Auth0.
What will you learn in this tutorial?
- What is JWT?
- What is Auth0?
- How to setting up Auth0 Account?
- How to create a new API with Auth0 account?
- How to secure application APIs?
- How to secure Client App?
Previous Tutorials of Angular and ASP.NET Core Series
- How to setup a project using Angular CLI in VS Code?
- How to Setup a project with Angular 6 and ASP.NET Core 2.1 ?
- How to create CRUD Operations using Angular 6 and ASP.NET Core?
- How to implement Search functionality in Angular 6 & ASP.NET Core?
- How to implement server-side filtration in angular 6 & asp.net core ?
- How to sort record using angular 6 and asp.net core?
- Search, Sort, and Pagination in angular 6 and asp.net core.
- How to create web api in angular 6 and asp.net core?
Asp Net Core and Angular 6 Authentication and Authorization
So, let’s start to learn Angular authentication and authorization using asp net core.
What is JWT(JSON Web Token)?
A JWT (JSON Web Token) is a JSON object. It is defined in RFC7519 as a safe way to represent a set of information between two parties. The information can be easily varified, because it is digitally signed. Moreover, JWT consist of three parts like Header, Payload, and Signature in the below format.
Click here for more information about JWT.
What is Auth0?
Basically Auth0 provides a service for Angular Authentication and Authorization. If you are not expert in security, don’t worry. Auth0 will provide you all the services that you need to secure your application.
How to setting up Auth0 Account for Angular Authentication and Authorization?
Let’s start how to setting up an Auth0 Account for angular authentication and Authorization?
First-of-all, go to this link Auth0 and sign up with your email and password and then click on sign up button. Then you will see a “Welcome to Auth0” page. Just enter your tenant domain (a unique name) then select region and then finally click on next button.
Then you will see a “tell us more page”. Now, select Account Type “Personal” and then select Role as “Developer” and then select project type as “Just Playing Around” from dropdown and then finally click on Create Account button as you see below.
After clicking Create Account button, you will see a dashboard page.
Create a new API for Angular Authentication and Authorization.
Now, click on API menu from right sidebar and then you will see an API page. Now click on “Create API” button and then you will see a “New API” popup. Now, enter name like “Book Store” then enter identifier like this “https://api.bookstore.com” and then select “RS256” from Signin Algorithm dropdown. And finally click on Create button.
Note:- RS256 is more secure than HS256.
Note: – we will not create new project for this tutorial. We will use the project which we have create in one of the previous tutorials. If you don’t know how to create new project, then click here or below link.
How to Secure API?
Now our API is ready, now we need to setting up our code with this API. So, now go to project and open startup.cs class file. Then go to “ConfigureServices” function and copy the below code from line # to and paste into this function as you see in below code.
Note: – After adding the above code, you will face some errors. Don’t worry you just need to add some packages. So just copy the below commands and run them with terminal.
Let’s understand the above code,
Line # 29: Options object which have two properties with the name of “Authority” and “Audience” respectively.
Line # 35: Authority, this will generate the authentication tokens.
Line # 36: Audience, only this audience will use these tokens.
Now, copy the below code line # 56 and then put into the “Configure” function as you see in below code.
Now, just go to project folder and open “BookstoresController” and apply the Authorize attribute on all the functions which you want to secure like Create, Edit and Delete as you see in below code.
Note: – Don’t forget to add reference library of Authorize attribute.
How to secure Client App with Angular Authentication and Authorization?
Now go to Auth0 account and click on “Applications” link from sidebar and then click on Create Application button and then you will see a “Create Application” popup. Now, enter the name like “Book Store” and then choose the application type “Single Page Web Application” and then click on create button as you see below screenshot.
Now, choose the technology that we are using like “Angular 2+”. Now you will see the information that will demonstrate you how to add user login to an Angular application using Auth0.
Now follow the below steps to setting up client side with Auth0.
Step # 1: Now open your project terminal and then run the below commands to add some new packages.
npm install auth0-lock angular2-jwt --save
npm install --save auth0-js
Step # 2: Now go to services folder in your project folder structure. Then right click on services folder and add a new service with the name of “auth.service.ts”. Then add the below code in the auth.service.ts file.
Step # 3: Now goto navmenu.component.ts file and then add the constructor as you see in below file line # 10.
Step # 4: Now go to navmenu.component.html file and then add the below code within the main nav.
Step # 5: Now go to index.cshtml file and then just put x in front of the asp-prerender-module tag as you see in below code.
Step # 6: Now go to auth0 account and then go to “Application” tab from right menu and then select “Angular 2+” and then go to settings and then go to “Allowed Callback URLs” text area and then add the urls that you want as you see in the below screenshot.
Note: – If you don’t add callback url, then you will get an error.
Step # 7: Now run your project with this “dotnet watch run” or “ng serve” command. Now go to menu and then click on login tab and then you will see a popup as you see below.
Now, click on Sign Up tab and then put your email and password and then click Sign Up button. Then after that you will see a new popup with the name “Authorize App”. Now just click on the ok button to give access.
Congratulation! You have done it. Now go to other pages of bookstore, you will have access all the pages with register account. If you are not register, then you will not have any access to other pages of “bookstore” application.