Passer au contenu principal

Utilisez l’IA pour intégrer Auth0

Si vous utilisez un assistant de programmation IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification Auth0 en quelques minutes à l’aide des agent skills.Installation :
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-angular
Ensuite, demandez à votre assistant IA :
Add Auth0 authentication to my Angular app
Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera @auth0/auth0-angular, créera des gardes de route et des intercepteurs HTTP, puis configurera votre environnement. Documentation complète des agent skills →
Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :
  • Node.js 20 LTS ou une version ultérieure
  • npm 10+ ou yarn 1.22+ ou pnpm 8+
  • jq - Requis pour configurer Auth0 CLI
Vérifiez l’installation : node --version && npm --versionCompatibilité des versions d’Angular : Ce guide de démarrage rapide fonctionne avec Angular 19 à 21 à l’aide d’Angular CLI. Le SDK @auth0/auth0-angular prend en charge Angular 13 et les versions ultérieures.

​
Pour commencer

Ce guide de démarrage rapide explique comment ajouter l’authentification Auth0 à une application Angular. Vous créerez une application monopage sécurisée avec des fonctions de connexion et de déconnexion à l’aide du système d’injection de dépendances d’Angular et du SDK Angular d’Auth0.
1

Créer un nouveau projet

Créez un nouveau projet Angular pour ce guide de démarrage rapide
npx @angular/cli@latest new auth0-angular --routing=true --style=css
Ouvrez le projet
cd auth0-angular
2

Installez le SDK Angular d’Auth0

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

Configurez votre application Auth0

Ensuite, créez une nouvelle application sur votre locataire Auth0 et ajoutez les variables d’environnement à votre projet.Vous avez trois options pour configurer votre application Auth0 : utiliser l’outil Quick Setup (recommandé), exécuter une commande CLI ou configurer manuellement via le Auth0 Dashboard :
Créez une application Auth0, puis copiez le fichier .env prérempli avec les valeurs de configuration appropriées.
4

Configurer le module Auth0

Une fois le fichier d’environnement de l’étape précédente en place, ajoutez provideAuth0 au tableau providers dans votre fichier 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
      }
    })
  ]
};
Si vous configurez manuellement votre application Auth0 dans l’Auth0 Dashboard, créez src/environments/environment.ts avec votre domaine et votre ID client tirés de l’Auth0 Dashboard.Les projets Angular 20+ incluent aussi provideBrowserGlobalErrorListeners() dans ce fichier — conservez-le dans le tableau avec provideAuth0. Aucune modification de main.ts n’est nécessaire.
5

Créer les composants Login, Logout et Profile

Utilisez Angular CLI pour générer les fichiers de composants :
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
Ajoutez le code suivant à chaque composant :Mettez maintenant à jour le composant App principal et ajoutez des styles :
Remplacez le contenu du composant de votre application (src/app/app.ts sur Angular 20+, ou src/app/app.component.ts sur 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">
      <!-- État de chargement -->
      @if (auth.isLoading$ | async) {
        <div class="loading-state">
          <div class="loading-text">Loading...</div>
        </div>
      }

      <!-- État d'erreur -->
      @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>
      }

      <!-- Contenu principal -->
      @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>
          
          <!-- État authentifié -->
          @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 {
            <!-- État non authentifié -->
            <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

Exécutez votre application

ng serve
Si le port 4200 est déjà utilisé, exécutez : ng serve --port 4201 et mettez à jour les URL de callback de votre application Auth0 pour http://localhost:4201
Point de contrôleVous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle qui s’exécute sur votre localhost

​
Utilisation avancée

Si vous avez créé votre projet avec --standalone=false ou si vous préférez utiliser des NgModules plutôt que des composants autonomes, voici comment configurer le SDK dans des projets générés avec Angular CLI 20+ :
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 { }
Si vous utilisez Angular 19, les fichiers générés sont généralement app.component.ts, app.module.ts et app-routing.module.ts, et main.ts utilise platformBrowserDynamic au lieu de platformBrowser.Angular 20+ génère app.ts, app-module.ts et app-routing-module.ts (sans points dans les noms de fichiers), et main.ts utilise platformBrowser, comme illustré ci-dessus.Dans tous les cas, les projets NgModule s’amorcent avec bootstrapModule() plutôt qu’avec l’approche bootstrapApplication() présentée dans le guide de démarrage rapide principal.
Utilisez le garde fonctionnel moderne pour protéger les routes qui nécessitent une authentification :
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'
  }
];
Ajoutez ensuite provideAuth0 et le routeur à votre app.config.ts (si ce n’est pas déjà fait à l’étape 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
      }
    })
  ]
};
Configurez l’intercepteur HTTP pour ajouter automatiquement des jetons aux appels d’API. Ajoutez provideHttpClient avec l’intercepteur Auth0 et une audience à votre 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])
    )
  ]
};