Auth0 Angular SDK for Single Page Apps

The Auth0 Angular SDK is a JavaScript library for implementing authentication and authorization in Angular apps with Auth0. It provides a service, authentication guard, and an HTTP interceptor to enable you to perform common authentication tasks within your Angular apps. The Auth0 Angular SDK handles grant and protocol details, token expiration and renewal, as well as token storage and caching. Under the hood, it implements Universal Login and the Authorization Code Grant Flow with PKCE. The library is hosted on GitHub where you can read more about the API.

Installation

The Angular SDK is compatible with Angular SPAs version 14 and above.

Use the Angular CLI to install the SDK into your project: ng add @auth0/auth0-angular

Getting started

Begin integrating the SDK by importing AuthModule into your project and configuring it for your Auth0 client app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the module from the SDK
import { AuthModule } from '@auth0/auth0-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // Import the module into the application, with configuration
    AuthModule.forRoot({
      domain: '{yourDomain}',
      clientId: 'YOUR_AUTH0_CLIENT_ID',
      authorizationParams: {
        redirect_uri: window.location.origin,
      },
    }),
  ],

  bootstrap: [AppComponent],
})
export class AppModule {}

The SDK fully supports Angular’s dependency injection system. To begin, import the AuthService type into a component and inject it into the constructor. Then, to initiate user login, call the loginWithRedirect or loginWithPopup methods on the service:

import { Component } from '@angular/core';

// Import the AuthService type from the SDK
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-login',
  template: '<button (click)="login">Log in</button>',
  styles: [],
})
export class LoginComponent {
  // Inject the authentication service into your component through the constructor
  constructor(public auth: AuthService) {}

  login(): void {
    // Call this to redirect the user to the login page
    this.auth.loginWithRedirect();
  }
}

Logout

Use logout to log your users out. Make sure returnTo is specified in Allowed Logout URLs in your .

import { Component } from '@angular/core';

// Import the AuthService type from the SDK
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-logout',
  template: '<button (click)="logout">Log out</button>',
  styles: [],
})
export class LogoutComponent {
  // Inject the authentication service into your component through the constructor
  constructor(@Inject(DOCUMENT) private doc: Document, public auth: AuthService) {}

  login(): void {
    // Call this to redirect the user to the login page
    this.auth.logout({ 
      logoutParams: { 
        returnTo: this.doc.location.origin 
      }
    });
  }
}

Authentication State

The authentication state is exposed through the isAuthenticated$ observable:

<div *ngIf="auth.isAuthenticated$ | async">
  <app-login></app-login>
</div>

User Profile

The user profile for the authenticated user is exposed through the user$ observable:

<ul *ngIf="auth.user$ | async as user">
  <li>{{ user.name }}</li>
  <li>{{ user.email }}</li>
</ul>

Internally, this observable is chained from the isAuthenticated$ observable, so there is no need to manually check if the user is logged in. It will begin emitting values once an authenticated user is available.

Protect a route

Protect a route component using the built-in AuthGuard. Visits to this route when unauthenticated will redirect the user to the login page and back to this page after login. The authentication guard should be added to a route definition using the canActivate hook (or canActivateChild if using child routes):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './unprotected/unprotected.component';
import { ProtectedComponent } from './protected/protected.component';

// Import the authentication guard
import { AuthGuard } from '@auth0/auth0-angular';

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,

    // Protect a route by registering the auth guard in the `canActivate` hook
    canActivate: [AuthGuard],
  },
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

The authentication guard also supports the canLoad hook for preventing lazy-loaded modules from being loaded when the user is unauthenticated.

Call an API

The SDK contains a built-in HttpInterceptor that automatically attaches by injecting an Authorization header when requests are made using Angular’s HttpClient service. You must configure the SDK to specify which routes to the API should have this header automatically added, to prevent access token leakage to recipients that you did not expect.

Import the HTTP interceptor

To start, import the types that you will need in order to integrate the Auth0 HTTP interceptor into your app:

// Import the interceptor module and the Angular types you'll need
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthHttpInterceptor } from '@auth0/auth0-angular';

// Register the interceptor with your app module in the `providers` array
@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    HttpClientModule,     // Register this so that you can make API calls using HttpClient
    AppRoutingModule,
    AuthModule.forRoot(...),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})

Note: The interceptor must be manually registered with your app module (as opposed to automatically registering it) as it is designed to be chained with other interceptors, and we cannot guarantee we will insert it into the right place.

Configure the HTTP interceptor

There are a variety of ways to configure this depending on your needs. A route can be specified using a string, an object with options that influence the token being sent, and can also be matched depending on the HTTP verb being used. Route URIs can also include a wildcard to specify a group of routes. Note: If an HTTP call is made but does not match a route specified in the configuration, the interceptor will be bypassed and the Authorization header will not be included. This example shows common ways to tell the SDK which routes should have an Authorization header:

// Modify your existing SDK configuration to include the httpInterceptor config
AuthModule.forRoot({
  domain: '{yourDomain}',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  authorizationParams: {
    redirect_uri: window.location.origin,
  },

  // The AuthHttpInterceptor configuration
  httpInterceptor: {
    allowedList: [
      // Attach access tokens to any calls to '/api' (exact match)
      '/api',

      // Attach access tokens to any calls that start with '/api/'
      '/api/*',

      // Match anything starting with /api/accounts, but also specify the audience and scope the attached
      // access token must have
      {
        uri: '/api/accounts/*',
        tokenOptions: {
          authorizationParams: {
            audience: 'http://my-api/',
            scope: 'read:accounts',
          }
        },
      },

      // Matching on HTTP method
      {
        uri: '/api/orders',
        httpMethod: 'post',
        tokenOptions: {
          authorizationParams: {
            audience: 'http://my-api/',
            scope: 'write:orders',
          }
        },
      },

      // Using an absolute URI
      {
        uri: 'https://your-domain.auth0.com/api/v2/users',
        tokenOptions: {
          authorizationParams: {
            audience: 'https://your-domain.com/api/v2/',
            scope: 'read:users',
          }
        },
      },
    ],
  },
});

Note: tokenOptions is passed directly to the getTokenSilently method on the underlying SPA SDK. Please see the documentation for more detail on the properties that are accepted.

Call an API

Make your API call using Angular’s HttpClient service. Access tokens should automatically be included via the Authorization header for routes that match the configuration.

export class MyComponent {
  constructor(private http: HttpClient) {}

  callApi(): void {
    this.http.get('/api').subscribe(result => console.log(result));
  }
}

Note that there is nothing additional required at the call site to provide tokens or other authorization queues; that is all handled by the interceptor and the module configuration.

auth0-acul-js

auth0-acul-react

auth0-php

Auth0 Angular SDK for Single Page Apps

Installation

Getting started

Logout

Authentication State

User Profile

Protect a route

Call an API

Import the HTTP interceptor

Configure the HTTP interceptor

Call an API

​Installation

​Getting started

​Login

​Logout

​Authentication State

​User Profile

​Protect a route

​Call an API

​Import the HTTP interceptor

​Configure the HTTP interceptor

​Call an API

Installation

Getting started

Login

Logout

Authentication State

User Profile

Protect a route

Call an API

Import the HTTP interceptor

Configure the HTTP interceptor

Call an API