Tech Seeker

In this article, we are going to implement JWT(JSON Web Token) authentication in the Angular(v14) application. We also understand how to use the Refresh Token when the JWT Access Token expires. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 informative parts: Header Payload Signature Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo. Command To Create Angular App ng new name_of_your_project Let's install the bootstrap package npm install bootstrap@5.2.0 Configure the bootstrap CSS and JS file reference in 'angular.json'. Now let's add the bootstrap menu in 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" routerLink="/">Jwt Auth Demo</a> </div> </nav

In the  previous article , we understand the steps to generate the JWT token and store it in the cookie. Now here we will understand steps to protect API and also about refresh token. Install passport-jwt NPM Package: We have to create a new jwt passport strategy to validate the jwt token, so we need to install the below packages. Command To Install passport-jwt Packages: npm install --save passport-jwt npm install --save-dev @types/passport-jwt Install And Setup Cookie Parser: To read the cookie in the nestjs application we have to install the below plugin. Command To Install Cookie Parser: $ npm i cookie-parser $ npm i -D @types/cookie-parser Now configure the cookie parser 'main.ts' src/main.ts: Create JWT Passport Strategy: So to apply authentication to API's we have to validate our jwt token, so to do that we need to create a new jwt passport strategy. src/users/jwt.strategy.ts: import { Injectable, UnauthorizedException } from "@nestjs/common"; im

Part-1  we implemented user login and logout using the HttpOnly Jwt cookie in our Vue application. In this article, we are going to understand the refresh token(refresh token also stored in HttpOnly Jwt Cookie). Gaurd Routes: One of the important cases we always need to consider while implementing authentication is guard routes between user authenticated and non authenticates cases. Suppose an authenticated user can't access the login page. Similarly, a non-authenticated user can't access the dashboard page(any page that needs user authentication). So to fix this kind of case we have to define our navigation rules at our route guard. But before implementing our route guard logic, we need to set one flag in browser local storage. The flag we will add represents that the user is authenticated. This flag helps us to avoid unnecessary calls to the profile API if the user reloads the application. Now let's add the flag to browser local storage on user authenticated. So let&#

Part3  we had enabled the JWT token validation and discussed different authorization techniques as well. In this article, we will understand Refresh Token creation and its usage. When To Use Refresh Token: A refresh token is a unique random encrypted string. On the expiration of the JWT auth access token, instead of showing a login page to the user, we can make the user authenticated immediately using the refresh token. By using refresh token we can fetch new user access tokens from the server without any user credentials. Generate Refresh Token: In 'AuthLogic.cs' file add a new private method like 'GenerateRefreshToken()'. Logics/AuthLogics.cs: private string GenerateRefreshToken() { var randomNumber = new byte[32]; using (var generator = RandomNumberGenerator.Create()) { generator.GetBytes(randomNumber); return Convert.ToBase64String(randomNumber); } } Here using 'System.Security.Cryptography.RandomNumberGenerator' generated refresh token of leng

In  Part-1  we have learned about user authentication using the jwt access token in the Ionic&Vue application. This is the continuation article here our main goal to use refresh token on the expiration of the access token. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Use Access Token As Authorization Header To Secured Endpoint: Now we will consume the secured endpoint(in our sample 'Todos' endpoint) by sending the access token value as the authorization header. So to work with the todos endpoint let's create a separate store module as below. src/store/modules/todo.js: import axios from "axios"; const store = () => ({ todos: [], }); const getters = { getAllTodos(state) { return state.todos; }, }; const actions = {

In the  Part-1  we have learned steps to build a VueJS application authentication by using an access token(Jwt token). This is the continuation article, here we are going to understand the steps for implementing refresh token and using access token in the request header to call secured API. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Access Token Authorization To Access Secured Endpoint: Now let's try to access the secured endpoint 'todos' mentioned above in our 'Dashboard' page. Now for this todos, we are going to create another module file like 'todo.js'. src/store/modules/todo.js: import axios from 'axios'; const state = () => ({ todos :[] }); const getters = { getAlltodos(state){ state.todos; } }; const