> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

> Describes the Auth0 SDK for Angular Single Page Apps

# 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](/docs/authenticate/login/auth0-universal-login) and the [Authorization Code Grant Flow with PKCE](/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

The library is [hosted on GitHub](https://github.com/auth0/auth0-angular) where you can [read more about the API](https://auth0.github.io/auth0-angular/).

## Installation

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  The Angular SDK is compatible with Angular SPAs version 14 and above.
</Callout>

Use the [Angular CLI](https://cli.angular.io/) 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:

```jsx lines theme={null}
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 {}
```

## Login

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:

```jsx lines theme={null}
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 <Tooltip tip="Auth0 Dashboard: Auth0's main product to configure your services." cta="View Glossary" href="/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>.

```jsx lines theme={null}
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:

```html lines theme={null}
<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:

```html lines theme={null}
<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):

```jsx lines expandable theme={null}
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 <Tooltip tip="Access Token: Authorization credential, in the form of an opaque string or JWT, used to access an API." cta="View Glossary" href="/docs/glossary?term=access+tokens">access tokens</Tooltip> 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:

```jsx lines theme={null}
// 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:

```jsx lines expandable theme={null}
// 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](https://auth0.github.io/auth0-spa-js/interfaces/GetTokenSilentlyOptions.html) 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.

```jsx lines theme={null}
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.