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 Server Framework). So download the Git repo mentioned below.

                                                    NestJS Cookie Auth API(Mock API)

Now install the NestJS CLI command globally into your system. Run the below command.

Command To Install 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

Command To Create Angular App:
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

Note: Payload properties in login API are 'email', 'password'.

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.

Now configure the 'HttpClientModule' in the 'AppModule'.

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.

Add the login form in the 'login.component.html'.

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.

Since in the login form we are using model binding so let's register the 'FormsModule' in the 'AppModule'.

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

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.

Now we have to invoke the profile API after the successful invocation of login API in the 'LoginComponent'.

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.

We have already discussed 'AuthService.userProfile' variable will be a source to provide user data to the entire application. So after successful login user information must be populated into our application so let's update the 'AppComponent', so that we can bind some user information to the menu.

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.

Now let's show and hide the navigation menus based on the user authentication.

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

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'.

app/dashboard/dashboard.component.ts:

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.

app/dashboard/dashboard.component.html:

<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.

Refer:

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

Follow Me:

YouTube

Facebook

Twitter

Pinterest