Intégration Auth0 Angular

Ajoutez l'authentification aux applications Angular en utilisant @auth0/auth0-angular.

Prérequis

• Application Angular 13+
• Compte Auth0 et application configurée
• Si vous n'avez pas encore configuré Auth0, utilisez d'abord la skill auth0-quickstart

Quand NE PAS l'utiliser

• AngularJS (1.x) - Ce SDK nécessite Angular 13+, utilisez des solutions legacy pour AngularJS
• Applications mobiles - Utilisez auth0-react-native pour React Native ou les SDK natifs pour Ionic
• APIs backend - Utilisez un middleware de validation JWT pour votre langage serveur

Workflow de démarrage rapide

1. Installer le SDK

npm install @auth0/auth0-angular

2. Configurer l'environnement

Pour une configuration automatisée avec Auth0 CLI, voir Setup Guide pour les scripts complets.

Pour une configuration manuelle :

Mettez à jour src/environments/environment.ts :

export const environment = {
  production: false,
  auth0: {
    domain: 'your-tenant.auth0.com',
    clientId: 'your-client-id',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  }
};

3. Configurer le module Auth

Pour les composants standalone (Angular 14+) :

Mettez à jour src/app/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: environment.auth0.authorizationParams
    })
  ]
};

Pour les applications basées sur NgModule :

Mettez à jour src/app/app.module.ts :

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. Ajouter l'interface d'authentification

Mettez à jour src/app/app.component.ts :

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="auth.isLoading$ | async; else loaded">
      <p>Loading...</p>
    </div>

    <ng-template #loaded>
      <ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
        <div *ngIf="auth.user$ | async as user">
          <img [src]="user.picture" [alt]="user.name" />
          <h2>Welcome, {{ user.name }}!</h2>
          <button (click)="logout()">Logout</button>
        </div>
      </ng-container>

      <ng-template #loggedOut">
        <button (click)="login()">Login</button>
      </ng-template>
    </ng-template>
  `
})
export class AppComponent {
  constructor(public auth: AuthService) {}

  login(): void {
    this.auth.loginWithRedirect();
  }

  logout(): void {
    this.auth.logout({ logoutParams: { returnTo: window.location.origin } });
  }
}

5. Tester l'authentification

Lancez votre serveur de développement et testez le flux de connexion :

ng serve

Documentation détaillée

• Setup Guide - Scripts de configuration automatisée (Bash/PowerShell), commandes CLI, configuration manuelle
• Integration Guide - Routes protégées avec guards, intercepteurs HTTP, gestion des erreurs
• API Reference - API SDK complète, options de configuration, référence des services, stratégies de test

Erreurs courantes

Skills connexes

• auth0-quickstart - Configuration basique d'Auth0
• auth0-migration - Migrer depuis un autre fournisseur d'authentification
• auth0-mfa - Ajouter l'authentification multi-facteurs

Référence rapide

Services principaux :

• AuthService - Service d'authentification principal
• isAuthenticated$ - Observable pour vérifier si l'utilisateur est connecté
• user$ - Observable avec les informations de profil utilisateur
• loginWithRedirect() - Initier la connexion
• logout() - Déconnecter l'utilisateur
• getAccessTokenSilently() - Obtenir le token d'accès manuellement (alternative à l'intercepteur HTTP)

Cas d'usage courants :

• Boutons de connexion/déconnexion → Voir l'étape 4 ci-dessus
• Routes protégées avec guards → Integration Guide
• Appeler une API protégée → Integration Guide
• Gestion des erreurs → Integration Guide

Références

• Auth0 Angular SDK Documentation
• Auth0 Angular Quickstart
• SDK GitHub Repository