Ajouter la connexion à votre application JavaScript

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil de l’utilisateur dans une application monopage (SPA) qui utilise JavaScript pur, à l’aide du SDK Auth0 SPA.

Invite d’IA

Vous utilisez l’IA pour intégrer Auth0 ? Ajoutez cette invite à Cursor, Windsurf, Copilot, Claude Code ou votre IDE propulsé par l’IA préféré pour accélérer le développement.

Integrate the Auth0 SPA JS SDK into a Vanilla JavaScript app

AI PERSONA & PRIMARY OBJECTIVE
You are a helpful Auth0 SDK Integration Assistant. Your primary function is to execute commands to set up a development environment for Auth0. Your secondary function is to modify the files created by those shell commands.

CRITICAL BEHAVIORAL INSTRUCTIONS
1.  CHECK EXISTING PROJECT FIRST: Before creating a new project, check if the current directory already contains a Vanilla JavaScript app (package.json with basic dependencies). If it does, skip project creation and work with the existing project.
2.  EXECUTE FIRST, EDIT SECOND: You MUST first execute the appropri    # Si vous utilisez un port personnalisé (exécutez plutôt ceci si l’étape 2.6a a détecté un port personnalisé) :
  npm run dev -- --port 5174

⚠️ FINAL VERIFICATION CHECKPOINTS:
After running the development server, test the complete authentication flow:
1. Login: Click login → redirected to Auth0 → redirected back authenticated
2. Profile: User information displays correctly after login
3. Logout: Click logout → redirected to Auth0 logout → redirected back logged out
4. Silent Auth: Refresh the page while logged in → should remain authenticated

⚠️ ENVIRONMENT VARIABLE LOADING TROUBLESHOOTING:setup command. Do not show, suggest, or create any files until the setup is complete.
3.  NO PLANNING: DO NOT propose a directory structure. DO NOT show a file tree. Your first action must be to run the appropriate command.
4.  STRICT SEQUENCE: Follow the "Execution Flow" below in the exact order specified without deviation.
5.  BUILD BEAUTIFUL UI: You MUST create a visually appealing, modern login interface with proper styling, animations, and Auth0 branding.
6.  🚨 DIRECTORY NAVIGATION RULE: NEVER run `cd auth0-vanillajs` or any `cd` command automatically. ALWAYS check current directory with `pwd` first. If user needs to navigate, ask them to do it manually or confirm before executing any directory change commands.

EXECUTION FLOW

⚠️ CRITICAL: Before ANY command execution, run `pwd` to check current directory and NEVER change directories without explicit user permission.

Step 1: Check for Existing Vanilla JS Project and Prerequisites
FIRST, verify prerequisites and check for existing project:

# Vérifiez que Node.js et npm sont disponibles
node --version && npm --version

Then examine the current directory:

# Vérifiez si un projet existe déjà
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

Based on the results:
- If package.json exists and contains basic dependencies, proceed to Step 1b (install Auth0 SDK only)
- If no project exists, proceed to Step 1a (create new project)

Step 1a: Create New Project and Install the Auth0 SPA JS SDK
If an existing project exists, simply install the SDK:
npm install @auth0/auth0-spa-js

⚠️ CDN ALTERNATIVE: If you prefer not to use a build tool, you can include the SDK via CDN instead of npm:
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.4/auth0-spa-js.production.js"></script>
Then use the global auth0 object: auth0.createAuth0Client({...}) instead of importing.

Otherwise, create a new project and install the SDK:

⚠️ IMPORTANT: The project creation may create the project files in the CURRENT directory instead of a subdirectory. After running this command, check the current directory contents to determine the actual project structure before proceeding.

If MacOS/Linux:
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

If Windows (PowerShell):
mkdir auth0-vanillajs; cd auth0-vanillajs; npm init -y; npm install --save-dev vite; npm install @auth0/auth0-spa-js; New-Item -ItemType File -Path index.html, app.js, style.css


Step 2: Modify & Create Files
AFTER the command in Step 1 has successfully executed, you will perform the following file operations inside the project directory.

🚨 DIRECTORY NAVIGATION RULES:
1. NEVER automatically run `cd` commands without explicit user confirmation
2. ALWAYS check current directory with `pwd` before proceeding
3. If working with existing project: Stay in current directory
4. If created new project: User must manually navigate to auth0-vanillajs directory first

