Posted on March 28, 2023
Angular Authentication using JWT token Read the JWT token Authentication in ASP.Net Core article located here, since the remainder of this article will focus on writing implementing JWT authentication in angular. Local Storage - Access token Bearer token in Authentication Header
Here is Github profile to see raw code. Install the @auth0/angular-jwt libraries using npm. Create a new component, login.component.ts, to handle user login. This component will call the auth.service to authenticate the user and receive a JWT token. login.component.html login.component.ts Create a new service, auth.service.ts, to manage authentication. This service will handle the creation and storage of JWT tokens. Enable CORS in Webapi, if your frontend and backend deployed in different host Create guards to protect routes that require authentication. These guards will check if the user has a valid JWT token before allowing access to the route. Enable the guard on route Create an HTTP interceptor to include the JWT token in every HTTP request. This interceptor will add the token to the Authorization header. Make sure to register HTTP Interceptor in app.module Implementing JWT authentication in an Angular application involves installing the required dependencies, creating an authentication service to handle login, logout, and authentication checks, creating a login component to handle the login form, creating an auth guard to protect routes that require authentication, and adding the auth guard to the routing configuration. The @auth0/angular-jwt library is used to work with JWT tokensOutcome of Implementation
Steps to implementing JWT authentication in angular
npm run start
Network
and local storage
from developer tool. Following are snapshots to follow.Here is basic diagram of JWT authentication in angular
Let's understand the steps and code to follow
Install the required dependencies
npm install @auth0/angular-jwt --save
Create a login page
<div class="container">
<h1>Login</h1>
<form>
<label for="username"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="username" value="codehack.witharun@gmail.com" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" value="CodeHack_with_arun" name="password" required>
<button type="button" (click)="login()">Login</button>
</form>
</div>
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(
private router: Router,
private authService: AuthService) { }
login() {
//This is just for demo but you should not do like this.
let loginData = { email: 'codehack.witharun@gmail.com', password: 'CodeHack_with_arun' }
this.authService.authenticateUser(loginData)
.subscribe(result => {
localStorage.setItem("access_token", JSON.stringify(result?.token));
this.router.navigate(['/']);
});
}
}
Create AuthService
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { JwtHelperService } from "@auth0/angular-jwt";
import { Observable } from "rxjs";
@Injectable({
providedIn: 'root'
})
export class AuthService {
basePath = "http://localhost:5258/Auth/"
constructor(private jwtHelper: JwtHelperService, private http: HttpClient) { }
authenticateUser(loginData: any): Observable<any> {
return this.http.post<any>(this.basePath, loginData)
}
getToken() {
const token = localStorage.getItem('access_token');
return token;
}
public isAuthenticated(): boolean {
const token = localStorage.getItem('access_token');
return !this.jwtHelper.isTokenExpired(token);
}
}
Create guard to prevent route
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate() {
if (this.authService.isAuthenticated()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
Create Http Interceptor
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) { }
intercept(req: HttpRequest<any>, next: HttpHandler) {
const authToken = this.authService.getToken();
const authReq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + authToken)
});
return next.handle(authReq);
}
}
Summary