In this article, we are going to implement a sample angular application authentication using HTTP only cookie that contains a JWT token.
Note: Payload properties in login API are 'email', 'password'.
Let's implement the login API call in 'auth.service.ts'.
Configure 'Login' component routing.
Now let's configure the 'DashboardComponent' route.
Let's add the logic to consume the 'Favorite Movie API' in the 'DashboardService'.
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 Server Framework). So download the Git repo mentioned below.
Now install the NestJS CLI command globally into your system. Run the below command.
Command To Install NestJS CLI
npm i -g @nestjs/cli
npm i -g @nestjs/cli
After downloading the Git repo, go to the 'src' folder and run the below command.
npm install
Run the below command to start the NestJS application.
npm run start
In the 'maint.ts' we have to add our angular application domain to overcome the 'cross-origin' issue.
Since it's a mock API you can customize your own 'email' and 'password' for authentication testing so just navigate to the below file.
Now to change the expiration time of the JWT token stored in the HTTP-Only cookie navigate to the below files.
Create An Angular Application:
Let's create an angular application to accomplish our demo on HTTP-Only cookie authentication.
Command To Install Angular CLI:
npm install -g @angular/cli
npm install -g @angular/cli
Command To Create Angular App:
ng new your_app_name
ng new your_app_name
Note: On creating a project make sure to enable the routing by default.
Setup Bootstrap And Angular Home Component:
Now install the bootstrap for styling.
npm install bootstrap
After successful installation of the package reference will be added in the 'Package.json'.Configure Bootstrap CSS and JS file in the 'angular.json' file.Let's create a 'Home' angular component.
ng g component Home --skip-tests
Add the below HTML into the 'home.component.html'
src/app/home/home.component.html:
<div class="container "> <div class="row mt-5"> <div class="col d-flex justify-content-center"> <div class="card"> <div class="card-body "> <h1 class="card-title d-flex justify-content-center">Welcome!</h1> <h4 class="card-title">Angular 13 Demo On JWT HTTP Only Cookie Authentication</h4> </div> </div> </div> </div> </div>Configure routing for 'HomeComponent' in 'AppRoutingModule'.
src/app/app-routing.module.ts:
import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: '', component: HomeComponent, }, ];Now add the navigation menu for our sample application.
src/app/app.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">HTTP Only Cookie</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" active routerLink="/">Home</a> </li> </ul> </div> </div> </nav> <router-outlet></router-outlet>
NestJS Login API:
Post API:
http://localhost:3000/auth/login
http://localhost:3000/auth/login
Create Angular Authentication Service:
Let's create a service where we will implement all our authentication-related API calls.
ng g service shared/auth/auth --skip-tests
Let's implement the login API call in 'auth.service.ts'.
src/shared/auth/auth.service.ts:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root', }) export class AuthService { constructor(private http: HttpClient) {} login(user: any) { return this.http.post('http://localhost:3000/auth/login', user,{withCredentials:true}); } }
- (Line: 8) The 'HttpClient' injected into the 'AuthService' loads from the '@angular/common/http'.
- (Line: 10-14) The login method inputs 'user' payload(contains 'email', 'password'). Invoking the login post-call. The 'withCredentials:true' is enabled because our API and angular domains are different. So 'withCredentials:true' helps to attach the cookie to API calls for cross-site requests.
src/app.module.ts:
import { HttpClientModule } from '@angular/common/http'; // code hidden for display purpose @NgModule({ imports: [HttpClientModule] }) export class AppModule {}
Create Login Component For User Authentication:
Let's create an angular 'login' component to implement our HTTP-only cookie authentication.
ng g component login --skip-tests
Configure 'Login' component routing.
src/app-routing.module.ts:
import { LoginComponent } from './login/login.component'; // code hidden for display purpose const routes: Routes = [ { path: 'login', component: LoginComponent, }, ];Add the login menu in 'app.component.html'.
src/app.component.html
<!-- code hidden fro display purpose --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" active routerLink="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/login">Login</a> </li> </ul>In the 'login.component.ts' file let's implement our logic for authentication.
src/login/login.component.ts:
import { Component, OnInit } from '@angular/core'; import { AuthService } from '../shared/auth/auth.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], }) export class LoginComponent implements OnInit { loginUser: any = { email: '', password: '', }; constructor(private auth: AuthService) {} ngOnInit(): void {} login() { this.auth.login(this.loginUser).subscribe({ next: () => { alert('login successful'); }, error: (error) => { alert('login failed'); }, }); } }
- (Line: 10-13) The 'loginUser' object for the login form data binding.
- (Line: 15) Injected the 'AuthService'.
- (Ling: 19-28) The 'login()' method gets invoked by clicking the 'Login' button on a form. Here we are invoking the user authentication API.
src/login/login.component.html:
<div class="container mt-5"> <div class="row"> <div class="col-md-6 offset-md-3"> <form method="POST"> <legend class="d-flex justify-content-center">Login</legend> <div class="mb-3"> <label for="txtName" class="form-label">Email</label> <input type="text" [(ngModel)]="loginUser.email" name="email" class="form-control" id="txtName" /> </div> <div class="mb-3"> <label for="txtCost" class="form-label">Password</label> <input type="password" [(ngModel)]="loginUser.password" name="password" class="form-control" id="txtCost" /> </div> <button type="button" (click)="login()" class="btn btn-primary"> Login </button> </form> </div> </div> </div>
- (Line: 4) The form needs to be decorated with the 'method=post' HTML attribute.
- (Line: 10&20) The form input fields are binding with 'loginUser' object props to enable 2-way binding.
- (Line: 27-29) The 'Login' button click event registered with 'login()' method.
src/app.module.ts:
import { FormsModule } from '@angular/forms'; @NgModule({ imports: [FormsModule] }) export class AppModule {}
NestJS Profile API:
Profile API returns authenticated user information.
GET API:
http://localhost:3000/user-profile
http://localhost:3000/user-profile
Consume User Profile API On Successful Authentication:
Let's create a response model for our 'User Profile' API.
ng g class shared/models/user.model --skip-tests
src/shared/models/user.model.ts:
export interface UserModel { id:number; firstName: string; lastName: string; email: string; phone: string; }Let's update profile logic in the 'auth.service.ts'.
app/shared/auth/auth.service.ts:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject, Observable } from 'rxjs'; import { UserModel } from '../models/user.model'; @Injectable({ providedIn: 'root', }) export class AuthService { userProfile: BehaviorSubject<UserModel> = new BehaviorSubject<UserModel>({ email: '', firstName: '', id: 0, lastName: '', phone: '', }); constructor(private http: HttpClient) {} login(user: any) { return this.http.post('http://localhost:3000/auth/login', user, { withCredentials: true, }); } profile(): Observable<UserModel> { return this.http.get<UserModel>('http://localhost:3000/user-profile', { withCredentials: true, }); } saveUserToLocalStorage(user: UserModel) { this.userProfile.next(user); localStorage.setItem('user-profile', JSON.stringify(user)); } }
- (Line: 10-16) The 'userProfile' variable of type 'BehaviorSubject<UserModel>'. So this observable variable will contain user information, so this variable will be the source for the entire application to provide authenticated user information.
- (Line: 26-30) Here we are invoking our secured user profile endpoint, to fetch the authenticated user information.
- (Line: 32-35) The 'saveUserToLocalStorage()' method to update our user information into the 'userProfile' variable and into the browser localstorage.
src/login/login.component.ts:
login() { let authFlow = this.auth .login(this.loginUser) .pipe(switchMap(() => this.auth.profile())); authFlow.subscribe({ next: (user: UserModel) => { this.auth.saveUserToLocalStorage(user); console.log(user); }, error: (error) => { console.log(error); }, }); }
- Here we can observe after calling the 'login' API switching to call the 'Profile' API and finally saving the profile data by calling the 'saveUserToLocalStorage()' method.
src/app.component.ts:
import { Component, OnInit } from '@angular/core'; import { AuthService } from './shared/auth/auth.service'; import { UserModel } from './shared/models/user.model'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { userInfo?: UserModel; constructor(private auth: AuthService) {} ngOnInit(): void { this.auth.userProfile.subscribe((data) => { this.userInfo = data; }); } title = 'ang13-jwt-httponlycookie-learning'; }
- (Line: 11) Declared a 'userInfo' variable of type 'UserModel'.
- (Line: 14-16) Subscribed to the 'AuthService.userProfile' variable for reading the authenticated user.
src/app.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">HTTP Only Cookie</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" active routerLink="/">Home</a> </li> <li class="nav-item" *ngIf="(userInfo?.id ?? 0) === 0"> <a class="nav-link" routerLink="/login">Login</a> </li> </ul> <ul class="d-flex navbar-nav" *ngIf="(userInfo?.id ?? 0) !== 0"> <li class="nav-item"> <a class="nav-link" active>{{ userInfo?.email }}</a> </li> </ul> </div> </div> </nav> <router-outlet></router-outlet>
- (Line: 10-12) If 'userInfo.id == 0' means user not authenticated, in that case we have to show 'Login' menu.
- (Line: 14-18) if 'userInfo.id !== 0' means user is authenticated. so then only show the navigation menus under it.
NestJS Protected Favorite Movie API:
NestJS had Favorite Movie API only authenticated users can consume it just like the 'Profile API' above.
GET API
http://localhost:3000/liked-movies
http://localhost:3000/liked-movies
Create An Angular Dashboard Component To Consume Protected Favorite Movie API:
Let's create an angular Dashboard component where the user will navigate to this component on successful authentication. In this Dashboard component, we are going to consume the Protected Favorite Movie API.
ng g component dashboard --skip-tests
Now let's configure the 'DashboardComponent' route.
src/app-routing.module.ts:
import { DashboardComponent } from './dashboard/dashboard.component'; // code hidden for display purpose const routes: Routes = [ { path: 'dashboard', component: DashboardComponent } ];Now let's create a service file for our dashboard component.
ng g service dashboard/dashboard --skip-tests
Let's add the logic to consume the 'Favorite Movie API' in the 'DashboardService'.
app/dashboard/dashboard.service.ts:
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class DashboardService { constructor(private http: HttpClient) {} getMovies(): Observable<string[]> { return this.http.get<string[]>('http://localhost:3000/liked-movies', { withCredentials: true, }); } }
- (Line: 11-15) Invoking the 'Favorite Movies API'.
import { Component, OnInit } from '@angular/core'; import { DashboardService } from './dashboard.service'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'], }) export class DashboardComponent implements OnInit { favouriteMovies: string[] = []; constructor(private dashboardService: DashboardService) {} ngOnInit(): void { this.dashboardService.getMovies().subscribe({ next: (data) => (this.favouriteMovies = data), }); } }
- Here we consume the 'DashboardService' to invoke the 'Favorite Movie' API and store the results in the 'favouritesMovies' variable of the type string array.
<div class="container"> <div class="row"> <div class="col col-md-4 offset-md-4"> <legend>Your Favorite Movies!</legend> </div> </div> <div class="row"> <div class="col col-md-3 m-2" *ngFor="let movie of favouriteMovies"> <div class="card"> <div class="card-body"> <h5 class="card-title">{{movie}}</h5> </div> </div> </div> </div> </div>Now add the dashboard menu link in the 'app.component.html'.
src/app.component.html:
<li class="nav-item" *ngIf="(userInfo?.id ?? 0) !== 0"> <a class="nav-link" routerLink="/dashboard">Dashboard</a> </li>
'Authentication Gaurds', 'HTTP Interceptors','User Logout' functionalities will be explained in Part-2.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on JWT Authentication using the HTTP-Only Cookie in Angular application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment