Ajouter la connexion à votre application Angular

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les renseignements du profil utilisateur dans toute application Angular à l’aide du SDK Auth0 Angular.

Utiliser l’IA pour intégrer Auth0

Si vous utilisez un assistant IA de programmation comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification Auth0 en quelques minutes à l’aide d’Agent Skills.

Installer :

npx skills add auth0/agent-skills --skill auth0

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 sur Agent Skills →

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

• Node.js 20 LTS ou une version plus récente
• npm 10+ ou yarn 1.22+ ou pnpm 8+
• jq - Requis pour configurer Auth0 CLI

Vérifiez l’installation : node --version && npm --version

Compatibilité des versions d’Angular : Ce Quickstart fonctionne avec Angular 19 à 21 à l’aide d’Angular CLI. Le SDK @auth0/auth0-angular prend en charge Angular 13 et les versions plus récentes.

​

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 fonctionnalités de connexion et de déconnexion à l’aide du système d’injection de dépendances d’Angular et du SDK Auth0 Angular.

1. Créer un nouveau projet

   Créez un nouveau projet Angular pour ce Quickstart

   npx @angular/cli@latest new auth0-angular --routing=true --style=css
   

   Ouvrir le projet

   cd auth0-angular
   
2. Installer le SDK Auth0 Angular

   npm install @auth0/auth0-angular && npm install
   
3. Configurez votre Auth0 App

   Ensuite, vous devez créer une nouvelle application sur votre tenant Auth0 et ajouter 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 Dashboard :

   Configuration rapide (recommandée)

   Créez une Auth0 App, puis copiez le fichier .env prérempli avec les valeurs de configuration appropriées.

   CLI

   Exécutez la commande shell suivante dans le répertoire racine de votre projet pour créer une application Auth0 et générer un fichier d’environnement :

   Mac

   # Installer Auth0 CLI (s’il n’est pas déjà installé)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configurer l’application Auth0 et générer le fichier d’environnement
   auth0 qs setup --app --type spa --framework angular --name "My Angular App" --port 4200
   

   Cette commande va :

   1. Vérifier si vous êtes authentifié (et vous inviter à vous connecter au besoin)
   2. Créer une application Auth0 Single Page Application configurée pour http://localhost:4200
   3. Générer src/environments/environment.ts avec votre domaine Auth0 et votre ID client

   Dashboard

   Avant de commencer, créez un fichier d’environnement dans votre projet

   src/environments/environment.ts

   export const environment = {
     production: false,
     auth0: {
       domain: 'YOUR_AUTH0_APP_DOMAIN',
       clientId: 'YOUR_AUTH0_APP_CLIENT_ID'
     }
   };
   

   1. Accédez au Auth0 Dashboard
   2. Cliquez sur Applications > Applications > Create Application
   3. Dans la fenêtre contextuelle, saisissez un nom pour votre application, sélectionnez Single Page Web Application comme type d’application, puis cliquez sur Create
   4. Allez à l’onglet Settings de la page Application Details
   5. Remplacez YOUR_AUTH0_APP_DOMAIN et YOUR_AUTH0_APP_CLIENT_ID dans le fichier src/environments/environment.ts par les valeurs Domain et Client ID du Dashboard

   Enfin, dans l’onglet Settings de la page Application Details, configurez les URL suivantes :

   Allowed Callback URLs:

   http://localhost:4200
   

   URL de déconnexion autorisées :

   http://localhost:4200
   

   Origines Web autorisées :

   http://localhost:4200
   

   Les Allowed Callback URLs constituent une mesure de sécurité essentielle pour garantir que les utilisateurs sont redirigés de façon sécuritaire vers votre application après l’authentification. Sans URL correspondante, le processus de connexion échouera et les utilisateurs verront une page d’erreur Auth0 au lieu d’accéder à votre application.

   Les Allowed Logout URLs sont essentielles pour offrir une expérience utilisateur fluide au moment de la déconnexion. Sans URL correspondante, les utilisateurs ne seront pas redirigés vers votre application après la déconnexion et resteront plutôt sur une page Auth0 générique.

   Allowed Web Origins est essentiel pour l’authentification silencieuse. Sans cela, les utilisateurs seront déconnectés lorsqu’ils actualisent la page ou reviennent plus tard dans votre application.

4. Configurer le module Auth0

   Une fois le fichier d’environnement de l’étape précédente en place, ajoutez provideAuth0 au tableau providers de votre 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 le dashboard, créez src/environments/environment.ts avec votre domaine et votre ID client du dashboard.

   Les projets Angular 20+ incluent aussi provideBrowserGlobalErrorListeners() dans ce fichier — laissez-le dans le tableau aux côtés de provideAuth0. Aucune modification à main.ts n’est nécessaire.

