auth0-angular

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 : `

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 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