Passer au contenu principal

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.

Invite pour l’IA

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.
Intégrer le SDK Auth0 SPA JS dans une application Vanilla JavaScript

PERSONNALITÉ 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 Vanilla JavaScript (package.json avec les dépendances de base). Si c'est le cas, passez 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 appropriée    # Si vous utilisez un port personnalisé (exécutez ceci à la place si l'étape 2.6a a détecté un port personnalisé) :
  npm run dev -- --port 5174

⚠️ POINTS DE VÉRIFICATION FINAUX :
Après avoir exécuté le serveur de développement, testez le flux d'authentification complet :
1. Connexion : Cliquez sur connexion → redirigé vers Auth0 → redirigé de retour authentifié
2. Profil : Les informations de l'utilisateur s'affichent correctement après la connexion
3. Déconnexion : Cliquez sur déconnexion → redirigé vers la déconnexion Auth0 → redirigé de retour déconnecté
4. Authentification silencieuse : Actualisez la page en étant connecté → devrait rester authentifié

⚠️ DÉPANNAGE DU CHARGEMENT DES VARIABLES D'ENVIRONNEMENT : commande de configuration. Ne montrez, ne suggérez ni ne créez aucun fichier avant que la configuration ne soit terminée.
3.  PAS DE 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-vanillajs` 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 Vanilla JS existant et les prérequis
D'ABORD, vérifiez les prérequis et recherchez un projet 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
if [ -f "package.json" ]; then
  echo "Found package.json, checking for dependencies..."
  cat package.json
else
  echo "No package.json found, will create new project"
fi

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

Étape 1a : Créer un nouveau projet et installer le SDK Auth0 SPA JS
Si un projet existant existe, installez simplement le SDK :
npm install @auth0/auth0-spa-js

⚠️ ALTERNATIVE CDN : Si vous préférez ne pas utiliser d'outil de construction, vous pouvez inclure le SDK via CDN au lieu de npm :
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.4/auth0-spa-js.production.js"></script>
Ensuite, utilisez l'objet global auth0 : auth0.createAuth0Client({...}) au lieu d'importer.

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

⚠️ IMPORTANT : La création du projet peut créer les fichiers du projet dans le répertoire ACTUEL au lieu d'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.

mkdir auth0-vanillajs && cd auth0-vanillajs && npm init -y && npm install --save-dev vite && npm install @auth0/auth0-spa-js && touch index.html app.js style.css


É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-vanillajs

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-vanillajs
- 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-vanillajs` - 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-vanillajs :
cd auth0-vanillajs

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 Vanilla JS 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:5173 -l http://localhost:5173 -o http://localhost:5173 --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') && echo "VITE_AUTH0_DOMAIN=${DOMAIN}" > .env.local && echo "VITE_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env.local && rm auth0-app-details.json && echo ".env.local file created with your Auth0 details:" && cat .env.local

Si Windows, exécutez la commande suivante :
$AppName = "My Vanilla JS App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t spa -c http://localhost:5173 -l http://localhost:5173 -o http://localhost:5173 --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; Set-Content -Path .env.local -Value "VITE_AUTH0_DOMAIN=$Domain"; Add-Content -Path .env.local -Value "VITE_AUTH0_CLIENT_ID=$ClientId"; Remove-Item auth0-app-details.json; Write-Output ".env.local file created with your Auth0 details:"; Get-Content .env.local


Étape 2.1b : Créer un modèle .env.local manuel (si la configuration automatique échoue)

cat > .env.local << 'EOF'
# Configuration Auth0 - METTEZ À JOUR CES VALEURS
VITE_AUTH0_DOMAIN=your-auth0-domain.auth0.com
VITE_AUTH0_CLIENT_ID=your-auth0-client-id
EOF

Étape 2.1c : Afficher les instructions de configuration manuelle

echo "📋 CONFIGURATION MANUELLE REQUISE :"
echo "1. Accédez à https://manage.auth0.com/dashboard/"
echo "2. Cliquez sur « Créer une application » → Application monopage"
echo "3. Configurez les URL de l'application :"
echo "   - Allowed Callback URLs: http://localhost:5173"
echo "   - Allowed Logout URLs: http://localhost:5173"
echo "   - Allowed Web Origins: http://localhost:5173 (CRITIQUE pour l'authentification silencieuse)"
echo "4. Update .env.local file with your Domain and Client ID"
echo ""
echo "⚠️  CRITIQUE : Les origines Web autorisées sont requises pour l'authentification silencieuse."
echo "   Sans cela, les utilisateurs seront déconnectés lorsqu'ils actualiseront la page."
echo ""
echo "📝 REMARQUE : Assurez-vous que votre application Auth0 est configurée en tant qu'« Application monopage »"
echo "   dans le Auth0 Dashboard. Les autres types d'applications ne fonctionneront pas avec ce SDK."

