Tech Seeker

The main objectives  of this article are: Implement Refresh Token User Logout Refresh Token: When the JWT access token expires to renew it without user credentials we will use the Refresh Token. The user sends a valid 'User Name' and 'Password' to the server, then the server will generate JWT Access Token and Refresh Token sent as a response. The JWT Access Token is a short-lived token(eg: 20 minutes) and Refresh Token is a long live token(eg: 7 days). Now client application sends a JWT access token in the request header that makes the user authenticated. If the JWT token expires then the server returns a 401 authorized response. Then the client sends the refresh token to the server to regenerate the JWT Access Token. The server validates the refresh token and returns a new JWT Access Token and a new Refresh Token as a response. SQL Script To Create UserRefreshToken Table: Let's run the below sql script to create 'UserRefreshToken' table that contains colum

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() {

The main objectives of this article are: In The API Project, We Will Create A User Registration Endpoint. In Blazor WebAssembly Application We Will Create A User Registration Form. User Table SQL Script: Run the below script to create the 'User' table. CREATE TABLE [dbo].[User]( [Id] INT IDENTITY(1000,1) NOT NULL, [FirstName] VARCHAR(300) NULL, [LastName] VARCHAR(300) NULL, [Email] VARCHAR(300) NULL, [Password] VARCHAR(500) NULL CONSTRAINT PK_User PRIMARY KEY (Id) ) Create A .NET7 Blazor WebAssembly Application: Let's create a Blazor WebAssembly application using Visual Studio 2022. (Step 1) (Step 2) (Step 3) Setup MudBlazor: Install the MudBlazor library. Add the MudBlazor namespace in '_Import.razor'. @using MudBlazor Add the below CSS into the closing head tag in 'wwwroot/index.html'. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="