---

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

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

// 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: `
    <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
      <div *ngIf="auth.user$ | async as user">
        <p>Welcome, {{ user.name }}</p>
        <button (click)="logout()">Log out</button>
      </div>
    </ng-container>
    <ng-template #loggedOut>
      <button (click)="login()">Log in</button>
    </ng-template>
  `
})
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

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

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

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