5. Créer les composants Login, Logout et Profil

   Utilisez l’Angular CLI pour générer les fichiers du composant :

   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 :

   Now update the main App Component and add mise en forme:

   Composant de l’application

   Remplacez le contenu du fichier 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);
   }
   

   Styles globaux

   Ajoutez des styles à src/styles.css :

   src/styles.css

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
   
   body {
     margin: 0;
     font-family: 'Inter', sans-serif;
     background-color: #1a1e27;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #e2e8f0;
     overflow: hidden;
   }
   
   #root {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .app-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     width: 100%;
     padding: 1rem;
     box-sizing: border-box;
   }
   
   .loading-state, .error-state {
     background-color: #2d313c;
     border-radius: 15px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
     padding: 3rem;
     text-align: center;
   }
   
   .loading-text {
     font-size: 1.8rem;
     font-weight: 500;
     color: #a0aec0;
     animation: pulse 1.5s infinite ease-in-out;
   }
   
   .error-state {
     background-color: #c53030;
     color: #fff;
   }
   
   .error-title {
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
   }
   
   .error-message {
     font-size: 1.3rem;
     margin-bottom: 0.5rem;
   }
   
   .error-sub-message {
     font-size: 1rem;
     opacity: 0.8;
   }
   
   .main-card-wrapper {
     background-color: #262a33;
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
     padding: 3rem;
     max-width: 500px;
     width: 90%;
     animation: fadeInScale 0.8s ease-out forwards;
   }
   
   .auth0-logo {
     width: 160px;
     margin-bottom: 1.5rem;
     opacity: 0;
     animation: slideInDown 1s ease-out forwards 0.2s;
   }
   
   .main-title {
     font-size: 2.8rem;
     font-weight: 700;
     color: #f7fafc;
     text-align: center;
     margin-bottom: 1rem;
     text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     opacity: 0;
     animation: fadeIn 1s ease-out forwards 0.4s;
   }
   
   .action-card {
     background-color: #2d313c;
     border-radius: 15px;
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3);
     padding: 2.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.8rem;
     width: calc(100% - 2rem);
     opacity: 0;
     animation: fadeIn 1s ease-out forwards 0.6s;
   }
   
   .action-text {
     font-size: 1.25rem;
     color: #cbd5e0;
     text-align: center;
     line-height: 1.6;
     font-weight: 400;
   }
   
   .button {
     padding: 1.1rem 2.8rem;
     font-size: 1.2rem;
     font-weight: 600;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     outline: none;
   }
   
   .button:focus {
     box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
   }
   
   .button.login {
     background-color: #63b3ed;
     color: #1a1e27;
   }
   
   .button.login:hover {
     background-color: #4299e1;
     transform: translateY(-5px) scale(1.03);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
   }
   
   .button.logout {
     background-color: #fc8181;
     color: #1a1e27;
   }
   
   .button.logout:hover {
     background-color: #e53e3e;
     transform: translateY(-5px) scale(1.03);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
   }
   
   .logged-in-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
     width: 100%;
   }
   
   .logged-in-message {
     font-size: 1.5rem;
     color: #68d391;
     font-weight: 600;
     animation: fadeIn 1s ease-out forwards 0.8s;
   }
   
   .profile-section-title {
     font-size: 2.2rem;
     animation: slideInUp 1s ease-out forwards 1s;
   }
   
   .profile-card {
     padding: 2.2rem;
     animation: scaleIn 0.8s ease-out forwards 1.2s;
   }
   
   .profile-picture {
     width: 110px;
     transition: transform 0.3s ease-in-out;
   }
   
   .profile-picture:hover {
     transform: scale(1.05);
   }
   
   .profile-name {
     font-size: 2rem;
     margin-top: 0.5rem;
   }
   
   .profile-email {
     font-size: 1.15rem;
     text-align: center;
   }
   
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   
   @keyframes fadeInScale {
     from { opacity: 0; transform: scale(0.95); }
     to { opacity: 1; transform: scale(1); }
   }
   
   @keyframes slideInDown {
     from { opacity: 0; transform: translateY(-70px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes slideInUp {
     from { opacity: 0; transform: translateY(50px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes pulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.6; }
   }
   
   @keyframes scaleIn {
     from { opacity: 0; transform: scale(0.8); }
     to { opacity: 1; transform: scale(1); }
   }
   
   @media (max-width: 600px) {
     .main-card-wrapper {
       padding: 2rem;
       margin: 1rem;
     }
     
     .main-title {
       font-size: 2.2rem;
     }
     
     .button {
       padding: 1rem 2rem;
       font-size: 1.1rem;
     }
     
     .auth0-logo {
       width: 120px;
     }
   }
   
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 rappel de votre application Auth0 pour http://localhost:4201

Vérification

Vous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle sur votre localhost

---

​

Utilisation avancée

Utilisation de l’approche NgModule traditionnelle

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 les projets générés par la CLI d’Angular 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 démarrent avec bootstrapModule() plutôt qu’avec l’approche bootstrapApplication() montrée dans le Quickstart principal.

Protéger les routes avec AuthGuard

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
      }
    })
  ]
};

Appeler des API protégées

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])
    )
  ]
};