Auth0 Angular

Auth0 Angular Integration

Add authentication to Angular applications using @auth0/auth0-angular.

Prerequisites

When NOT to Use

Quick Start Workflow

1. Install SDK

npm install @auth0/auth0-angular

2. Configure Environment

For automated setup with Auth0 CLI, see Setup Guide for complete scripts.

For manual setup:

Update src/environments/environment.ts:

export const environment = {
  production: false,
  auth0: {
    domain: 'your-tenant.auth0.com',
    clientId: 'your-client-id',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  }
};

3. Configure Auth Module

For standalone components (Angular 14+):

Update src/app/app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
};

For NgModule-based apps:

Update src/app/app.module.ts:

import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: environment.auth0.authorizationParams
    })
  ]
})
export class AppModule {}

4. Add Authentication UI

Update src/app/app.component.ts:

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
  selector: 'app-root',
  template: 
    

      
Loading...
    
    
      
        

          
          
Welcome, {{ user.name }}!
          Logout
        

      
      
        Login
      
    
  
})
export class AppComponent {
  constructor(public auth: AuthService) {}
  login(): void {
    this.auth.loginWithRedirect();
  }
  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: window.location.origin } });
  }
}

5. Test Authentication

Start your dev server and test the login flow:

ng serve

Detailed Documentation

Common Mistakes

| Mistake | Fix | |---------|-----| | Forgot to add redirect URI in Auth0 Dashboard | Add your application URL (e.g., http://localhost:4200, https://app.example.com) to Allowed Callback URLs in Auth0 Dashboard | | Not configuring AuthModule properly | Must call AuthModule.forRoot() in NgModule or provideAuth0() in standalone config | | Accessing auth before initialization | Use isLoading$ observable to wait for SDK initialization | | Storing tokens manually | Never manually store tokens - SDK handles secure storage automatically | | No token sent to API | Use either authHttpInterceptorFn for automatic token attachment, or getAccessTokenSilently() for manual control — see Integration Guide | | Route guard not protecting routes | Apply AuthGuard (or authGuardFn) to protected routes in routing config |

Related Skills

Quick Reference

Core Services:

Common Use Cases:

References