Ajouter la fonctionnalité Login à votre application Express

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les renseignements du profil utilisateur dans une application web Express.js à l’aide du SDK @auth0/auth0-express (Beta).

Ce Quickstart est actuellement en Beta. Nous serions ravis de connaître vos commentaires!

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

• Node.js 22 LTS ou version ultérieure
• npm 10+ ou yarn 1.22+

​

Pour commencer

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les renseignements du profil utilisateur dans une application Web Express.js à l’aide du SDK @auth0/auth0-express.

1. Créer un nouveau projet

   Créez un nouveau répertoire pour votre application Express et initialisez un projet Node.js.

   Mettez à jour votre fichier package.json afin d’utiliser les modules ES et d’ajouter des scripts de démarrage :

   {
     "name": "auth0-express-app",
     "version": "1.0.0",
     "type": "module",
     "main": "server.js",
     "scripts": {
       "start": "node server.js",
       "dev": "node --watch server.js"
     }
   }
   
2. Installer le SDK

   Installez @auth0/auth0-express, ainsi que express et dotenv :

   npm install @auth0/auth0-express@beta express dotenv
   
3. Configurer Auth0

   Vous devez créer une nouvelle application dans votre tenant Auth0 et configurer vos variables d’environnement.

   Configuration rapide

   Une fois votre application créée, ajoutez ces valeurs à votre fichier .env :

   Générez un secret de session sécurisé :

   node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
   

   Copiez la sortie et utilisez-la comme valeur de AUTH0_SESSION_SECRET.

   Sous macOS ou Linux, vous pouvez aussi exécuter openssl rand -hex 32. La commande Node fonctionne sur toutes les plateformes, puisque Node est déjà un prérequis.

   CLI

   Exécutez la commande suivante à la racine de votre projet pour créer une application Auth0 :

   Si vous n’avez pas encore installé l’Auth0 CLI, exécutez :

   brew tap auth0/auth0-cli && brew install auth0
   

   Authentifiez-vous ensuite avec auth0 login.

   Tableau de bord

   1. Accédez à Auth0 Dashboard → Applications > Applications
   2. Sélectionnez Create Application
   3. Saisissez un nom (par exemple, “My Express App”) et sélectionnez Regular Web Applications
   4. Cliquez sur Create
   5. Dans l’onglet Application Settings, configurez :

   Champ	Valeur
   Allowed Callback URLs	http://localhost:3000/auth/callback
   Allowed Logout URLs	http://localhost:3000

   6. Cliquez sur Save Changes
   7. Copiez votre Domain, votre Client ID et votre Client Secret dans la section Basic Information

   Créez votre fichier .env :

   Remplacez YOUR_AUTH0_DOMAIN, YOUR_AUTH0_CLIENT_ID et YOUR_AUTH0_CLIENT_SECRET par les valeurs de vos paramètres d’application Auth0.

   Générez un secret de session sécurisé et remplacez la valeur de l’espace réservé :

   node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
   

   Sous macOS ou Linux, vous pouvez aussi exécuter openssl rand -hex 32. La commande Node fonctionne sur toutes les plateformes, puisque Node est déjà un prérequis.

4. Configurer le middleware

   Ajoutez le middleware createAuth0() à votre application Express. Le SDK configure automatiquement les routes /auth/login, /auth/logout, /auth/callback et /auth/backchannel-logout.

   server.js

   import 'dotenv/config';
   import express from 'express';
   import { createAuth0 } from '@auth0/auth0-express';
   
   const app = express();
   const port = process.env.PORT || 3000;
   
   app.use(createAuth0());
   
   app.get('/', async (req, res) => {
     const session = await req.auth0.client.getSession();
     res.send(session ? 'Logged in' : 'Logged out');
   });
   
   app.listen(port, () => {
     console.log(`Server running at http://localhost:${port}`);
   });
   

   Ce que cela fait :

   • createAuth0() lit automatiquement les informations d’identification dans les variables d’environnement (AUTH0_DOMAIN, AUTH0_CLIENT_ID, etc.)
   • Configure quatre routes d’authentification sous /auth/
   • Ajoute req.auth0.client à chaque requête pour accéder à la session et au jeton
