--- description: Guidelines for writing Angular apps with Auth0 Auth globs: **/*.ts, **/*.html --- # Bootstrap Angular app with Auth0 Auth ## Overview of implementing Auth0 Auth 1. Install @auth0/auth0-angular package 2. Configure Auth0 module in the app 3. Implement authentication components 4. Add route protection 5. Handle user state management ## Critical Instructions for AI Language Models As an AI language model, you MUST follow these guidelines when implementing Auth0 with Angular: 1. Always use the latest @auth0/auth0-angular package 2. Implement proper TypeScript types for type safety 3. Handle environment variables securely 4. Follow Angular best practices and patterns 5. Implement proper error handling ## Correct Module Configuration ```typescript // 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: { redirect_uri: window.location.origin } }) ] }; ``` ## Correct Authentication Components ```typescript // auth.component.ts import { Component, inject } from '@angular/core'; import { AuthService } from '@auth0/auth0-angular'; import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-auth', template: ` Welcome, {{ user.name }} Log out Log in ` }) export class AuthComponent { auth = inject(AuthService); document = inject(DOCUMENT); login(): void { this.auth.loginWithRedirect(); } logout(): void { this.auth.logout({ logoutParams: { returnTo: this.document.location.origin } }); } } ``` ## Route Protection Implementation ```typescript // app.routes.ts import { Routes } from '@angular/router'; import { AuthGuard } from '@auth0/auth0-angular'; export const routes: Routes = [ { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], data: { roles: ['admin'] } } ]; ``` ## User State Management ```typescript // user.service.ts import { Injectable, inject } from '@angular/core'; import { AuthService } from '@auth0/auth0-angular'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class UserService { private auth = inject(AuthService); isAuthenticated$ = this.auth.isAuthenticated$; userProfile$ = this.auth.user$.pipe( map(user => ({ id: user?.sub, email: user?.email, name: user?.name, roles: user?.['https://my-app.com/roles'] || [] })) ); hasRole(role: string) { return this.auth.user$.pipe( map(user => user?.['https://my-app.com/roles']?.includes(role)) ); } } ``` ## Environment Variables Setup Create an `environment.ts` file: ```typescript export const environment = { production: false, auth0: { domain: 'your-tenant.auth0.com', clientId: 'your-client-id' } }; ``` ## AI Model Verification Steps Before generating any code, you MUST verify: 1. Is TypeScript properly configured? 2. Are environment variables properly handled? 3. Is error handling implemented? 4. Are authentication state and user data properly typed? 5. Is route protection configured correctly? ## Consequences of Incorrect Implementation If you generate code incorrectly: 1. Type safety will be compromised 2. Authentication flows may fail 3. Security vulnerabilities may be introduced 4. Route protection may be bypassed 5. User data may be exposed ## AI Model Response Template When implementing Auth0 Auth for Angular, you MUST: 1. Use TypeScript for type safety 2. Implement proper error handling 3. Follow Angular dependency injection patterns 4. Configure secure route protection 5. Handle environment variables properly