Auth0 Angular Integration

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

Prerequisites

• Angular 13+ application
• Auth0 account and application configured
• If you don't have Auth0 set up yet, use the auth0-quickstart skill first

When NOT to Use

• AngularJS (1.x) - This SDK requires Angular 13+, use legacy solutions for AngularJS
• Mobile applications - Use auth0-react-native for React Native or native SDKs for Ionic
• Backend APIs - Use JWT validation middleware for your server language

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: `
    \x3Cdiv *ngIf="auth.isLoading$ | async; else loaded">
      \x3Cp>Loading...\x3C/p>
    \x3C/div>

    \x3Cng-template #loaded>
      \x3Cng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        \x3Cdiv *ngIf="auth.user$ | async as user">
          \x3Cimg [src]="user.picture" [alt]="user.name" />
          \x3Ch2>Welcome, {{ user.name }}!\x3C/h2>
          \x3Cbutton (click)="logout()">Logout\x3C/button>
        \x3C/div>
      \x3C/ng-container>

      \x3Cng-template #loggedOut">
        \x3Cbutton (click)="login()">Login\x3C/button>
      \x3C/ng-template>
    \x3C/ng-template>
  `
})
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

• Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
• Integration Guide - Protected routes with guards, HTTP interceptors, error handling
• API Reference - Complete SDK API, configuration options, services reference, testing strategies

Common Mistakes

Related Skills

• auth0-quickstart - Basic Auth0 setup
• auth0-migration - Migrate from another auth provider
• auth0-mfa - Add Multi-Factor Authentication

Quick Reference

Core Services:

• AuthService - Main authentication service
• isAuthenticated$ - Observable check if user is logged in
• user$ - Observable user profile information
• loginWithRedirect() - Initiate login
• logout() - Log out user
• getAccessTokenSilently() - Get access token for API calls

Common Use Cases:

• Login/Logout buttons → See Step 4 above
• Protected routes with guards → Integration Guide
• HTTP interceptors for API calls → Integration Guide
• Error handling → Integration Guide

References

• Auth0 Angular SDK Documentation
• Auth0 Angular Quickstart
• SDK GitHub Repository