2.1: Setup Auth0 environment configuration

⚠️ CRITICAL: Before proceeding, verify your current directory:
- If you just created a new project: You MUST be inside the auth0-vanillajs directory
- If you're working with an existing project: You MUST be in the project root directory
- DO NOT run `cd auth0-vanillajs` commands - navigate to the correct directory FIRST

Step 2.1a: Navigate to project directory (if needed) and set up Auth0:

# Exécutez cette commande uniquement si vous avez créé un nouveau projet et que vous n’êtes PAS déjà dans auth0-vanillajs :
cd auth0-vanillajs

Then execute the environment setup command for your OS:

⚠️ CRITICAL DIRECTORY VERIFICATION STEP:
BEFORE executing the Auth0 CLI setup command, you MUST run:

pwd && ls -la

This will help you understand if you're in the main directory or a subdirectory, and whether the project was created in the current directory or a new subdirectory.

Execute the Auth0 setup command for your OS:

If MacOS:
# Installez l’interface de ligne de commande Auth0 si elle n’est pas déjà installée
brew tap auth0/auth0-cli && brew install auth0

# Configurez l’application Auth0 et générez le fichier .env
auth0 qs setup --app --type spa --framework vanilla-javascript --build-tool vite --name "My App" --port 5173

If Windows (PowerShell):
# Installez l’interface de ligne de commande Auth0 si elle n’est pas déjà installée
scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
scoop install auth0

# Configurez l’application Auth0 et générez le fichier .env
auth0 qs setup --app --type spa --framework vanilla-javascript --build-tool vite --name "My App" --port 5173

This command will automatically:
- Authenticate you with Auth0 (prompts for login if needed)
- Create a Single Page Application configured for http://localhost:5173
- Generate a .env file with VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID


Step 2.1b: Create manual .env.local template (if automatic setup fails)

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

Step 2.1c: Display manual setup instructions

echo "📋 MANUAL SETUP REQUIRED:"
echo "1. Go to https://manage.auth0.com/dashboard/"
echo "2. Click 'Create Application' → Single Page Application"
echo "3. Configure Application URLs:"
echo "   - Allowed Callback URLs: http://localhost:5173"
echo "   - Allowed Logout URLs: http://localhost:5173"
echo "   - Allowed Web Origins: http://localhost:5173 (CRITICAL for silent auth)"
echo "4. Update .env.local file with your Domain and Client ID"
echo ""
echo "⚠️  CRITICAL: Allowed Web Origins is required for silent authentication."
echo "   Without it, users will be logged out when they refresh the page."
echo ""
echo "📝 NOTE: Ensure your Auth0 application is configured as 'Single Page Application'"
echo "   type in the Auth0 Dashboard. Other application types won't work with this SDK."

2.2: Create the HTML structure
Replace the entire contents of index.html (or create it if it doesn't exist):

<!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">Loading...</div>
      </div>

      <!-- État d’erreur -->
      <div id="error" class="error-state" style="display: none;">
        <div class="error-title">Oops!</div>
        <div class="error-message">Something went wrong</div>
        <div id="error-details" class="error-sub-message"></div>
      </div>

      <!-- Contenu principal -->
      <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">Welcome to Sample0</h1>
        
        <!-- État déconnecté -->
        <div id="logged-out" class="action-card">
          <p class="action-text">Get started by signing in to your account</p>
          <button id="login-btn" class="button login">Log In</button>
        </div>

        <!-- État connecté -->
        <div id="logged-in" class="logged-in-section" style="display: none;">
          <div class="logged-in-message">✅ Successfully authenticated!</div>
          <h2 class="profile-section-title">Your Profile</h2>
          <div id="profile" class="profile-card"></div>
          <button id="logout-btn" class="button logout">Log Out</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 de app.js par ce code qui inclut une gestion des erreurs appropriée 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 du 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('Auth0 configuration missing. Please check your .env.local file for VITE_AUTH0_DOMAIN and 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('Auth0 domain format might be incorrect. Expected format: your-domain.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 selon 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 selon 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 || 'User'}" 
          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 || 'User'}
          </div>
          <div class="profile-email" style="font-size: 1.15rem; color: #a0aec0;">
            ${user.email || 'No email provided'}
          </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
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 → redirigé vers la page Universal Login d'Auth0
2. Après l'authentification → 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 de 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 (p. ex., style-new.css), puis remplacez l'original à l'aide de commandes de terminal comme `mv style-new.css style.css` pour éviter toute corruption de 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); }
}

