Angular 10/9 JWT Authentication Tutorial with Example

Angular 10/9 JWT Authentication Tutorial with Example

In this tutorial, you'll learn to implement JWT authentication in your Angular 10/9 applications by creating an example Angular 10 service that can be used to handle authentication with JWT.

How to Implement JWT by Example in Angular 10?

In this tutorial:

  • You'll start by installing the requirements of your project like Node.js, npm and the Angular CLI 10,
  • Next, you'll create your Angular 10 application,
  • You'll setup HttpClient into your application,
  • You'll create an Angular 10 service that handles the JWT authentication,
  • Finally, you'll install and configure angular-jwt to attach JWT access tokens to requests.

Note: For a more detailed tutorial that implements JWT authentication with Angular 8, Express and Node.js check out these tutorials:

Understanding JWT

Before diving into practice, let's briefly understand what JWT is.

JWT stands for JSON Web Token and it's an open source standard that states how to securely exchange information between computer systems.

A JWT token is simply a compact and self contained JSON object that contains information like email and password.

You can use JWT to add authentication in your Angular 8 application without resorting to make use of the traditional mechanisms for implementing authentication in web apps like sessions and cookies.

Here is how JWT works in your web application. First the user is signs in, your web server creates a JWT token for the user's credentials and sends it back to the user's browser. After that, the JWT will be persisted in the browser's local storage and sent with each HTTP request to to the server to be able to access any protected API endpoints.


To be able to complete this tutorial, you'll need to have a few requirements:

  • First, you need to have Node and NPM installed on your system. Otherwise, you can simply visit and download the binaries of your system. On Ubuntu you can follow this tutorial.
  • Next, you need to have Angular CLI 8 installed. If it's not installed, you simply need to run the npm install -g @angular/cli command to install the CLI globally on your system.
  • Finally, you need to have an Angular 8 project or simply run the ng start angular-authentication-example command and answer the CLI questions to generate your project.

With these requirements installed, you should be ready to start creating your Angular 10 service that encapsulates all the code for implementing JWT authentication in your Angular application.

Setting up Angular 10 HttpClient

You need to setup HttpClient before being able to send HTTP requests to the server. We have previously done that in a previous tutorial. You can either follow that tutorial for more information about using HttpClient or simply setup HttpClient by importing HttpClientModule from the @angular/common/http package and include it in the imports array of the application module.

Open the src/app/app.module.ts file and add the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Next, you simply need to import and inject HttpClient in your services and components.

In the next section, you'll create the JWT service.

Building the Angular 10 Authentication Service

In this section, you'll create an Angular 10 service that encapsulates the logic for JWT authentication.

In your terminal, run the following command to generate a service with Angular CLI:

$ ng generate service jwt

You can also use g instead of generate.

Next, open the src/app/jwt.service.ts file and import the HttpClient class and inject it:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

providedIn: 'root'

export class JwtService {
    constructor(private httpClient: HttpClient) { }

Now, you are ready to add the login(), logout() and loggedIn() methods.

The Server Side App

In this tutorial, you are not going to learn how to create the server application.

You server side app needs to implement JWT authentication and exposes a few endpoints:

