Tech Seeker

The main objectives of this article are: Implement Blazor WebAssembly AuthenticationStateProvider Invoke Secure Endpoint Using JWT Access Token AuthenticationStateProvider: In Blazor WebAssembly user authentication information can be accessed using the 'AuthenticationStateProvider'. Install 'Microsoft.AspNetCore.Components.Authorization' Package In Blazor Application: Let's install the 'Microsoft.AspNetCore.Components.Authorization' package in to our 'Blazor WebAssembly' application. Install 'Blazored.LocalStorage' Package In Blazor Application: To interact with browser's localstorage we have to install the 'Blazored.LocalStorage' package in the Blazor WebAssembly application. Now register the service in 'Program.cs' Program.cs: builder.Services.AddBlazoredLocalStorage(); Implement AuthenticationStateProvider In Blazor WebAssembly Application: To create user authentication context we have to implement the 'Authe

The main objectives of this article are: Generating JWT Access Token  Creating Login API Endpoint. Creating The Login Form In Blazor WebAssembly Application Create 'LoginVm' As A Form Model In The BlazorWasm Application: Let's create a 'LoginVm' as a form model in the Blazor WebAssembly application. BlazorWasm_Project/ViewModels/Accounts/LoginVm.cs: namespace JWT.Auth.BlazorUI.ViewModels.Account { public class LoginVm { public string Email { get; set; } public string Password { get; set; } } } Create 'LoginValidationVm' Validator For 'LoginVm': Let's create the validation model for 'LoginVm' like 'LoginValidationVm' in the Blazor application. BlazorWasm_Project/ViewModels/Accounts/LoginValidationVm: using FluentValidation; namespace JWT.Auth.BlazorUI.ViewModels.Account { public class LoginValidationVm:AbstractValidator<LoginVm> { public LoginValidationVm() {

In this article, we will implement authentication routing guards and also implement interceptors to invoke the refresh token API. Click here for part-1 angular jwt token authentication & refresh token . Route Guards: In our current sample, we have an issue with the navigation that is like after login user can access the login page which is not correct, and without login can access the 'fav-movies' page. So we can correct this issue by integrating the routing guards. Let's create a routing guard service like 'AuthGuard'. ng generate class shared/auth/auth-guard --skip-tests src/app/shared/auth/auth-guard.ts: import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree, } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(priv

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