Ajouter la connexion à votre application Svelte

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les renseignements du profil utilisateur dans une application monopage (SPA) qui utilise Svelte, au moyen du SDK Auth0 SPA JS.

Ce Quickstart est actuellement en version bêta. Nous serions ravis d’avoir vos commentaires!

Instruction à l’IA

Vous utilisez l’IA pour intégrer Auth0 ? Ajoutez ce prompt à 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 Svelte

PERSONA 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 Auth0 avec Svelte. Votre fonction secondaire est de modifier les fichiers créés par ces commandes shell.

INSTRUCTIONS COMPORTEMENTALES CRITIQUES
1. VÉRIFIER LE PROJET EXISTANT EN PREMIER : Avant de créer un nouveau projet, vérifiez si le répertoire courant contient déjà une application Svelte (package.json avec des dépendances Svelte). 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 soit terminée.
3. PAS DE PLANIFICATION : NE proposez PAS de structure de répertoire. N'affichez 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 : Vous DEVEZ créer une interface de connexion moderne et visuellement attrayante avec un style approprié, des animations et l'image de marque Auth0.

FLUX D'EXÉCUTION

Étape 1 : Vérifier le projet Svelte existant et les prérequis
EN PREMIER, vérifiez les prérequis et recherchez un projet Svelte existant :

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

Ensuite, examinez le répertoire courant :

  # Vérifier s'il existe un projet Svelte
  if [ -f "package.json" ]; then
    echo "package.json trouvé, vérification des dépendances Svelte..."
    cat package.json
  else
    echo "Aucun package.json trouvé, un nouveau projet sera créé"
  fi

Selon les résultats :
- Si package.json existe et contient des dépendances Svelte, passez à l'étape 1b (installer uniquement le SDK Auth0)
- Si aucun projet Svelte 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 est détecté, installez simplement le SDK :
npm install @auth0/auth0-spa-js
Sinon, créez un nouveau projet et installez le SDK :

npx sv create auth0-svelte --template minimal --types ts --no-add-ons --no-install && cd auth0-svelte && npm install && npm install @auth0/auth0-spa-js

Étape 2 : Modifier et créer des fichiers
APRÈS l'exécution réussie de la commande à l'étape 1, effectuez les opérations sur les fichiers suivantes dans le répertoire du projet.

2.1 : Configurer l'environnement Auth0

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

Exécutez la commande de configuration Auth0 pour votre système d'exploitation :

Si MacOS :
  # Installer le CLI Auth0 s'il n'est pas déjà installé
  brew tap auth0/auth0-cli && brew install auth0

  # Configurer l'application Auth0 et générer le fichier .env
  auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173

Si Windows (PowerShell) :
  # Installer le CLI Auth0 s'il n'est pas déjà installé
  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 svelte --build-tool vite --name "My App" --port 5173

Cette commande effectuera automatiquement les actions suivantes :
- Vous authentifier auprès d'Auth0 (demande de connexion si nécessaire)
- Créer une application monopage (SPA) configurée pour http://localhost:5173
- Générer un fichier .env avec VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID

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 :
1. Ne codez JAMAIS en dur le domaine Auth0 ou le Client ID directement dans le code. Il s'agit d'une faille de sécurité majeure.
2. N'omettez JAMAIS les authorizationParams avec redirect_uri lors de la configuration du client Auth0. Sans cela, le flux de connexion échouera.
3. 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 paquet @auth0/auth0-spa-js.
2. Vous DEVEZ récupérer les identifiants à partir des variables d'environnement (p. ex., import.meta.env.VITE_AUTH0_DOMAIN).
3. Vous DEVEZ configurer le client Auth0 avec un redirect_uri approprié dans authorizationParams.
4. Vous DEVEZ illustrer les fonctionnalités en utilisant les stores Svelte pour la gestion de l'état.

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

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

Compatibilité des versions de Svelte : Ce Quickstart est compatible avec Svelte 5.x et les versions ultérieures.

​

Commencer

Ce Quickstart montre comment ajouter l’authentification Auth0 à une application Svelte. Vous créerez une application monopage sécurisée avec des fonctionnalités de login, de logout et de profil utilisateur à l’aide du SDK Auth0 SPA JS.

1. Créer un nouveau projet

   Créez un nouveau projet Svelte pour ce Quickstart

   npx sv create auth0-svelte --template minimal --types ts --no-add-ons --no-install
   

   Ouvrir le projet

   cd auth0-svelte
   
2. Installez Auth0 SPA SDK

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

   Ensuite, vous devez créer une nouvelle application dans votre tenant Auth0 et ajouter les variables d’environnement à votre projet.

   Vous avez trois options pour configurer votre application Auth0 : utiliser l’outil de configuration rapide (recommandé), exécuter une commande CLI ou faire la configuration manuellement dans le Dashboard :

   Configuration rapide (recommandée)

   Créez une Auth0 App 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 svelte --build-tool vite --name "My App" --port 5173
   

   Cette commande va :

   1. Vérifier si vous êtes authentifié (et vous inviter à vous connecter au besoin)
   2. Créer une application Auth0 de type SPA configurée pour http://localhost:5173
   3. Générer un fichier .env avec VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID

   Dashboard

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

   .env

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

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

   Enfin, dans l’onglet Settings de la page des détails de votre application, configurez les URL suivantes :

   Allowed Callback URLs:

   http://localhost:5173
   

   Allowed Logout URLs:

   http://localhost:5173
   

   Allowed Web Origins:

   http://localhost:5173
   

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

   Les Allowed Logout URLs sont essentielles pour offrir une expérience utilisateur fluide 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éer la boutique Auth0

   Créez le fichier du store

   Mac/Linux

   mkdir -p src/lib/stores && touch src/lib/stores/auth.ts
   

   Ajoutez le code suivant pour gérer l’état de l’authentification

   src/lib/stores/auth.ts

     import { writable, derived, get, type Readable } from 'svelte/store';
     import { createAuth0Client, type Auth0Client, type User } from '@auth0/auth0-spa-js';
     import { browser } from '$app/environment';
   
     export const auth0Client = writable<Auth0Client | null>(null);
     export const user = writable<User | null>(null);
     export const isAuthenticated = writable<boolean>(false);
     export const isLoading = writable<boolean>(true);
     export const error = writable<string | null>(null);
   
     // Stores dérivés
     export const isLoggedIn: Readable<boolean> = derived(
       [isAuthenticated, isLoading],
       ([$isAuthenticated, $isLoading]) => $isAuthenticated && !$isLoading
     );
   
     export async function initializeAuth() {
       if (!browser) return;
       
       try {
         const client = await createAuth0Client({
           domain: import.meta.env.VITE_AUTH0_DOMAIN,
           clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
           authorizationParams: {
             redirect_uri: window.location.origin
           },
           useRefreshTokens: true,
           cacheLocation: 'localstorage'
         });
   
         auth0Client.set(client);
   
         // Gérer le callback
         if (window.location.search.includes('code=')) {
           await client.handleRedirectCallback();
           window.history.replaceState({}, document.title, window.location.pathname);
         }
   
         // Vérifier le statut d'authentification
         const authenticated = await client.isAuthenticated();
         isAuthenticated.set(authenticated);
   
         if (authenticated) {
           const userData = await client.getUser();
           user.set(userData || null);
         }
   
         error.set(null);
       } catch (err) {
         console.error('Auth initialization error:', err);
         error.set(err instanceof Error ? err.message : 'Authentication initialization failed');
       } finally {
         isLoading.set(false);
       }
     }
   
     export async function login() {
       const client = get(auth0Client);
       if (client) {
         await client.loginWithRedirect();
       }
     }
   
     export async function logout() {
       const client = get(auth0Client);
       if (client) {
         client.logout({ 
           logoutParams: { 
             returnTo: window.location.origin 
           } 
         });
       }
     }
   
     export async function getToken(): Promise<string | null> {
       const client = get(auth0Client);
       if (!client) return null;
       
       try {
         return await client.getTokenSilently();
       } catch (err: any) {
         if (err.error === 'login_required') {
           await login();
         }
         return null;
       }
     }
   
5. Créer des composants Login, Logout et Profil

   Créer des fichiers de composants

   Mac/Linux

   mkdir -p src/lib/components && touch src/lib/components/LoginButton.svelte && touch src/lib/components/LogoutButton.svelte && touch src/lib/components/Profile.svelte
   

   Et ajoutez les extraits de code suivants

6. Exécutez votre application

   npm run dev
   

Vérification

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

---

​

Dépannage

La connexion ne fonctionne pas

Si rien ne se passe lorsque vous cliquez sur le bouton de connexion :

1. Ouvrez les outils de développement du navigateur (F12) et vérifiez l’onglet Console
2. Vérifiez que le fichier .env contient de véritables informations d’identification Auth0
3. Vérifiez que l’application Auth0 a les bonnes callback URLs configurées
4. Assurez-vous que VITE_AUTH0_DOMAIN contient միայն le domaine (p. ex. tenant.auth0.com), sans https://

Erreurs d’authentification

“Callback URL mismatch” :

• Allez dans Auth0 Dashboard → Applications → Votre application → Settings
• Ajoutez http://localhost:5173 à Allowed Callback URLs, Allowed Logout URLs et Allowed Web Origins
• Cliquez sur “Save Changes”

“invalid state” :

• Videz le cache et les cookies du navigateur
• Essayez dans une fenêtre privée ou en mode incognito

Problèmes du serveur de développement

Si npm run dev échoue :

• Exécutez npm run check pour voir les erreurs TypeScript
• Vérifiez que tous les fichiers ont été créés correctement
• Vérifiez que toutes les dépendances sont installées : npm install

Toujours bloqué? Consultez la Auth0 Community ou le SvelteKit Discord pour obtenir de l’aide.