  • /auth/login for logging in users. This endpoint should accept a POST request with the user's credentials and returns a JWT access token that will be received by the browser.
  • /auth/register for registering users. This endpoint should accept a POST request that contains a user credentials and persist them in the database.

Adding Authentication Methods

Now, after creating the JWT service in your Angular 8 application, you need to implement the necessary methods that will be used to handle the authentication in your application.

Adding the .login Method

Let' start by defining the .login method. It should take an email and password parameters and return and RxJS Observable.

Open your src/app/jwt.service.ts file and add the following method in your service:

login(email:string, password:string) {
    return<{access_token:  string}>('', {email, password}).pipe(tap(res => {
    localStorage.setItem('access_token', res.access_token);

So what you have done? You first used the method to send a request to /auth/login endpoint with an object containing the email and password passed as parameters.

Next, you used the .pipe method which is a member of the RxJS Observable for chaining operators and the tap function to execute a side effect for persisting the JWT access token, returned by the server, in the browser's local storage.

Make sure to import the tap operator using import { tap } from 'rxjs/operators';

Adding the .register Method

Just like the .login method, you also need to add a .register method that send a request to the server to register a user for the first time:

In your Angular 10 service, add the following method:

register(email:string, password:string) {
    return<{access_token: string}>('', {email, password}).pipe(tap(res => {
    this.login(email, password)

Again, you've used the method to send a POST request to the server with the registration information (email and password) then used the .pipe and tap function to run a side effect that calls the .login method to logs the user in once the registration is done.

Adding the .logout Method

Next, you need to implement a .logout method that logs out the user. This method doesn't need to send any request to the server, all it needs to do is removing the JWT access token from the user's local storage. For example:

logout() {

You call the .removeItem method of localStorage to remove the key named access_token.

Adding the .loggedIn Property

Finally, you need to create the .loggedIn property that simply verifies if a user is logged in. This is achieved by checking if a JWT access token exists in the browser's local storage:

public get loggedIn(): boolean{
  return localStorage.getItem('access_token') !==  null;

You used the .getItem method of localStorage to get the access_token item. If it doesn't exist the method returns a null object.

You can create a property in TypeScript by preceding the method definition by a get modifier. You can then access the property without using parentheses.

Now that you have implemented all the authentication methods that will be used to login, logout, register and check the user's status. You still need to attach the access token to each request that will be sent to the server for accessing protected endpoints. And protect the Angular views using guards.

Installing and Setting Up angular-jwt

After adding the required methods for implementing JWT authentication in your Angular 8 service. Let's now see how you can attach the received access token to each request.

You can do that using the angular-jwt library from Auth0. So, first install it from npm using the following command:

$ npm install @auth0/angular-jwt --save

The angular-jwt library implements the code needed for sending the access token along with each HTTP request but it needs some setup.

Open the src/app/app.module.ts file and import the JwtModule available from the @auth0/angular-jwt package:

import { JwtModule } from '@auth0/angular-jwt';

Next, you need to include it in the imports array of the application module:

imports: [
    # [...]
      config: {
        tokenGetter: function  tokenGetter() {
             return     localStorage.getItem('access_token');},
        whitelistedDomains: ['localhost:3000'],
        blacklistedRoutes: ['http://localhost:3000/auth/login']

You use the .forRoot method of JwtModule to provide a configuration object with the following attributes:

  • tokenGetter: This function is used to customize how JwtModule gets the JWT access token from the local storage.
  • whiteListedDomains: In this array, you can add any domains that are allowed to receive the JWT like public APIs.
  • blackListedRoutes: In this array, you can add routes that are not allowed to receive the JWT token.

In this example, you add the localhost:3000 URL to the white-listed domains so only your Angular application that's running from this address will receive the access tokens.

You also black-listed the localhost:3000/auth/login URL because it doesn't need to receive any access token.


In this tutorial, you learned how to implement JWT authentication in your Angular 10 application.

Create Angular 17 Project
Building a Password Strength Meter in Angular 17
Angular 17 Password Show/Hide with Eye Icon
Angular 17 tutoriel
Angular Select Change Event
Angular iframe
Angular FormArray setValue() and patchValue()
Angular Find Substring in String
Send File to API in Angular 17
EventEmitter Parent to Child Communication
Create an Angular Material button with an icon and text
Input change event in Angular 17
Find an element by ID in Angular 17
Find an element by ID from another component in Angular 17
Find duplicate objects in an array in JavaScript and Angular
What is new with Angular 17
Style binding to text-decoration in Angular
Remove an item from an array in Angular
Remove a component in Angular
Delete a component in Angular
Use TypeScript enums in Angular templates
Set the value of an individual reactive form fields
Signal-based components in Angular 17
Angular libraries for Markdown: A comprehensive guide
Angular libraries for cookies: A comprehensive guide
Build an Angular 14 CRUD Example & Tutorial
Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 15 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste