JWT authentication for angular

Usage no npm install needed!

<script type="module">
  import webacadNgJwtAuth from 'https://cdn.skypack.dev/@webacad/ng-jwt-auth';


NPM version Build Status


JWT authentication for angular.


  • Authorization service
  • HTTP interceptor
  • Basic logged in router guard
  • Auto login on page refresh (uses store to store the token in browser)


  • @angular/core
  • @angular/common
  • @angular/router
  • @webacad/ng-store
  • jwt-decode
  • rxjs@^5.5.0


Install with npm:

npm install --save @webacad/ng-jwt-auth

or with yarn:

yarn add @webacad/ng-jwt-auth


First create a new class which will extend the AbstractAuthConfigurator. This new class will be used as a bridge between your application and this library.

import {Injectable} from '@angular/core';
import {HttpResponse, HttpErrorResponse} from '@angular/common/http';
import {AbstractAuthConfigurator} from '@webacad/ng-jwt-auth';
import {Observable} from 'rxjs/Observable';

import {UsersRepository, User} from '../model/users';

export class AuthConfigurator extends AbstractAuthConfigurator<User>

        private $users: UsersRepository,
    ) {
            withCredentials: true,
            loginPage: '/login',
            tokenStorage: 'sm_jwt_data',

    public isServerLogout(err: HttpErrorResponse): boolean
        return err.status === 403;

    public extractToken(response: HttpResponse<any>): string|undefined
        return response.body.auth.token;

    public getUserByToken(token: any): Observable<User>
        return this.$users.get(token.jti);

    public login(data: any): Observable<User>
        return this.$users.login(data.email, data.password);


Your application must have some user entity.


  • withCredentials: (boolean, default: false), option passed to @angular/common/http interceptor: api
  • loginPage: (string, default: /login), router link to your login page
  • tokenStorage: (string, default: ng-jwt-auth-token-data), key which will be used for storing your jwt token in browser storage


  • isServerLogout:
    • Method called from @angular/common/http interceptor
    • Called on error response
    • Should return true if server wants you to logout the user
  • extractToken:
    • Method called from @angular/common/http interceptor
    • Should return raw string token from http response or undefined if token does not exists in response
  • getUserByToken:
    • Method called on page refresh if jwt token exists in browser storage (auto login on refresh)
    • Receives decoded jwt token from browser storage
    • Must return the Observable object with your user
  • login:
    • Method called when user is being signed into your application
    • Must return the Observable object with your user
  • logout (not required):
    • Method called when used is being logged out from your application

Register configurator and ng-jwt-auth module

Now you only have to register your configurator class as a service and import the ng-jwt-auth module:

import {NgModule} from '@angular/core';
import {AuthModule, AbstractAuthConfigurator} from '@webacad/ng-jwt-auth';
import {AuthConfigurator} from './auth';

    imports: [
    providers: [
            provide: AbstractAuthConfigurator,
            useClass: AuthConfigurator,
export class AppModule {}


AuthService can be used for user authentication. It contains all the necessary methods and events:

  • event onLogin: Called after user was logged in
  • event onLogout: Called before user is logged out
  • getter loggedIn: Returns Observable<true> if user is currently signed in. Observable<false> otherwise.
  • getter user: Returns Observable<User> if user is currently signed in. Observable<undefined> otherwise.
  • method login(data: any): Should be used for user login.
  • method logout(): Should be used for user logout.

Example of usage:

import {AuthService} from '@webacad/ng-jwt-auth';
import {Observable} from 'rxjs/Observable';
import {User} from '../model/users';

export class UserInfo
        private $auth: AuthService<User>,
    ) {
        this.$auth.onLogin.subscribe(() => {
            alert('User was logged in');
        this.$auth.onLogout.subscribe(() => {
            alert('User was logged out');
    public isLoggedIn(): Observable<boolean>
        return this.$auth.loggedIn;
    public getUser(): Observable<User|undefined>
        return this.$auth.user;
    public login(email: string, password: string): Observable<User>
        return this.$auth.login({
    public logout(): void

HTTP interceptor

The build in AuthHttpInterceptor is automatically registered into your application.

It automatically:

  • Adds the bearer authorization token into all requests if user is logged in
  • Monitors inactivity logouts from server
  • Automatically updates the jwt token after each request (if the token is present in HTTP response)


Simple router guard which prohibits access to route(s) for all anonymous users.

See angular documentation for how to use the guard.