5. Ajoutez le login, le logout et une route de profil protégée

   Protégez les routes à l’aide du middleware requiresAuth du SDK et affichez les données de profil utilisateur avec getUser().

   server.js

   import 'dotenv/config';
   import express from 'express';
   import { createAuth0, requiresAuth } from '@auth0/auth0-express';
   
   const app = express();
   const port = process.env.PORT || 3000;
   
   app.use(createAuth0());
   
   // Route d'accueil publique
   app.get('/', async (req, res) => {
     const session = await req.auth0.client.getSession();
     const isAuthenticated = !!session;
   
     res.send(`
       <html>
         <head>
           <title>Auth0 Express (Beta) Quickstart</title>
           <style>
             body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; }
             a { color: #0066cc; text-decoration: none; margin-right: 1rem; }
             .status { padding: 1rem; border-radius: 4px; margin: 1rem 0; }
             .logged-in { background: #d4edda; color: #155724; }
             .logged-out { background: #f8d7da; color: #721c24; }
           </style>
         </head>
         <body>
           <h1>Auth0 Express (Beta) Quickstart</h1>
           <div class="status ${isAuthenticated ? 'logged-in' : 'logged-out'}">
             ${isAuthenticated ? '✓ You are logged in' : '✗ You are logged out'}
           </div>
           <nav>
             ${isAuthenticated
               ? '<a href="/profile">Profile</a> | <a href="/auth/logout">Logout</a>'
               : '<a href="/auth/login">Login</a>'}
           </nav>
         </body>
       </html>
     `);
   });
   
   // Route de profil protégée — requiresAuth redirige les utilisateurs non authentifiés vers /auth/login
   app.get('/profile', requiresAuth(), async (req, res) => {
     const user = await req.auth0.client.getUser();
   
     res.send(`
       <html>
         <head>
           <title>Profile</title>
           <style>
             body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; }
             pre { background: #f4f4f4; padding: 1rem; border-radius: 4px; overflow-x: auto; }
             img { border-radius: 50%; }
           </style>
         </head>
         <body>
           <h1>User Profile</h1>
           ${user.picture ? `<img src="${user.picture}" alt="Profile" width="80" />` : ''}
           <h2>${user.name || user.nickname || 'User'}</h2>
           <p><strong>Email:</strong> ${user.email || 'N/A'}</p>
           <h3>Full Profile</h3>
           <pre>${JSON.stringify(user, null, 2)}</pre>
           <a href="/">← Back</a> | <a href="/auth/logout">Logout</a>
         </body>
       </html>
     `);
   });
   
   app.listen(port, () => {
     console.log(`Server running at http://localhost:${port}`);
   });
   

   Points clés :

   • requiresAuth() de @auth0/auth0-express protège les routes — les utilisateurs non authentifiés sont redirigés vers /auth/login
   • req.auth0.client.getUser() renvoie le profil de l’utilisateur authentifié
   • Le lien de login pointe vers /auth/login et celui de logout, vers /auth/logout — les deux sont automatiquement montés
6. Exécutez votre application

   Démarrez le serveur de développement :

   npm run dev
   

   Ouvrez votre navigateur à l’adresse http://localhost:3000.

   Checkpoint

   Vous devriez maintenant disposer d’un Login flow Auth0 entièrement fonctionnel. Lorsque vous :

   1. Cliquez sur Login — vous êtes redirigé vers la page Universal Login d’Auth0
   2. Terminez l’authentification — vous êtes redirigé vers votre application à /auth/callback
   3. Accédez à /profile — vous voyez les renseignements sur l’utilisateur
   4. Cliquez sur Logout — votre session est supprimée et vous êtes déconnecté d’Auth0

---

​

Utilisation avancée

Appeler une API protégée avec un jeton d’accès

Configurez le SDK avec une audience afin de demander un jeton d’accès pour votre API, puis récupérez-le avec getAccessToken().

Ajoutez l’audience de votre API au fichier .env :

.env

AUTH0_AUDIENCE=https://your-api.example.com

Récupérez le jeton dans une route protégée :

server.js

