Skip to main content

Use AI to integrate Auth0

If you use an AI coding assistant like Claude Code, Cursor, or GitHub Copilot, you can add Auth0 authentication automatically in minutes using agent skills.Install:
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-angular
Then ask your AI assistant:
Add Auth0 authentication to my Angular app
Your AI assistant will automatically create your Auth0 application, fetch credentials, install @auth0/auth0-angular, create route guards and HTTP interceptors, and configure your environment. Full agent skills documentation →
Prerequisites: Before you begin, ensure you have the following installed:Verify installation: node --version && npm --versionAngular Version Compatibility: This quickstart works with Angular 19 through 21 using the Angular CLI. The @auth0/auth0-angular SDK supports Angular 13 and newer.

​
Get Started

This quickstart demonstrates how to add Auth0 authentication to an Angular application. You’ll build a secure single-page app with login and logout functionality using Angular’s dependency injection system and the Auth0 Angular SDK.
1

Create a new project

Create a new Angular project for this Quickstart
npx @angular/cli@latest new auth0-angular --routing=true --style=css
Open the project
cd auth0-angular
2

Install the Auth0 Angular SDK

npm install @auth0/auth0-angular && npm install
3

Setup your Auth0 App

Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project.You have three options to set up your Auth0 app: use the Quick Setup tool (recommended), run a CLI command, or configure manually via the Dashboard:
4

Configure the Auth0 module

With your environment file in place from the previous step, add provideAuth0 to the providers array in your app.config.ts:
src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ]
};
If you set up your Auth0 app manually via the dashboard, create src/environments/environment.ts with your domain and client ID from the dashboard.Angular 20+ projects also include provideBrowserGlobalErrorListeners() in this file — keep it in the array alongside provideAuth0. No changes to main.ts are needed.
5

Create Login, Logout and Profile Components

Use the Angular CLI to scaffold the component files:
ng generate component components/login-button --inline-template --inline-style --skip-tests && \
ng generate component components/logout-button --inline-template --inline-style --skip-tests && \
ng generate component components/profile --inline-template --inline-style --skip-tests
Add the following code to each component:Now update the main App Component and add styling:
Replace the contents of your app component file (src/app/app.ts on Angular 20+, or src/app/app.component.ts on Angular 19):
src/app/app.ts
import { Component, inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { CommonModule } from '@angular/common';
import { LoginButtonComponent } from './components/login-button.component';
import { LogoutButtonComponent } from './components/logout-button.component';
import { ProfileComponent } from './components/profile.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, LoginButtonComponent, LogoutButtonComponent, ProfileComponent],
  template: `
    <div class="app-container">
      <!-- Loading State -->
      @if (auth.isLoading$ | async) {
        <div class="loading-state">
          <div class="loading-text">Loading...</div>
        </div>
      }

      <!-- Error State -->
      @if (auth.error$ | async; as error) {
        <div class="error-state">
          <div class="error-title">Oops!</div>
          <div class="error-message">Something went wrong</div>
          <div class="error-sub-message">{{ error.message }}</div>
        </div>
      }

      <!-- Main Content -->
      @if (!(auth.isLoading$ | async) && !(auth.error$ | async)) {
        <div class="main-card-wrapper">
          <img 
            src="https://cdn.auth0.com/quantum-assets/dist/latest/logos/auth0/auth0-lockup-en-ondark.png" 
            alt="Auth0 Logo" 
            class="auth0-logo"
          />
          <h1 class="main-title">Welcome to Sample0</h1>
          
          <!-- Authenticated State -->
          @if (auth.isAuthenticated$ | async) {
            <div class="logged-in-section">
              <div class="logged-in-message">✅ Successfully authenticated!</div>
              <h2 class="profile-section-title">Your Profile</h2>
              <div class="profile-card">
                <app-profile />
              </div>
              <app-logout-button />
            </div>
          } @else {
            <!-- Unauthenticated State -->
            <div class="action-card">
              <p class="action-text">Get started by signing in to your account</p>
              <app-login-button />
            </div>
          }
        </div>
      }
    </div>
  `,
  styles: []
})
export class App {
  protected auth = inject(AuthService);
}
6

Run your app

ng serve
If port 4200 is in use, run: ng serve --port 4201 and update your Auth0 app’s callback URLs to http://localhost:4201
CheckpointYou should now have a fully functional Auth0 login page running on your localhost

​
Advanced Usage

If you created your project with --standalone=false or prefer using NgModules instead of standalone components, here’s how to configure the SDK with Angular 20+ CLI-generated projects:
src/main.ts
import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app-module';

platformBrowser().bootstrapModule(AppModule)
  .catch((err) => console.error(err));
src/app/app-module.ts
import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';

import { AppRoutingModule } from './app-routing-module';
import { App } from './app';

@NgModule({
  declarations: [App],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AuthModule.forRoot({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ],
  providers: [provideBrowserGlobalErrorListeners()],
  bootstrap: [App]
})
export class AppModule { }
If you’re using Angular 19, your generated files are typically app.component.ts, app.module.ts, and app-routing.module.ts, and main.ts uses platformBrowserDynamic instead of platformBrowser.Angular 20+ generates app.ts, app-module.ts, and app-routing-module.ts (no dots in filenames), and main.ts uses platformBrowser as shown above.In all cases, NgModule projects bootstrap via bootstrapModule() rather than the bootstrapApplication() approach shown in the main quickstart.
Use the modern functional guard to protect routes that require authentication:
src/app/app.routes.ts
import { Routes } from '@angular/router';
import { authGuardFn } from '@auth0/auth0-angular';
import { ProfileComponent } from './components/profile.component';

export const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [authGuardFn]
  },
  {
    path: '',
    redirectTo: '/profile',
    pathMatch: 'full'
  }
];
Then add provideAuth0 and the router to your app.config.ts (if you haven’t already from Step 4):
src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAuth0 } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    })
  ]
};
Configure the HTTP interceptor to automatically attach tokens to API calls. Add provideHttpClient with the Auth0 interceptor and an audience to your app.config.ts:
src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAuth0, authHttpInterceptorFn } from '@auth0/auth0-angular';
import { environment } from '../environments/environment';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAuth0({
      domain: environment.auth0.domain,
      clientId: environment.auth0.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin,
        audience: 'YOUR_API_IDENTIFIER'
      },
      httpInterceptor: {
        allowedList: [
          'http://localhost:3001/api/*'
        ]
      }
    }),
    provideHttpClient(
      withInterceptors([authHttpInterceptorFn])
    )
  ]
};