JWT Token Authentication in Angular 14 and .NET Core 6 Web API

A step-by-step guide to JWT Authentication in Angular 14.

Photo by Christopher Gower on Unsplash

We are going to discuss the JWT Authentication in Angular 14 step-by-step.

If you want to learn the basics and details of JWT Token, then check out the following URL.

Introduction and Detail about the JWT Authentication and Authorization

Over there, I have explained the basics and details of JWT Authentication and Authorization.

Also, I recommend you to read the following article before starting this article, I explained how to set up a backend server application using.NET Core 6.

JWT Token Authentication using the .NET Core 6 Web API

In this section, we are going to discuss the following things step-by-step:

• Introduction
• Create Angular Application
• Add Bootstrap and Toaster Module
• Auth Guards
• Angular Service
• Create Angular Components

Let’s start above things one by one

Introduction

• JSON Web Token is the open standard (RFC 7519) self-contained way that will be used to transmit the data securely over the different environments as a JSON Object.
• RFC (Request for Comment) is the shortened form of Remote Function Call and Formal Document from the Internet Engineering Task Force. RFC 7519 JSON Web Token (JWT) May 2015 Copyright Notice Copyright © 2015 IETF Trust and the persons identified as the document authors. All rights reserved.
• JWT is the trusted way of authentication because it is digitally signed and secret using HMAC Algorithm or sometimes using a public/private key using RSA.
• Basically, HMAC stands for Hashed-based Message Authentication Code, it uses some great cryptographic hashing technique that provides us great security.
• Also, the JWT is part of great Authentication and Authorization Frameworks like OAuth and OpenID which will provide a great mechanism to transfer data securely.

Create Angular Application

Step 1:

Create Angular Application using the following command

ng new WebAPP

Step 2:

We use bootstrap in this application. So, use the following command to install bootstrap

npm install bootstrap

Next, add the bootstrap script inside the angular.json file inside the scripts and styles section

Step 3:

Install Toaster module for pop-up and notification

npm install ngx-toastr –save

Then, add the toaster in the styles section inside the angular.json file

Step 4:

Application structure

Step 5:

Create config folder inside assets and create config.json file inside that as shown below and put backend application API URL inside that

{
    "apiServer": {
      "url": "https://localhost:7299",
      "version": "v1"
    }
}

Step 6:

Create Auth Guard inside the guard’s folder

So, here you can see we take the JWT token from the local storage and later on check if the token is expired or not, If the token is expired then it will redirect to login and return false.

Step 7:

Open the App Component files and add the following code inside that

app.component.ts

app.component.html

Step 8:

Create a Model folder inside the app directory and create a Product class inside that

Step 9:

Create Homepage component

homepage.component.ts

homepage.component.html

Step 10:

Create Login Component

login.component.ts

login.component.html

Step 11:

Create Products Component

products.component.ts

products.component.html

Step 12:

Next, create a Product Service to send all our requests and fetch the data from the backend application

Step 13:

Put the following code inside the app module

So, here you can see, first, we put some routes and create one method to get the JWT token from local storage and Also configure the JWT module and Auth Guard inside that.

Step 14:

Finally, run your application

npm start

You will see the login page when running the application

After login, you will see the product page

Conclusion

So, we discussed all JWT Authentication in Angular 14 step-by-step and how to store tokens in local storage and usage of it inside the product application.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.