app.get('/api-data', requiresAuth(), async (req, res) => {
  const { accessToken } = await req.auth0.client.getAccessToken();

  const response = await fetch('https://your-api.example.com/data', {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  res.json(await response.json());
});

Le SDK actualise automatiquement le jeton d’accès lorsqu’il expire.

Utiliser une connexion personnalisée avec returnTo

Redirigez les utilisateurs vers une page précise après leur connexion à l’aide du paramètre returnTo :

server.js

app.get('/dashboard', async (req, res) => {
  const session = await req.auth0.client.getSession();
  if (!session) {
    return res.redirect('/auth/login?returnTo=/dashboard');
  }
  res.send('Welcome to your dashboard!');
});

Middleware d’autorisation personnalisé

Créez votre propre logique d’autorisation à partir de la session :

server.js

async function requireAdmin(req, res, next) {
  const user = await req.auth0.client.getUser();
  if (!user) return res.redirect('/auth/login');
  if (!user['https://myapp.com/roles']?.includes('admin')) {
    return res.status(403).send('Forbidden');
  }
  next();
}

app.get('/admin', requireAdmin, (req, res) => {
  res.send('Admin panel');
});

La revendication https://myapp.com/roles n’est pas incluse par défaut ; ajoutez-la au jeton d’ID à l’aide d’une Action et utilisez un nom de revendication avec espace de noms.

---

​

Dépannage

'req.auth0 est undefined'

Cause : Le middleware createAuth0() n’a pas été enregistré avant le gestionnaire de votre route.

Correctif : Assurez-vous que app.use(createAuth0()) figure avant toute route qui accède à req.auth0 :

// ✅ Correct
app.use(createAuth0());
app.get('/profile', requiresAuth(), handler);

// ❌ Incorrect
app.get('/profile', requiresAuth(), handler);
app.use(createAuth0());

Erreur de non-correspondance de l’URL de rappel

Cause : L’URL de rappel définie dans les paramètres de votre application Auth0 ne correspond pas à http://localhost:3000/auth/callback.

Correctif :

1. Accédez à Auth0 Dashboard → Applications > Applications → votre application → Paramètres de l’application
2. Ajoutez http://localhost:3000/auth/callback aux URL de rappel autorisées
3. Ajoutez http://localhost:3000 aux URL de logout autorisées
4. Cliquez sur Enregistrer les modifications

Remarque : le SDK @auth0/auth0-express utilise /auth/callback (et non /callback, comme express-openid-connect).

Variables d’environnement non chargées

Cause : dotenv/config n’est pas importé ou le fichier .env ne contient pas les valeurs requises.

Correctif :

1. Assurez-vous que import 'dotenv/config' (ou require('dotenv').config()) se trouve au début de votre fichier d’entrée
2. Vérifiez que votre fichier .env contient les cinq variables requises : AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, APP_BASE_URL, AUTH0_SESSION_SECRET
3. Déboguez les valeurs manquantes :

console.log({
  domain: !!process.env.AUTH0_DOMAIN,
  clientId: !!process.env.AUTH0_CLIENT_ID,
  clientSecret: !!process.env.AUTH0_CLIENT_SECRET,
  appBaseUrl: !!process.env.APP_BASE_URL,
  sessionSecret: !!process.env.AUTH0_SESSION_SECRET,
});

Erreur « Invalid state » après la connexion

Cause : Le cookie de session n’est pas correctement défini ou vous accédez directement à l’URL de rappel.

Correctif :

1. Assurez-vous que APP_BASE_URL correspond à l’URL utilisée dans votre navigateur (p. ex., http://localhost:3000)
2. Effacez les cookies de votre navigateur et réessayez
3. En production, assurez-vous d’utiliser HTTPS

---

​

Prochaines étapes

• Protéger une API Express — Utilisez @auth0/auth0-express-api pour valider les jetons d’accès dans votre API
• Ajouter l’autorisation — Mettez en œuvre le contrôle d’accès basé sur les rôles
• Personnaliser Universal Login — Personnalisez l’image de marque de votre expérience de connexion
• Ajouter des connexions sociales — Activez Google, GitHub et d’autres connexions sociales
• Mettre en œuvre l’AMF — Ajoutez l’authentification multifacteur

---

​

Ressources

• auth0/auth0-express GitHub — Code source et exemples
• Auth0 Community — Obtenez de l’aide auprès de la communauté