2.2 : Créer la structure HTML
Remplacez tout le contenu de index.html (ou créez-le s'il n'existe pas) :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auth0 Vanilla JS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="app-container">
      <!-- État de chargement -->
      <div id="loading" class="loading-state">
        <div class="loading-text">Chargement...</div>
      </div>

      <!-- État d'erreur -->
      <div id="error" class="error-state" style="display: none;">
        <div class="error-title">Oups!</div>
        <div class="error-message">Une erreur s'est produite</div>
        <div id="error-details" class="error-sub-message"></div>
      </div>

      <!-- Main Content -->
      <div id="app" class="main-card-wrapper" style="display: none;">
        <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 sur Sample0</h1>
        
        <!-- Logged Out State -->
        <div id="logged-out" class="action-card">
          <p class="action-text">Commencez en vous connectant à votre compte</p>
          <button id="login-btn" class="button login">Se connecter</button>
        </div>

        <!-- Logged In State -->
        <div id="logged-in" class="logged-in-section" style="display: none;">
          <div class="logged-in-message">✅ Authentification réussie !</div>
          <h2 class="profile-section-title">Votre profil</h2>
          <div id="profile" class="profile-card"></div>
          <button id="logout-btn" class="button logout">Se déconnecter</button>
        </div>
      </div>
    </div>

    <script type="module" src="app.js"></script>
  </body>
</html>

2.3 : Créer la logique de l'application
Remplacez l'intégralité du contenu du fichier app.js par ce code qui inclut une gestion appropriée des erreurs et l'intégration Auth0 :

⚠️ DIRECTIVES POUR LES MODULES JAVASCRIPT :
- Assurez-vous d'utiliser les importations de modules ES6 appropriées
- Incluez une gestion complète des erreurs pour l'initialisation d'Auth0
- Validez les variables d'environnement avant de les utiliser
- Gérez tous les états d'authentification (chargement, erreur, authentifié, non authentifié)

import { createAuth0Client } from '@auth0/auth0-spa-js';

// Éléments DOM
const loading = document.getElementById('loading');
const error = document.getElementById('error');
const errorDetails = document.getElementById('error-details');
const app = document.getElementById('app');
const loggedOutSection = document.getElementById('logged-out');
const loggedInSection = document.getElementById('logged-in');
const loginBtn = document.getElementById('login-btn');
const logoutBtn = document.getElementById('logout-btn');
const profileContainer = document.getElementById('profile');

let auth0Client;

// Initialiser le client Auth0
async function initAuth0() {
  try {
    // Valider les variables d'environnement
    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
    const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

    if (!domain || !clientId) {
      throw new Error('Configuration Auth0 manquante. Veuillez vérifier votre fichier .env.local pour VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID');
    }

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

    auth0Client = await createAuth0Client({
      domain: domain,
      clientId: clientId,
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    });

    // Vérifier si l'utilisateur revient de la connexion
    if (window.location.search.includes('code=') && window.location.search.includes('state=')) {
      await handleRedirectCallback();
    }

    // Mettre à jour l'interface utilisateur en fonction de l'état d'authentification
    await updateUI();
  } catch (err) {
    console.error('Auth0 initialization error:', err);
    showError(err.message);
  }
}

// Gérer le rappel de redirection
async function handleRedirectCallback() {
  try {
    await auth0Client.handleRedirectCallback();
    // Nettoyer l'URL pour supprimer les paramètres de requête
    window.history.replaceState({}, document.title, window.location.pathname);
  } catch (err) {
    console.error('Redirect callback error:', err);
    showError(err.message);
  }
}

// Mettre à jour l'interface utilisateur en fonction de l'état d'authentification
async function updateUI() {
  try {
    const isAuthenticated = await auth0Client.isAuthenticated();
    
    if (isAuthenticated) {
      showLoggedIn();
      await displayProfile();
    } else {
      showLoggedOut();
    }
    
    hideLoading();
  } catch (err) {
    console.error('UI update error:', err);
    showError(err.message);
  }
}

// Afficher le profil de l'utilisateur
async function displayProfile() {
  try {
    const user = await auth0Client.getUser();
    const placeholderImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='55' fill='%2363b3ed'/%3E%3Cpath d='M55 50c8.28 0 15-6.72 15-15s-6.72-15-15-15-15 6.72-15 15 6.72 15 15 15zm0 7.5c-10 0-30 5.02-30 15v3.75c0 2.07 1.68 3.75 3.75 3.75h52.5c2.07 0 3.75-1.68 3.75-3.75V72.5c0-9.98-20-15-30-15z' fill='%23fff'/%3E%3C/svg%3E`;
    
    profileContainer.innerHTML = `
      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
        <img 
          src="${user.picture || placeholderImage}" 
          alt="${user.name || 'Utilisateur'}" 
          class="profile-picture"
          style="
            width: 110px; 
            height: 110px; 
            border-radius: 50%; 
            object-fit: cover;
            border: 3px solid #63b3ed;
          "
          onerror="this.src='${placeholderImage}'"
        />
        <div style="text-align: center;">
          <div class="profile-name" style="font-size: 2rem; font-weight: 600; color: #f7fafc; margin-bottom: 0.5rem;">
            ${user.name || 'Utilisateur'}
          </div>
          <div class="profile-email" style="font-size: 1.15rem; color: #a0aec0;">
            ${user.email || 'Aucun courriel fourni'}
          </div>
        </div>
      </div>
    `;
  } catch (err) {
    console.error('Error displaying profile:', err);
  }
}

// Gestionnaires d'événements
async function login() {
  try {
    await auth0Client.loginWithRedirect();
  } catch (err) {
    console.error('Login error:', err);
    showError(err.message);
  }
}

async function logout() {
  try {
    await auth0Client.logout({
      logoutParams: {
        returnTo: window.location.origin
      }
    });
  } catch (err) {
    console.error('Logout error:', err);
    showError(err.message);
  }
}

// Gestion de l'état de l'interface utilisateur
function showLoading() {
  loading.style.display = 'block';
  error.style.display = 'none';
  app.style.display = 'none';
}

function hideLoading() {
  loading.style.display = 'none';
  app.style.display = 'flex';
}

function showError(message) {
  loading.style.display = 'none';
  app.style.display = 'none';
  error.style.display = 'block';
  errorDetails.textContent = message;
}

function showLoggedIn() {
  loggedOutSection.style.display = 'none';
  loggedInSection.style.display = 'flex';
}

function showLoggedOut() {
  loggedInSection.style.display = 'none';
  loggedOutSection.style.display = 'flex';
}

// Écouteurs d'événements
loginBtn.addEventListener('click', login);
logoutBtn.addEventListener('click', logout);

// Initialiser l'application
initAuth0();

⚠️ VÉRIFICATION DU POINT DE CONTRÔLE :
Après avoir implémenté la logique JavaScript, vous devriez pouvoir tester les fonctionnalités de base :
1. Cliquez sur le bouton de connexion → vous êtes redirigé vers la page Universal Login d'Auth0
2. Après l'authentification → vous êtes redirigé vers votre application
3. Les paramètres de requête de l'URL sont nettoyés après la redirection
4. Aucune erreur de console liée à Auth0 n'apparaît

2.4 : Ajouter un style CSS moderne et élégant
Remplacez l'intégralité du contenu du fichier style.css par ce style moderne aux couleurs d'Auth0 :

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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #1a1e27;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e2e8f0;
  overflow: hidden;
}

.app-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  padding: 1rem;
}

.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 {
  transition: transform 0.3s ease-in-out;
}

.profile-picture:hover {
  transform: scale(1.05);
}

/* Animations */
@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); }
}

/* Responsive Design */
@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;
  }

  .action-card {
    padding: 2rem;
  }
}

2.5 : Mettre à jour package.json avec le script de développement
Mettez à jour votre package.json pour inclure les scripts de développement, de compilation et de prévisualisation. Remplacez l'intégralité du contenu de package.json :

cat > package.json << 'EOF'
{
  "name": "auth0-vanillajs",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^2.4.1"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}
EOF

2.6 : 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 mal identifié pendant 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 /full/absolute/path/to/project && 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/[username]/path/to/auth0-vanillajs && 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` de manière 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.6a : Vérifier si un port personnalisé est nécessaire

grep -q "VITE_DEV_PORT" .env.local 2>/dev/null && echo « Port personnalisé détecté » || echo « Utilisation du port par défaut »

Étape 2.6b : Démarrer le serveur de développement avec le port approprié

# Si vous utilisez le port par défaut :
npm run dev

# Si vous utilisez un port personnalisé (exécutez ceci à la place si l'étape 2.6a a détecté un port personnalisé) :
npm run dev -- --port 5174

⚠️ DÉPANNAGE DU CHARGEMENT DES VARIABLES D'ENVIRONNEMENT :
Si vous voyez des erreurs « Configuration Auth0 manquante » même si .env.local existe :
1. Vérifiez que le fichier .env.local se trouve dans le répertoire racine du projet
2. Vérifiez que les variables d'environnement sont correctement nommées (VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID)
3. Redémarrez le serveur de développement après avoir créé ou modifié .env.local
4. Le serveur de développement Vite devrait charger automatiquement les fichiers .env.local

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 codez JAMAIS 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.  N'omettez JAMAIS la configuration authorizationParams: { redirect_uri: window.location.origin } de createAuth0Client. Sans elle, le flux de connexion échouera après l'authentification de l'utilisateur avec Auth0.
3.  N'oubliez JAMAIS de gérer le rappel de redirection avec handleRedirectCallback() lorsque l'URL contient des paramètres d'authentification.
4.  Ne suggérez JAMAIS de gérer manuellement les jetons ou d'appeler les API Auth0 avec fetch pour l'authentification de base. Le SDK est conçu pour gérer cette complexité de manière sécurisée.

EXIGENCES ABSOLUES POUR LA GÉNÉRATION DE CODE IA
1.  Vous DEVEZ utiliser le package @auth0/auth0-spa-js.
2.  Vous DEVEZ récupérer les informations d'identification à partir des variables d'environnement (par exemple, import.meta.env.VITE_AUTH0_DOMAIN).
3.  Vous DEVEZ inclure les authorizationParams avec redirect_uri dans la configuration createAuth0Client.
4.  Vous DEVEZ gérer le rappel de redirection lorsque des paramètres d'authentification sont présents dans l'URL.
5.  Vous DEVEZ démontrer la fonctionnalité en utilisant les méthodes du client Auth0 (loginWithRedirect, logout, isAuthenticated, getUser).

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

Problème 1 : Confusion du répertoire de création de projet
Problème : La création de projet crée parfois des fichiers dans le répertoire actuel au lieu d'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 npm échouent avec « package.json introuvable » même dans le bon répertoire
Solution : Utilisez des changements de chemin absolu explicites : `cd /full/absolute/path/to/project`

Problème 3 : Problèmes de chargement des variables d'environnement
Problème : Vite ne charge pas correctement les variables .env.local
Solution : Assurez-vous que .env.local se trouve à la racine du projet, que les variables sont préfixées par VITE_ et redémarrez le serveur de développement

Problème 4 : Corruption de fichier CSS
Problème : Les remplacements CSS volumineux 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 : Validation de la configuration Auth0
Problème : Format de domaine invalide ou configuration manquante causant des échecs d'initialisation
Solution : Ajoutez une validation appropriée et des messages d'erreur pour la configuration Auth0 avant la création du client

Problème 6 : Le répertoire de travail du terminal n'est pas à la racine du projet
Problème : L'agent IA ne parvient pas à exécuter `npm run dev` car le terminal n'est pas dans le répertoire auth0-vanillajs, même lorsque pwd affiche le bon chemin
Solution : Utilisez toujours un changement de répertoire explicite avec un chemin absolu avant d'exécuter les commandes npm :

cd auth0-vanillajs && npm run dev

Le répertoire de travail du terminal peut se déconnecter du chemin affiché, nécessitant une navigation explicite pour garantir que les commandes npm s'exécutent au bon emplacement.

IMPLÉMENTATION DES FONCTIONNALITÉS AVANCÉES

⚠️ NOTE SUR LA FONCTIONNALITÉ DU SDK :
La fonction isAuthenticated() du SDK permet le rendu conditionnel des boutons de connexion/déconnexion et du contenu utilisateur. L'implémentation ci-dessus démontre ce modèle en affichant différentes sections d'interface utilisateur en fonction de l'état d'authentification.

Jeton d'accès pour les appels API :
Si vous devez appeler une API protégée, vous pouvez obtenir un jeton d'accès :

// Ajoutez cette fonction à votre app.js
async function getAccessToken() {
  try {
    const token = await auth0Client.getTokenSilently({
      authorizationParams: {
        audience: 'YOUR_API_IDENTIFIER',
        scope: 'read:messages'
      }
    });
    
    // Utilisez le jeton pour appeler votre API
    const response = await fetch('/api/protected', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error getting token:', error);
  }
}

Connexion basée sur une fenêtre contextuelle :
Pour une expérience utilisateur plus fluide, vous pouvez utiliser la connexion basée sur une fenêtre contextuelle :

// Remplacez la fonction login dans app.js
async function login() {
  try {
    await auth0Client.loginWithPopup();
    await updateUI();
  } catch (err) {
    if (err.error !== 'popup_closed_by_user') {
      showError(err.message);
    }
  }
}

Prise en charge des organisations :
Si vous utilisez les organisations Auth0 :

// Mettez à jour votre configuration du client Auth0
auth0Client = await createAuth0Client({
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
  authorizationParams: {
    redirect_uri: window.location.origin,
    organization: 'YOUR_ORGANIZATION_ID' // ou invitez l'utilisateur à sélectionner
  }
});
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 – Nécessaire pour la configuration de l’Auth0 CLI
Outil de build : Ce démarrage rapide utilise Vite pour le développement. Vous pouvez aussi utiliser la trousse de développement logiciel (SDK) via un CDN, sans outil de build.

​
Pour commencer

Ce démarrage rapide montre comment ajouter l’authentification Auth0 à une application JavaScript simple (vanilla). Vous allez créer une application monopage moderne avec une fonctionnalité de connexion sécurisée en utilisant du JavaScript pur et la trousse de développement logiciel (SDK) Auth0 SPA.
1

Créer un nouveau projet

Créez un nouveau projet JavaScript pour ce démarrage rapide
mkdir auth0-vanillajs && cd auth0-vanillajs
Initialisez le projet, installez un serveur de développement local et configurez les scripts
npm init -y && npm install --save-dev vite && npm pkg set scripts.dev="vite" scripts.build="vite build" scripts.preview="vite preview" type="module"
Créer la structure de base du projet
touch index.html app.js style.css
2

Installez la trousse de développement logiciel (SDK) Auth0 SPA JS

npm install @auth0/auth0-spa-js
3

Configurez votre application Auth0

Ensuite, vous devez créer une nouvelle application dans votre tenant Auth0 et ajouter les variables d’environnement à votre projet.Vous pouvez le faire automatiquement en exécutant une commande CLI ou manuellement via le Dashboard :
Exécutez la commande shell suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier .env.local :
4

Créez la structure HTML et la logique applicative

Créez les fichiers de l’application :
5

Exécutez votre application

npm run dev
Point de contrôleVous devriez maintenant avoir une page de connexion Auth0 pleinement fonctionnelle qui s’exécute sur votre localhost

​
Utilisation avancée

Si vous devez appeler une API protégée, vous pouvez obtenir un jeton d’accès :
// Ajoutez ceci à votre app.js
async function getAccessToken() {
  try {
    const token = await auth0Client.getTokenSilently({
      authorizationParams: {
        audience: 'YOUR_API_IDENTIFIER',
        scope: 'read:messages'
      }
    });
    
    // Utilisez le jeton pour appeler votre API
    const response = await fetch('/api/protected', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Erreur lors de l’obtention du jeton&nbsp;:', error);
  }
}
Pour offrir une expérience utilisateur plus fluide, vous pouvez utiliser une connexion par fenêtre contextuelle :
// Remplacez la fonction login dans app.js
async function login() {
  try {
    await auth0Client.loginWithPopup();
    await updateUI();
  } catch (err) {
    if (err.error !== 'popup_closed_by_user') {
      showError(err.message);
    }
  }
}
Si vous utilisez les organisations Auth0 :
// Mettez à jour la configuration de votre client Auth0
auth0Client = await createAuth0Client({
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
  authorizationParams: {
    redirect_uri: window.location.origin,
    organization: 'YOUR_ORGANIZATION_ID' // ou inviter l’utilisateur à en choisir une
  }
});