--- name: auth0-angular description: Use when adding authentication to Angular applications with route guards and HTTP interceptors - integrates @auth0\/auth0-angular SDK for SPAs --- # 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 ```bash npm install @auth0\/auth0-angular ``` ### 2. Configure Environment **For automated setup with Auth0 CLI**, see [Setup Guide](reference\/setup.md) for complete scripts. **For manual setup:** Update `src\/environments\/environment.ts`: ```typescript 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`: ```typescript 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`: ```typescript 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`: ```typescript import { Component } from '@angular\/core'; import { AuthService } from '@auth0\/auth0-angular'; @Component({ selector: 'app-root', template: `

Loading...<\/p> <\/div>