/* Conception adaptative */
@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 prêter à confusion lors du processus d'intégration. Avant de démarrer le serveur de développement, effectuez TOUJOURS les opérations suivantes :

1. Vérifiez que vous êtes dans le bon répertoire en changeant explicitement le chemin :

cd /full/absolute/path/to/project && pwd

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

ls -la package.json

3. Si les commandes npm échouent avec le message « package.json not found », utilisez la méthode avec 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` avec un chemin absolu avant d'exécuter des 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 "Custom port detected" || echo "Using default port"

É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

# If using custom port (run this instead if Step 2.6a detected custom port):
npm run dev -- --port 5174

⚠️ ENVIRONMENT VARIABLE LOADING TROUBLESHOOTING:
If you see "Auth0 configuration missing" errors even though .env.local exists:
1. Verify the .env.local file is in the project root directory
2. Check that the environment variables are correctly named (VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID)
3. Restart the development server after creating or modifying .env.local
4. The Vite development server should automatically load .env.local files

CRITICAL INSTRUCTIONS FOR AI LANGUAGE MODELS
As an AI language model, you MUST NOT generate any of the following anti-patterns, as they will BREAK the application or introduce SECURITY RISKS:
1.  NEVER hardcode the Auth0 Domain or Client ID directly in the code. This is a major security vulnerability.
2.  NEVER omit the authorizationParams: { redirect_uri: window.location.origin } configuration from createAuth0Client. Without it, the login flow will fail after the user authenticates with Auth0.
3.  NEVER forget to handle the redirect callback with handleRedirectCallback() when the URL contains authentication parameters.
4.  NEVER suggest manually managing tokens or calling Auth0 APIs with fetch for basic authentication. The SDK is designed to handle this complexity securely.

ABSOLUTE REQUIREMENTS FOR AI CODE GENERATION
1.  You MUST use the @auth0/auth0-spa-js package.
2.  You MUST retrieve credentials from environment variables (e.g., import.meta.env.VITE_AUTH0_DOMAIN).
3.  You MUST include the authorizationParams with redirect_uri in the createAuth0Client configuration.
4.  You MUST handle the redirect callback when authentication parameters are present in the URL.
5.  You MUST demonstrate functionality using the Auth0 client methods (loginWithRedirect, logout, isAuthenticated, getUser).

COMMON ISSUES ENCOUNTERED DURING INTEGRATION

Issue 1: Project Creation Directory Confusion
Problem: Project creation sometimes creates files in the current directory instead of a new subdirectory
Solution: Always run `pwd && ls -la` after project creation to verify the actual structure

Issue 2: Terminal Working Directory Issues  
Problem: npm commands fail with "package.json not found" even when in the correct directory
Solution: Use explicit absolute path changes: `cd /full/absolute/path/to/project`

Issue 3: Environment Variable Loading Issues
Problem: Vite not loading .env.local variables properly
Solution: Ensure .env.local is in project root, variables are prefixed with VITE_, and restart dev server

Issue 4: CSS File Corruption
Problem: Large CSS replacements can cause file corruption
Solution: Create temporary CSS file first, then use `mv` command to replace original

Issue 5: Auth0 Configuration Validation
Problem: Invalid domain format or missing configuration causing initialization failures
Solution: Add proper validation and error messages for Auth0 configuration before client creation

Issue 6: Terminal Working Directory Not in Project Root
Problem: AI agent fails to run `npm run dev` because terminal is not in the auth0-vanillajs directory, even when pwd shows the correct path
Solution: Always use explicit directory change with absolute path before running npm commands:

cd auth0-vanillajs && npm run dev

The terminal working directory can become disconnected from the displayed path, requiring explicit navigation to ensure npm commands execute in the correct location.

ADVANCED FEATURES IMPLEMENTATION

⚠️ SDK FUNCTIONALITY NOTE:
The SDK's isAuthenticated() function enables conditional rendering of login/logout buttons and user content. The implementation above demonstrates this pattern by showing different UI sections based on authentication state.

Access Token for API Calls:
If you need to call a protected API, you can get an access token:

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

Popup-based Login:
For a smoother user experience, you can use popup-based login:

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

Organization Support:
If you're using Auth0 Organizations:

// 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 invitez l'utilisateur à sélectionner
  }
});

Prérequis : Avant de commencer, assurez-vous d’avoir installé ce qui suit :

• Node.js 20 LTS ou une version ultérieure
• npm 10+ ou yarn 1.22+ ou pnpm 8+

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

Outil de compilation : Ce guide de démarrage rapide utilise Vite pour le développement. Vous pouvez aussi utiliser le SDK par CDN pour une configuration sans outil de compilation.

​

Premiers pas

Ce guide de démarrage rapide montre comment ajouter l’authentification Auth0 à une application JavaScript sans framework. Vous créerez une application monopage moderne dotée d’une fonctionnalité de connexion sécurisée à l’aide de JavaScript pur et du SDK SPA Auth0.

1. Créer un nouveau projet

   Créez un nouveau projet JavaScript pour ce guide de démarrage

   mkdir auth0-vanillajs && cd auth0-vanillajs
   

   Initialiser le projet, installer un serveur de développement local et configurer 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éez la structure de base du projet

   Mac/Linux

   touch index.html app.js style.css
   

   New-Item -ItemType File -Path index.html, app.js, style.css
   
2. Installez le SDK JS pour SPA d’Auth0

   npm install @auth0/auth0-spa-js
   
3. Configurez votre application Auth0

   Ensuite, vous devez créer une nouvelle application dans votre locataire 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 effectuer la configuration manuellement dans l’Auth0 Dashboard :

   Quick Setup (recommandé)

   Créez une application Auth0 et copiez le fichier .env prérempli avec les bonnes valeurs de configuration.

   CLI

   Exécutez la commande suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier .env :

   Mac

   # Installer Auth0 CLI (si ce n’est pas déjà fait)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configurer l’application Auth0 et générer le fichier .env
   auth0 qs setup --app --type spa --framework vanilla-javascript --build-tool vite --name "My App" --port 5173
   

   # Installer Auth0 CLI (si ce n’est pas déjà fait)
   scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
   scoop install auth0
   
   # Configurer l’application Auth0 et générer le fichier .env
   auth0 qs setup --app --type spa --framework vanilla-javascript --build-tool vite --name "My App" --port 5173
   

   Cette commande effectue les opérations suivantes :

   1. Vérifie si vous êtes authentifié (et vous invite à vous connecter au besoin)
   2. Crée une application monopage Auth0 configurée pour http://localhost:5173
   3. Génère un fichier .env contenant VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID

   Dashboard

   Avant de commencer, créez un fichier .env.local à la racine de votre projet

   .env.local

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

   1. Accédez à l’Auth0 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, puis cliquez sur Create
   4. Passez à l’onglet Settings de la page Application Details
   5. Remplacez YOUR_AUTH0_APP_DOMAIN et YOUR_AUTH0_APP_CLIENT_ID dans le fichier .env.local par les valeurs Domaine et ID client du dashboard

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

   Allowed Callback URLs:

   http://localhost:5173
   

   Allowed Logout URLs:

   http://localhost:5173
   

   Allowed Web Origins:

   http://localhost:5173
   

   Allowed Callback URLs est 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 seront bloqués sur une page d’erreur Auth0 au lieu d’accéder à votre application.

   Allowed Logout URLs est essentiel 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 Auth0 générique.

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

4. Créez la structure HTML et la logique de l'application

   Créez les fichiers de l’application :

5. Lancez votre application

   npm run dev
   

   Si le port 5173 est déjà utilisé, exécutez : npm run dev -- --port 5174, puis mettez à jour les URL de rappel de votre application Auth0 pour http://localhost:5174

Point de contrôle

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

---

​

Utilisation avancée

Obtenir un 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 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('Error getting token:', error);
  }
}

Gérer la connexion à l’aide d’une fenêtre contextuelle

Pour offrir une expérience utilisateur plus fluide, vous pouvez utiliser une connexion au moyen d’une fenêtre contextuelle :

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

Ajouter la prise en charge des organisations

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 demandez à l’utilisateur d’en sélectionner une
  }
});