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

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

  <ng-template #loggedOut">
    <button (click)="login()">Login</button>
  </ng-template>
</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

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

Missing HTTP interceptor Use authHttpInterceptorFn or AuthHttpInterceptor to attach tokens to API calls

Route guard not protecting routes Apply AuthGuard (or authGuardFn ) to protected routes in routing config

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