@auth0/angular-jwt

What is @auth0/angular-jwt?

@auth0/angular-jwt is an Angular library that provides utilities for handling JSON Web Tokens (JWT). It helps in managing token-based authentication in Angular applications by providing features such as token decoding, token expiration checking, and HTTP request interception to automatically add JWTs to requests.

What are @auth0/angular-jwt's main functionalities?

Token Decoding

This feature allows you to decode a JWT to access its payload. The JwtHelperService provides a method decodeToken that takes a raw JWT string and returns its decoded payload.

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

const helper = new JwtHelperService();
const decodedToken = helper.decodeToken(myRawToken);
console.log(decodedToken);

Token Expiration Checking

This feature allows you to check if a JWT has expired. The JwtHelperService provides a method isTokenExpired that takes a raw JWT string and returns a boolean indicating whether the token is expired.

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

const helper = new JwtHelperService();
const isExpired = helper.isTokenExpired(myRawToken);
console.log(isExpired);

HTTP Request Interception

This feature allows you to automatically add JWTs to HTTP requests. By configuring the JwtModule and providing a tokenGetter function, you can intercept HTTP requests and add the JWT to the Authorization header.

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtModule } from '@auth0/angular-jwt';

export function tokenGetter() {
  return localStorage.getItem('access_token');
}

@NgModule({
  imports: [
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ['example.com'],
        disallowedRoutes: ['example.com/examplebadroute/'],
      },
    }),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
  ],
})
export class AppModule {}

Other packages similar to @auth0/angular-jwt

angular2-jwt

angular2-jwt is another Angular library for handling JWTs. It provides similar functionalities such as token decoding, token expiration checking, and HTTP request interception. However, @auth0/angular-jwt is more actively maintained and has better integration with Auth0 services.

ngx-auth

ngx-auth is a comprehensive authentication library for Angular that supports JWT. It provides features for token management, HTTP request interception, and route guarding. Compared to @auth0/angular-jwt, ngx-auth offers a more extensive set of features for handling authentication flows.

ngx-jwt-auth

ngx-jwt-auth is another Angular library focused on JWT authentication. It provides utilities for token storage, token expiration checking, and HTTP request interception. While it offers similar functionalities to @auth0/angular-jwt, it is less popular and has fewer community contributions.

README

:books: Documentation - :rocket: Getting Started - :computer: API Reference - :speech_balloon: Feedback

Documentation

• Examples - code samples for common angular-jwt authentication scenario's.
• Docs site - explore our docs site and learn more about Auth0.

This library provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.

This library does not have any functionality for (or opinion about) implementing user authentication and retrieving JWTs to begin with. Those details will vary depending on your setup, but in most cases, you will use a regular HTTP request to authenticate your users and then save their JWTs in local storage or in a cookie if successful.

Getting started

Requirements

This project only supports the actively supported versions of Angular as stated in the Angular documentation. Whilst other versions might be compatible they are not actively supported

Installation

# installation with npm
npm install @auth0/angular-jwt

# installation with yarn
yarn add @auth0/angular-jwt

Configure the SDK

Import the JwtModule module and add it to your imports list. Call the forRoot method and provide a tokenGetter function. You must also add any domains to the allowedDomains, that you want to make requests to by specifying an allowedDomains array.

Be sure to import the HttpClientModule as well.

import { JwtModule } from "@auth0/angular-jwt";
import { HttpClientModule } from "@angular/common/http";

export function tokenGetter() {
  return localStorage.getItem("access_token");
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // ...
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ["example.com"],
        disallowedRoutes: ["http://example.com/examplebadroute/"],
      },
    }),
  ],
})
export class AppModule {}

Any requests sent using Angular's HttpClient will automatically have a token attached as an Authorization header.

import { HttpClient } from "@angular/common/http";

export class AppComponent {
  constructor(public http: HttpClient) {}

  ping() {
    this.http.get("http://example.com/api/things").subscribe(
      (data) => console.log(data),
      (err) => console.log(err)
    );
  }
}

Using with Standalone Components

If you are using bootstrapApplication to bootstrap your application using a standalone component, you will need a slightly different way to integrate our SDK:

import { JwtModule } from "@auth0/angular-jwt";
import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";

export function tokenGetter() {
  return localStorage.getItem("access_token");
}

bootstrapApplication(AppComponent, {
    providers: [
        // ...
        importProvidersFrom(
            JwtModule.forRoot({
                config: {
                    tokenGetter: tokenGetter,
                    allowedDomains: ["example.com"],
                    disallowedRoutes: ["http://example.com/examplebadroute/"],
                },
            }),
        ),
        provideHttpClient(
            withInterceptorsFromDi()
        ),
    ],
});

As you can see, the differences are that:

• The SDK's module is included trough importProvidersFrom.
• In order to use the SDK's interceptor, provideHttpClient needs to be called with withInterceptorsFromDi.

API reference

Read our API reference to get a better understanding on how to use this SDK.

Feedback

Contributing

We appreciate feedback and contribution to this repo! Before you get started, please see the following:

• Auth0's general contribution guidelines
• Auth0's code of conduct guidelines
• This repo's contribution guide

Raise an issue

To provide feedback or report a bug, please raise an issue on our issue tracker.

Vulnerability Reporting

Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

---

Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?

This project is licensed under the MIT license. See the LICENSE file for more info.

Changelog

v5.2.0 (2023-10-31)

Full Changelog

Changed

• Drop support for Angular 13 and below #777 (frederikprijck)