Tech Seeker

Posts

Part-2 Blazor Server Cookie Authentication

In this article, we are going to implement User Registration logic in the Blazor Server application. In this part of the article, we have to accomplish our targets like: User Registration Form. Password Hashing User Registration Logic. Click here for part-1 Create Asp.Net Core Areas Folder: We are going to create Razor Pages for our User Registration, so let store them in the 'Areas' folder. So let's create 'Areas' folders and also add the 'Layout' template and a few other additional configurations. Now let's create folders into our application like 'Areas\Identity\Pages\Account' , 'Areas\Identity\Pages\Shared' . Let's create a new layout for the pages inside of the 'Areas' folder. Let's create the layout file '_Layout.cshtml'. Areas/Identity/Pages/Shared/_Layout.cshtml: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="vie

Part-1 Blazor Server Cookie Authentication

In .Net applications, authentication can be simply accomplished with cookies without using any built-in authentication provider like 'Asp.Net Core Identity', 'Identity Server', 'Auth0', etc. This series is about implementing simple cookie-based authentication in the Blazor Server application. In this part of the article, we have to accomplish our targets like: Creating user authentication tables. Creating Blazor Server Application. Installing Entity Framework core. Configuring Database Context. Tables For Authentication: User - table store user information like 'email', 'password', 'firstname', 'lastname', etc. Roles - master table to store the roles like 'admin', 'user', 'manager',etc. UserRoles - a mapping table for the 'Users' & 'Roles' table to store the user roles information. Create Users Table: CREATE TABLE [dbo].[Users]( [Id] [int] IDENTITY(1,1) NOT NULL, [FirstName] [va

Usage Of Bootstrap(v5) Modal(Popup) In Angular(v13) Application

In this article, we are going to understand the usage of Bootstrap(V5) Modal in Angular(V13) applications. Create An Angular Application: Let's create an angular application to accomplish our demo. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Install And Configure Boostrap(V5) Install the Bootstrap NPM package. npm install bootstrap Now 'angular.json' file configure boostrap 'CSS', 'JS' references. Bootstrap Modal Usage: Let's implement a small sample to understand the usage of Bootstrap Modal. src/app.component.ts: import { Component, OnInit } from '@angular/core'; import { AppService } from './app.service'; declare var window: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { formModal: any; constructor() {}

A Demo On File Downloading In Blazor WebAssembly Application[.NET 6]

In this article, we are going to do a demo on file downloading in the blazor webassembly application. Create A .Net6 Blazor WebAssembly Application: Let's create a .Net6 Blazor WebAssembly sample application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor. CLI command dotnet new blazorwasm -o Your_Project_Name Install And Configure HttpClient Instance: Install the 'Microsoft.Extensions.Http' NuGet. Package Manager Install-Package Microsoft.Extensions.Http -Version 6.0.0 CLI command dotnet add package Microsoft.Extensions.Http --version 6.0.0 Now register the 'AddHttpClient' in the 'Program.cs'. Program.cs: builder.Services.AddHttpClient(); Implement File Downloading Logic: Let's implement our sample in the 'Index.razor' page component. First, let&

Part-2 Angular JWT Authentication Using HTTP Only Cookie[Angular V13]

In Par-1 we had implemented a basic angular authentication using the HTTP only cookie. Now we are going to enhance some features like 'Authentication Guard', 'HTTP Interceptor To Refresh The JWT Token Inside The HTTP Only Cookie', 'User Logout'. Angular Route Guard For Authentication: Problem 1:- After successful authentication, we reload our angular application, or the user closes the browser and then opens again, we can see our user information will be lost. Problem 2:- Currently with our sample application, we can access any page means, if the user is not logged in also can access the 'dashboard' page, similarly if the user logged in can also access the login form page. Solution:- Implementing Angular Route Guard for authentication. In 'AuthService' let's add logic to load the authenticated user information either from the 'AuthService.userProfile' variable or from the browser local storage. Because if the application is rel

Part-1 Angular JWT Authentication Using HTTP Only Cookie[Angular V13]

In this article, we are going to implement a sample angular application authentication using HTTP only cookie that contains a JWT token. HTTP Only JWT Cookie: In a SPA(Single Page Application) Authentication JWT token either can be stored in browser 'LocalStorage' or in 'Cookie'. Storing JWT token inside of the cookie then the cookie should be HTTP Only. The HTTP-Only cookie nature is that it will be only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-Only cookie. So if we use authentication with HTTP only JWT cookie then we no need to implement custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated cookie will be automatically sent to the server by the browser on every API call. Authentication API: To implement JWT cookie authentication we need to set up an API. For that, I had created a mock authentication API(Using the NestJS Se