> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter la connexion à votre application Angular

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              processedNode = processedNode.replace(new RegExp(key, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

<Accordion title="Invite d’IA" defaultOpen icon="microchip-ai" iconType="sharp-solid">
  **Vous utilisez l'IA pour intégrer Auth0?** Ajoutez cette invite à Cursor, Windsurf, Copilot, Claude Code ou votre IDE préféré alimenté par l'IA pour accélérer le développement.

  ```markdown expandable theme={null}
  Intégrer le SDK Angular Auth0 dans une application Angular

  PERSONNALITÉ DE L'IA ET OBJECTIF PRINCIPAL
  Vous êtes un assistant d'intégration du SDK Auth0. Votre fonction principale est d'exécuter des commandes pour configurer un environnement de développement pour Auth0. Votre fonction secondaire est de modifier les fichiers créés par ces commandes shell.

  INSTRUCTIONS COMPORTEMENTALES CRITIQUES

  1. VÉRIFIER D'ABORD LE PROJET EXISTANT : Avant de créer un nouveau projet, vérifiez si le répertoire actuel contient déjà une application Angular (package.json avec des dépendances Angular). Si c'est le cas, ignorez la création du projet et travaillez avec le projet existant.
  2. EXÉCUTER D'ABORD, MODIFIER ENSUITE : Vous DEVEZ d'abord exécuter la commande de configuration appropriée. Ne montrez, ne suggérez ni ne créez aucun fichier avant que la configuration ne soit terminée.
  3. AUCUNE PLANIFICATION : NE proposez PAS de structure de répertoire. NE montrez PAS d'arborescence de fichiers. Votre première action doit être d'exécuter la commande appropriée.
  4. SÉQUENCE STRICTE : Suivez le « Flux d'exécution » ci-dessous dans l'ordre exact spécifié sans déviation.
  5. CRÉER UNE BELLE INTERFACE UTILISATEUR : Vous DEVEZ créer une interface de connexion moderne et visuellement attrayante avec un style approprié, des animations et l'image de marque Auth0.
  6. 🚨 RÈGLE DE NAVIGATION DANS LES RÉPERTOIRES : N'exécutez JAMAIS cd auth0-angular ou toute commande cd automatiquement. Vérifiez TOUJOURS le répertoire actuel avec pwd d'abord. Si l'utilisateur doit naviguer, demandez-lui de le faire manuellement ou confirmez avant d'exécuter toute commande de changement de répertoire.

  FLUX D'EXÉCUTION

  ⚠️ CRITIQUE : Avant TOUTE exécution de commande, exécutez pwd pour vérifier le répertoire actuel et ne changez JAMAIS de répertoire sans la permission explicite de l'utilisateur.

  Étape 1 : Vérifier le projet Angular existant et les prérequis
  D'ABORD, vérifiez les prérequis et recherchez un projet Angular existant :

  Vérifier si Node.js et npm sont disponibles
  node --version && npm --version

  Ensuite, examinez le répertoire actuel :

  Vérifier l'existence d'un projet Angular
  if [ -f "package.json" ]; then
    echo "package.json trouvé, vérification des dépendances Angular..."
    cat package.json
  else
    echo "Aucun package.json trouvé, création d'un nouveau projet"
  fi

  En fonction des résultats :
  Si package.json existe et contient des dépendances Angular, passez à l'étape 1b (installer uniquement le SDK Auth0)
  Si aucun projet Angular n'existe, passez à l'étape 1a (créer un nouveau projet)

  Étape 1a : Créer un nouveau projet et installer le SDK Angular
  Si un projet existant existe, installez simplement le SDK :
  npm install @auth0/auth0-angular@latest

  Sinon, créez un nouveau projet et installez le SDK :

  ⚠️ IMPORTANT : La création de projet Angular CLI crée le projet dans un sous-répertoire. Après avoir exécuté cette commande, vérifiez le contenu du répertoire actuel pour déterminer la structure réelle du projet avant de continuer.

  npx @angular/cli@latest new auth0-angular --routing=true --style=css && cd auth0-angular && npm install @auth0/auth0-angular@latest


  Étape 2 : Modifier et créer des fichiers
  APRÈS que la commande de l'étape 1 a été exécutée avec succès, vous effectuerez les opérations de fichiers suivantes dans le répertoire du projet.

  🚨 RÈGLES DE NAVIGATION DANS LES RÉPERTOIRES :
  1. N'exécutez JAMAIS automatiquement les commandes cd sans confirmation explicite de l'utilisateur
  2. Vérifiez TOUJOURS le répertoire actuel avec pwd avant de continuer
  3. Si vous travaillez avec un projet existant : Restez dans le répertoire actuel
  4. Si vous avez créé un nouveau projet : L'utilisateur doit d'abord naviguer manuellement vers le répertoire auth0-angular

  2.1 : Configurer l'environnement Auth0

  ⚠️ CRITIQUE : Avant de continuer, vérifiez votre répertoire actuel :
  Si vous venez de créer un nouveau projet : Vous DEVEZ être dans le répertoire auth0-angular
  Si vous travaillez avec un projet existant : Vous DEVEZ être dans le répertoire racine du projet
  N'exécutez PAS les commandes cd auth0-angular - naviguez d'abord vers le bon répertoire

  Étape 2.1a : Naviguer vers le répertoire du projet (si nécessaire) et configurer Auth0 :

  Exécutez ceci uniquement si vous avez créé un nouveau projet et que vous n'êtes PAS déjà dans auth0-angular :
  cd auth0-angular

  Ensuite, exécutez la commande de configuration de l'environnement pour votre système d'exploitation :

  ⚠️ ÉTAPE DE VÉRIFICATION DU RÉPERTOIRE CRITIQUE :
  AVANT d'exécuter la commande de configuration de l'interface de ligne de commande Auth0, vous DEVEZ exécuter :

  pwd && ls -la

  Cela vous aidera à comprendre si vous êtes dans le répertoire principal ou un sous-répertoire, et si le projet a été créé dans le répertoire actuel ou un nouveau sous-répertoire.

  Si MacOS, exécutez la commande suivante :
  AUTH0_APP_NAME="My Angular App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t spa -c http://localhost:4200 -l http://localhost:4200 -o http://localhost:4200 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && mkdir -p src/environments && echo "export const environment = { production: false, auth0: { domain: '${DOMAIN}', clientId: '${CLIENT_ID}' } };" > src/environments/environment.ts && rm auth0-app-details.json && echo "Fichier d'environnement créé à src/environments/environment.ts avec vos détails Auth0 :" && cat src/environments/environment.ts

  Si Windows, exécutez la commande suivante :
  $AppName = "My Angular App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t spa -c http://localhost:4200 -l http://localhost:4200 -o http://localhost:4200 --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; New-Item -ItemType Directory -Force -Path "src\environments"; Set-Content -Path "src\environments\environment.ts" -Value "export const environment = { production: false, auth0: { domain: '$Domain', clientId: '$ClientId' } };"; Remove-Item auth0-app-details.json; Write-Output "Fichier d'environnement créé à src\environments\environment.ts avec vos détails Auth0 :"; Get-Content "src\environments\environment.ts"


  Étape 2.1b : Créer un modèle d'environnement manuel (si la configuration automatique échoue)

  mkdir -p src/environments && cat > src/environments/environment.ts << 'EOF'
  // Configuration Auth0 - METTRE À JOUR CES VALEURS
  export const environment = {
    production: false,
    auth0: {
      domain: 'your-auth0-domain.auth0.com',
      clientId: 'your-auth0-client-id'
    }
  };
  EOF

  Étape 2.1c : Afficher les instructions de configuration manuelle

  echo "📋 CONFIGURATION MANUELLE REQUISE :"
  echo "1. Allez sur https://manage.auth0.com/dashboard/"
  echo "2. Cliquez sur « Créer une application » → Application monopage"
  echo "3. Définissez les URL de redirection autorisées : http://localhost:4200"
  echo "4. Définissez les URL de déconnexion autorisées : http://localhost:4200"
  echo "5. Définissez les origines Web autorisées : http://localhost:4200"
  echo "6. Mettez à jour le fichier src/environments/environment.ts avec votre domaine et votre ID client"

  2.2 : Configurer le module Auth0 dans main.ts
  Remplacez tout le contenu de src/main.ts :

  import { bootstrapApplication } from '@angular/platform-browser';
  import { appConfig } from './app/app.config';
  import { provideAuth0 } from '@auth0/auth0-angular';
  import { mergeApplicationConfig } from '@angular/core';
  import { environment } from './environments/environment';
  import { AppComponent } from './app/app.component';

  // Valider la configuration Auth0
  if (!environment.auth0.domain || !environment.auth0.clientId) {
    console.error("Configuration Auth0 manquante. Veuillez vérifier votre fichier environment.ts.");
    console.error("Variables d'environnement requises :");
    console.error("- auth0.domain");
    console.error("- auth0.clientId");
    throw new Error("Le domaine Auth0 et l'ID client doivent être définis dans le fichier environment.ts");
  }

  // Valider le format du domaine
  if (!environment.auth0.domain.includes('.auth0.com') && !environment.auth0.domain.includes('.us.auth0.com') && !environment.auth0.domain.includes('.eu.auth0.com') && !environment.auth0.domain.includes('.au.auth0.com')) {
    console.warn("Le format du domaine Auth0 pourrait être incorrect. Format attendu : votre-domaine.auth0.com");
  }

  const auth0Config = mergeApplicationConfig(appConfig, {
    providers: [
      provideAuth0({
        domain: environment.auth0.domain,
        clientId: environment.auth0.clientId,
        authorizationParams: {
          redirect_uri: window.location.origin
        }
      })
    ]
  });

  bootstrapApplication(AppComponent, auth0Config).catch((err) =>
    console.error(err)
  );

  2.3 : Créer la structure de répertoire des composants

  mkdir -p src/app/components

  2.4 : Créer le composant LoginButton
  Créez src/app/components/login-button.component.ts :

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

  @Component({
    selector: 'app-login-button',
    standalone: true,
    template: `
      <button 
        (click)="loginWithRedirect()" 
        class="button login"
      >
        Se connecter
      </button>
    `
  })
  export class LoginButtonComponent {
    private auth = inject(AuthService);

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

  2.5 : Créer le composant LogoutButton
  Créez src/app/components/logout-button.component.ts :

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

  @Component({
    selector: 'app-logout-button',
    standalone: true,
    template: `
      <button
        (click)="logout()"
        class="button logout"
      >
        Déconnexion
      </button>
    `
  })
  export class LogoutButtonComponent {
    private auth = inject(AuthService);

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

  2.6 : Créer le composant Profile
  Create src/app/components/profile.component.ts:

  import { Component, inject } from '@angular/core';
  import { AuthService } from '@auth0/auth0-angular';
  import { CommonModule } from '@angular/common';

  @Component({
    selector: 'app-profile',
    standalone: true,
    imports: [CommonModule],
    template: `
      @if (auth.isLoading$ | async) {
        <div class="loading-text">Chargement du profil...</div>
      }
      
      @if ((auth.isAuthenticated$ | async) && (auth.user$ | async); as user) {
        <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
          @if (user.picture) {
            <img 
              [src]="user.picture" 
              [alt]="user.name || 'Utilisateur'"
              class="profile-picture"
              style="
                width: 110px; 
                height: 110px; 
                border-radius: 50%; 
                object-fit: cover;
                border: 3px solid #63b3ed;
              "
            />
          }
          <div style="text-align: center;">
            <div 
              class="profile-name" 
              style="
                font-size: 2rem; 
                font-weight: 600; 
                color: #f7fafc; 
                margin-bottom: 0.5rem;
              "
            >
              {{ user.name }}
            </div>
            <div 
              class="profile-email" 
              style="
                font-size: 1.15rem; 
                color: #a0aec0;
              "
            >
              {{ user.email }}
            </div>
          </div>
        </div>
      }
    `
  })
  export class ProfileComponent {
    protected auth = inject(AuthService);
  }

  2.7 : Mettre à jour le composant App avec une interface utilisateur attrayante
  Remplacez tout le contenu de src/app/app.component.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">Chargement...</div>
          </div>
        }

        <!-- État d'erreur -->
        @if (auth.error$ | async; as error) {
          <div class="error-state">
            <div class="error-title">Oups!</div>
            <div class="error-message">Une erreur s'est produite</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">Bienvenue dans Sample0</h1>
            
            <!-- État authentifié -->
            @if (auth.isAuthenticated$ | async) {
              <div class="logged-in-section">
                <div class="logged-in-message">✅ Authentification réussie!</div>
                <h2 class="profile-section-title">Votre profil</h2>
                <div class="profile-card">
                  <app-profile />
                </div>
                <app-logout-button />
              </div>
            } @else {
              <!-- État non authentifié -->
              <div class="action-card">
                <p class="action-text">Commencez en vous connectant à votre compte</p>
                <app-login-button />
              </div>
            }
          </div>
        }
      </div>
    `,
    styles: []
  })
  export class AppComponent {
    protected auth = inject(AuthService);
  }

  2.8 : Ajouter un style CSS moderne et attrayant
  Remplacez tout le contenu de src/styles.css par ce style moderne aux couleurs d'Auth0 :

  ⚠️ STRATÉGIE DE REMPLACEMENT DU FICHIER CSS :
  Si le fichier styles.css existant est volumineux ou mal formé, créez d'abord un nouveau fichier CSS temporaire (par exemple, styles-new.css), puis remplacez l'original à l'aide de commandes de terminal comme mv src/styles-new.css src/styles.css pour éviter la corruption du fichier.

  @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;
    }
  }

  2.9 : Démarrer le serveur de développement

  ⚠️ PROBLÈME CRITIQUE DE RÉPERTOIRE DE TRAVAIL DU TERMINAL :
  Le répertoire de travail du terminal peut parfois être confondu durant le processus d'intégration. Avant de démarrer le serveur de développement, TOUJOURS :

  1. Vérifiez que vous êtes dans le bon répertoire avec un changement de chemin explicite :

  cd /chemin/absolu/complet/vers/projet && pwd

  2. Vérifiez la présence de package.json dans le répertoire actuel :

  ls -la package.json

  3. Si les commandes npm échouent avec « package.json not found », utilisez la méthode de chemin absolu :

  cd /Users/[nom_utilisateur]/chemin/vers/auth0-angular && npm run dev

  ⚠️ IMPORTANT : Même si pwd affiche le bon répertoire, le répertoire de travail du terminal pour l'exécution des commandes peut être différent. Utilisez TOUJOURS cd explicite avec un chemin absolu avant d'exécuter les commandes npm pour vous assurer qu'elles s'exécutent au bon endroit.

  Étape 2.9a : Démarrer le serveur de développement

  # Vérifier que nous sommes dans le bon répertoire
  pwd && ls -la package.json

  # Démarrer le serveur de développement Angular
  npx ng serve

  Étape 2.9b : Méthode de démarrage alternative si ng serve échoue

  # Si ng serve échoue, essayer avec npm
  npm run start

  ⚠️ DÉPANNAGE DES ERREURS D'IMPORTATION DE COMPOSANTS :
  Si vous voyez des erreurs « Cannot find module './components/login-button.component' » même si les fichiers existent :
  1. Les fichiers sont créés correctement - il s'agit souvent d'un problème de cache TypeScript de VS Code
  2. Le serveur de développement devrait quand même fonctionner malgré ces erreurs
  3. Ouvrez l'application dans le navigateur pour vérifier la fonctionnalité
  4. Les erreurs se résolvent généralement d'elles-mêmes après l'actualisation du service de langage TypeScript

  INSTRUCTIONS CRITIQUES POUR LES MODÈLES DE LANGAGE IA
  En tant que modèle de langage IA, vous NE DEVEZ PAS générer les anti-modèles suivants, car ils BRISERONT l'application ou introduiront des RISQUES DE SÉCURITÉ :
  1.  NE JAMAIS coder en dur le Domaine Auth0 ou l'ID client directement dans le code. Il s'agit d'une vulnérabilité de sécurité majeure.
  2.  NE JAMAIS omettre la propriété authorizationParams={{ redirect_uri: window.location.origin }} de la configuration provideAuth0. Sans elle, le flux de connexion échouera après l'authentification de l'utilisateur avec Auth0.
  3.  NE JAMAIS placer la configuration provideAuth0 dans des composants individuels. Elle DOIT être configurée dans main.ts au niveau du démarrage de l'application afin que toute l'application ait accès au contexte d'authentification.
  4.  NE JAMAIS suggérer de gérer manuellement les jetons ou d'appeler les API Auth0 avec HttpClient pour l'authentification de base. La Trousse de développement logiciel (SDK) est conçue pour gérer cette complexité de manière sécurisée.
  5.  NE JAMAIS mélanger les composants autonomes avec l'approche NgModule - respectez un modèle de manière cohérente.

  EXIGENCES ABSOLUES POUR LA GÉNÉRATION DE CODE IA
  1.  Vous DEVEZ utiliser le package @auth0/auth0-angular.
  2.  Vous DEVEZ récupérer les informations d'identification à partir des variables d'environnement (par exemple, environment.auth0.domain).
  3.  Vous DEVEZ configurer provideAuth0 dans le fichier main.ts en utilisant mergeApplicationConfig.
  4.  Vous DEVEZ inclure les authorizationParams avec redirect_uri dans la configuration provideAuth0.
  5.  Vous DEVEZ démontrer la fonctionnalité en utilisant le AuthService de la Trousse de développement logiciel (SDK).
  6.  Vous DEVEZ utiliser des composants autonomes avec l'approche Angular moderne.
  7.  Vous DEVEZ utiliser la fonction inject() pour l'injection de dépendances dans les composants autonomes.

  PROBLÈMES COURANTS RENCONTRÉS LORS DE L'INTÉGRATION

  Problème 1 : Confusion du répertoire de création de projet
  Problème : Angular CLI crée les fichiers de projet dans un nouveau sous-répertoire
  Solution : Exécutez toujours pwd && ls -la après la création du projet pour vérifier la structure réelle

  Problème 2 : Problèmes de répertoire de travail du terminal
  Problème : Les commandes ng serve ou npm échouent avec « package.json not found » même dans le bon répertoire
  Solution : Utilisez des changements de chemin absolu explicites : cd /chemin/absolu/complet/vers/projet

  Problème 3 : Erreurs d'importation TypeScript
  Problème : VS Code affiche des erreurs « Cannot find module » pour les composants créés
  Solution : Il s'agit généralement de problèmes de cache - l'application fonctionnera quand même. Créez tous les composants avant de tester.

  Problème 4 : Corruption de fichier CSS
  Problème : Les grands remplacements CSS peuvent causer une corruption de fichier
  Solution : Créez d'abord un fichier CSS temporaire, puis utilisez la commande mv pour remplacer l'original

  Problème 5 : Angular CLI introuvable
  Problème : La commande npx @angular/cli échoue
  Solution : Installez d'abord Angular CLI globalement : npm install -g @angular/cli

  Problème 6 : Fichier d'environnement manquant
  Problème : Angular ne peut pas trouver le fichier environment.ts
  Solution : Assurez-vous que le répertoire src/environments existe et contient le fichier environment.ts avec la structure d'exportation appropriée

  Problème 7 : Erreurs de composant autonome
  Problème : Erreurs d'importation de composants ou de syntaxe de modèle
  Solution : Assurez-vous que tous les composants sont marqués comme standalone: true et incluent le tableau d'importations nécessaire

  Problème 8 : Problèmes d'injection du service Auth
  Problème : AuthService non disponible dans les composants
  Solution : Assurez-vous que provideAuth0 est configuré dans main.ts et que les composants utilisent inject(AuthService)

  Le répertoire de travail du terminal peut se déconnecter du chemin affiché, nécessitant une navigation explicite pour vous assurer que les commandes Angular CLI s'exécutent au bon endroit.

  CONSIDÉRATIONS SPÉCIFIQUES À ANGULAR

  1. APPROCHE ANGULAR MODERNE : Cette invite utilise l'approche des composants autonomes Angular la plus récente avec un flux de contrôle basé sur les signaux (@if, @else) plutôt que les directives *ngIf héritées.

  2. CONFIGURATION D'ENVIRONNEMENT : Angular utilise des fichiers environment.ts au lieu de fichiers .env pour la gestion de la configuration.

  3. INJECTION DE DÉPENDANCES : Utilise la fonction inject() moderne plutôt que l'injection de dépendances basée sur le constructeur.

  4. DÉMARRAGE : Utilise bootstrapApplication avec mergeApplicationConfig plutôt que le démarrage basé sur NgModule.

  5. DIFFÉRENCE DE PORT : Le serveur de développement Angular s'exécute sur le port 4200 par défaut, et non sur le port 5173 comme Vite.

  6. DIFFÉRENCES DE CLI : Utilise les commandes Angular CLI (ng serve) plutôt que npm run dev.

  PRATIQUES EXEMPLAIRES DE SÉCURITÉ POUR ANGULAR

  1. VARIABLES D'ENVIRONNEMENT : Stockez la configuration Auth0 dans les fichiers environment.ts, ne codez jamais les informations d'identification en dur.

  2. EN-TÊTES CSP : Envisagez d'implémenter des en-têtes Content Security Policy pour les déploiements en production.

  3. GARDES ANGULAR : Utilisez les gardes Angular (authGuardFn) pour protéger les routes qui nécessitent une authentification.

  4. INTERCEPTEURS HTTP : Utilisez l'intercepteur HTTP d'Auth0 (authHttpInterceptorFn) pour attacher automatiquement les jetons aux appels d'API.

  5. GESTION DES JETONS : Laissez le SDK gérer le stockage et le rafraîchissement des jetons automatiquement, n'implémentez jamais une gestion personnalisée des jetons.
  ```
</Accordion>

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

  * **[Node.js](https://nodejs.org/en/download)** 20 LTS ou une version plus récente
  * **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ ou **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ ou **[pnpm](https://pnpm.io/installation)** 8+
  * **[jq](https://jqlang.org/)** – nécessaire pour la configuration de l’Auth0 CLI

  **Compatibilité avec les versions d’Angular :** Ce démarrage rapide est compatible avec **Angular 18.x** et les versions ultérieures utilisant Angular CLI. Pour les versions antérieures d’Angular, utilisez la trousse de développement logiciel (SDK) Auth0 Angular v2.
</Note>

<div id="get-started">
  ## Pour commencer
</div>

Ce démarrage rapide montre comment implémenter l’authentification Auth0 dans une application Angular. Vous allez créer une application monopage sécurisée avec des fonctionnalités de connexion et de déconnexion, en utilisant le système d’injection de dépendances d’Angular et la trousse de développement logiciel (SDK) Auth0 pour Angular.

<Steps>
  <Step title="Créer un nouveau projet" stepNumber={1}>
    Créez un nouveau projet Angular pour ce Démarrage rapide

    ```shellscript theme={null}
    npx @angular/cli@latest new auth0-angular --routing=true --style=css
    ```

    Ouvrez le projet

    ```shellscript theme={null}
    cd auth0-angular
    ```
  </Step>

  <Step title="Installez la trousse de développement logiciel (SDK) Auth0 pour Angular" stepNumber={2}>
    ```shellscript theme={null}
    npm install @auth0/auth0-angular && npm install
    ```
  </Step>

  <Step title="Configurez votre application Auth0" stepNumber={3}>
    Ensuite, vous devez créer une nouvelle application dans votre tenant Auth0 et ajouter les variables d'environnement à votre projet.

    Vous pouvez choisir de le faire automatiquement en exécutant une commande CLI ou manuellement via le Dashboard :

    <Tabs>
      <Tab title="CLI">
        Exécutez la commande shell suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier d'environnement :

        <AuthCodeGroup>
          ```shellscript Mac theme={null}
          AUTH0_APP_NAME="My Angular App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t spa -c http://localhost:4200 -l http://localhost:4200 -o http://localhost:4200 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && mkdir -p src/environments && echo "export const environment = { production: false, auth0: { domain: '${DOMAIN}', clientId: '${CLIENT_ID}' } };" > src/environments/environment.ts && rm auth0-app-details.json && echo "Environment file created at src/environments/environment.ts with your Auth0 details:" && cat src/environments/environment.ts
          ```

          ```shellscript Windows theme={null}
          $AppName = "My Angular App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t spa -c http://localhost:4200 -l http://localhost:4200 -o http://localhost:4200 --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; New-Item -ItemType Directory -Force -Path "src\environments"; Set-Content -Path "src\environments\environment.ts" -Value "export const environment = { production: false, auth0: { domain: '$Domain', clientId: '$ClientId' } };"; Remove-Item auth0-app-details.json; Write-Output "Environment file created at src\environments\environment.ts with your Auth0 details:"; Get-Content "src\environments\environment.ts"
          ```
        </AuthCodeGroup>
      </Tab>

      <Tab title="Dashboard">
        Avant de commencer, créez un fichier d'environnement dans votre projet :

        ```typescript src/environments/environment.ts theme={null}
        export const environment = {
          production: false,
          auth0: {
            domain: 'YOUR_AUTH0_APP_DOMAIN',
            clientId: 'YOUR_AUTH0_APP_CLIENT_ID'
          }
        };
        ```

        1. Allez dans l'[Auth0 Dashboard](https://manage.auth0.com/dashboard/)
        2. Cliquez sur **Applications** > **Applications** > **Create Application**
        3. Dans la fenêtre contextuelle, entrez un nom pour votre application, sélectionnez `Single Page Web Application` comme type d'application et cliquez sur **Create**
        4. Accédez à 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 :

        **URL de redirection autorisées :**

        ```
        http://localhost:4200
        ```

        **URL de déconnexion autorisées :**

        ```
        http://localhost:4200
        ```

        **Allowed Web Origins :**

        ```
        http://localhost:4200
        ```

        <Info>
          Les **URL de redirection autorisées** sont une mesure de sécurité essentielle pour garantir que les utilisateurs soient renvoyés en toute sécurité vers votre application après l'authentification. Sans URL correspondante, le processus de connexion échouera et les utilisateurs seront bloqués par une page d'erreur Auth0 au lieu d'accéder à votre application.

          Les **URL de déconnexion autorisées** sont essentielles pour offrir une expérience utilisateur fluide lors 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 générique Auth0.

          **Allowed Web Origins** est essentiel pour l'authentification silencieuse. Sans cette configuration, les utilisateurs seront déconnectés lorsqu'ils actualisent la page ou reviennent plus tard à votre application.
        </Info>
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configurer le module Auth0" stepNumber={4}>
    Le script CLI a déjà créé votre fichier d’environnement. Configurez maintenant le module Auth0 dans votre application :

    ```typescript src/main.ts {3,4,5,9-15} lines theme={null}
    import { bootstrapApplication } from '@angular/platform-browser';
    import { appConfig } from './app/app.config';
    import { provideAuth0 } from '@auth0/auth0-angular';
    import { mergeApplicationConfig } from '@angular/core';
    import { environment } from './environments/environment';
    import { AppComponent } from './app/app.component';

    const auth0Config = mergeApplicationConfig(appConfig, {
      providers: [
        provideAuth0({
          domain: environment.auth0.domain,
          clientId: environment.auth0.clientId,
          authorizationParams: {
            redirect_uri: window.location.origin
          }
        })
      ]
    });

    bootstrapApplication(AppComponent, auth0Config).catch((err) =>
      console.error(err)
    );
    ```

    <Note>
      Si vous configurez votre application Auth0 manuellement via le tableau de bord, créez `src/environments/environment.ts` avec votre domaine et votre ID client indiqués dans le tableau de bord.
    </Note>
  </Step>

  <Step title="Créer les composants Login, Logout et Profile" stepNumber={5}>
    Créez les fichiers de composants manuellement pour un meilleur contrôle

    ```shellscript theme={null}
    mkdir -p src/app/components && touch src/app/components/login-button.component.ts && touch src/app/components/logout-button.component.ts && touch src/app/components/profile.component.ts
    ```

    Ajoutez le code suivant à chaque composant :

    <AuthCodeGroup>
      ```typescript src/app/components/login-button.component.ts expandable lines theme={null}
      import { Component, inject } from '@angular/core';
      import { AuthService } from '@auth0/auth0-angular';

      @Component({
        selector: 'app-login-button',
        standalone: true,
        template: `
          <button 
            (click)="loginWithRedirect()" 
            class="button login"
          >
            Log In
          </button>
        `
      })
      export class LoginButtonComponent {
        private auth = inject(AuthService);

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

      ```typescript src/app/components/logout-button.component.ts expandable lines theme={null}
      import { Component, inject } from '@angular/core';
      import { AuthService } from '@auth0/auth0-angular';

      @Component({
        selector: 'app-logout-button',
        standalone: true,
        template: `
          <button
            (click)="logout()"
            class="button logout"
          >
            Log Out
          </button>
        `
      })
      export class LogoutButtonComponent {
        private auth = inject(AuthService);

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

      ```typescript src/app/components/profile.component.ts expandable lines theme={null}
      import { Component, inject } from '@angular/core';
      import { AuthService } from '@auth0/auth0-angular';
      import { CommonModule } from '@angular/common';

      @Component({
        selector: 'app-profile',
        standalone: true,
        imports: [CommonModule],
        template: `
          @if (auth.isLoading$ | async) {
            <div class="loading-text">Chargement du profil en cours...</div>
          }
          
          @if ((auth.isAuthenticated$ | async) && (auth.user$ | async); as user) {
            <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
              @if (user.picture) {
                <img 
                  [src]="user.picture" 
                  [alt]="user.name || 'Utilisateur'"
                  class="profile-picture"
                  style="
                    width: 110px; 
                    height: 110px; 
                    border-radius: 50%; 
                    object-fit: cover;
                    border: 3px solid #63b3ed;
                  "
                />
              }
              <div style="text-align: center;">
                <div 
                  class="profile-name" 
                  style="
                    font-size: 2rem; 
                    font-weight: 600; 
                    color: #f7fafc; 
                    margin-bottom: 0.5rem;
                  "
                >
                  {{ user.name }}
                </div>
                <div 
                  class="profile-email" 
                  style="
                    font-size: 1.15rem; 
                    color: #a0aec0;
                  "
                >
                  {{ user.email }}
                </div>
              </div>
            </div>
          }
        `
      })
      export class ProfileComponent {
        protected auth = inject(AuthService);
      }
      ```
    </AuthCodeGroup>

    Maintenant, mettez à jour le composant App principal et ajoutez les styles :

    <Tabs>
      <Tab title="Composant App">
        Remplacez le contenu du fichier `src/app/app.component.ts` :

        ```typescript src/app/app.ts expandable lines theme={null}
        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">Chargement en cours...</div>
                </div>
              }

              <!-- État d'erreur -->
              @if (auth.error$ | async; as error) {
                <div class="error-state">
                  <div class="error-title">Oups!</div>
                  <div class="error-message">Une erreur s'est produite</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="Logo Auth0" 
                    class="auth0-logo"
                  />
                  <h1 class="main-title">Bienvenue sur Sample0</h1>
                  
                  <!-- État authentifié -->
                  @if (auth.isAuthenticated$ | async) {
                    <div class="logged-in-section">
                      <div class="logged-in-message">✅ Authentification réussie!</div>
                      <h2 class="profile-section-title">Votre profil</h2>
                      <div class="profile-card">
                        <app-profile />
                      </div>
                      <app-logout-button />
                    </div>
                  } @else {
                    <!-- État non authentifié -->
                    <div class="action-card">
                      <p class="action-text">Commencez par vous connecter à votre compte</p>
                      <app-login-button />
                    </div>
                  }
                </div>
              }
            </div>
          `,
          styles: []
        })
        export class AppComponent {
          protected auth = inject(AuthService);
        }
        ```
      </Tab>

      <Tab title="Styles globaux">
        Ajoutez des styles à `src/styles.css` :

        ```css src/styles.css expandable lines theme={null}
        @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;
        }

        .texte-chargement {
          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;
          }
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Lancez votre application" stepNumber={6}>
    ```shellscript theme={null}
    ng serve
    ```
  </Step>
</Steps>

<Check>
  **Point de contrôle**

  Vous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle qui s’exécute sur votre [localhost](http://localhost:4200/)
</Check>

***

<div id="advanced-usage">
  ## Utilisation avancée
</div>

<Accordion title="Utilisation de l'approche NgModule traditionnelle">
  Si vous préférez utiliser des NgModules plutôt que des composants autonomes (standalone), voici comment configurer la Trousse de développement logiciel (SDK) :

  ```typescript src/app/app.module.ts theme={null}
  import { NgModule } 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 { AppComponent } from './app';

  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      AppRoutingModule,
      AuthModule.forRoot({
        domain: environment.auth0.domain,
        clientId: environment.auth0.clientId,
        authorizationParams: {
          redirect_uri: window.location.origin
        }
      })
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  ```
</Accordion>

<Accordion title="Protéger des routes avec AuthGuard">
  Utilisez le garde fonctionnel moderne pour protéger les routes qui nécessitent une authentification :

  ```typescript src/app/app.routes.ts theme={null}
  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'
    }
  ];
  ```

  Configurez ensuite le routage dans main.ts :

  ```typescript src/main.ts theme={null}
  import { provideRouter } from '@angular/router';
  import { environment } from './environments/environment';
  import { routes } from './app/app.routes';

  const auth0Config = mergeApplicationConfig(appConfig, {
    providers: [
      provideRouter(routes),
      provideAuth0({
        domain: environment.auth0.domain,
        clientId: environment.auth0.clientId,
        authorizationParams: {
          redirect_uri: window.location.origin
        }
      })
    ]
  });
  ```
</Accordion>

<Accordion title="Appeler des API protégées">
  Configurez l’intercepteur HTTP pour ajouter automatiquement les jetons aux appels à l’API :

  ```typescript src/main.ts theme={null}
  import { provideHttpClient, withInterceptors } from '@angular/common/http';
  import { authHttpInterceptorFn } from '@auth0/auth0-angular';
  import { environment } from './environments/environment';

  const auth0Config = mergeApplicationConfig(appConfig, {
    providers: [
      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])
      )
    ]
  });
  ```
</Accordion>