Ajouter une connexion à votre application Next.js

Ce guide explique comment intégrer Auth0 à n’importe quelle application Next.js, nouvelle ou existante, à l’aide de la trousse SDK Next.js Auth0. Nous vous recommandons de vous connecter pour suivre ce guide de démarrage rapide avec les exemples configurés pour votre compte.

Configuration d’Auth0

Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.

Configurer une application

Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.

Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.

Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.

Configuration des URL de rappel

Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000/api/auth/callback.

Configuration des URL de déconnexion

Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.

Si vous suivez notre projet à titre d’exemple, définissez ceci sur http://localhost:3000.

Installer la trousse SDK Next.js Auth0

Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Next.js Auth0 :

npm install @auth0/nextjs-auth0

La trousse SDK expose des méthodes et des variables qui vous aident à intégrer Auth0 à votre application Next.js en utilisant les gestionnaires de route sur le système dorsal et le contexte React avec les Crochets React sur le système frontal.

Configuration de la trousse SDK

Dans le répertoire racine de votre projet, ajoutez le fichier .env.local avec les variables d’environnement suivantes :

AUTH0_SECRET : valeur secrète longue utilisée pour chiffrer le témoin de session. Vous pouvez générer une chaîne appropriée en utilisant openssl rand -hex 32 sur la ligne de commande.
AUTH0_BASE_URL : URL de base de votre application.
AUTH0_ISSUER_BASE_URL : URL de votre domaine de locataire Auth0. Si vous utilisez un domaine personnalisé avec Auth0, utilisez la valeur de votre domaine personnalisé au lieu de la valeur indiquée dans l’onglet Settings (Paramètres).
AUTH0_CLIENT_ID : identifiant client de votre application Auth0.
AUTH0_CLIENT_SECRET : secret client de votre application Auth0.

La trousse SDK lira ces valeurs à partir de l’environnement du processus Node.js et se configurera automatiquement.

Ajouter le gestionnaire de route dynamique

Ce guide rapide s’adresse au routeur d’application Next.js. Si vous utilisez le routeur Pages, consultez l’exemple dans le README de la trousse SDK.

Créez un fichier dans app/api/auth/[auth0]/route.js. Il s’agit de votre fichier Route Handler (Gestionnaire de route) avec un Dynamic Route Segment (Segment de route dynamique).

Ensuite, importez la méthode handleAuth de la trousse SDK et appelez-la à partir de l’exportation GET. Cette opération crée les routes suivantes :

/api/auth/login : la route utilisée pour se connecter avec Auth0.
/api/auth/logout : la route utilisée pour déconnecter l’utilisateur.
/api/auth/callback : la route vers laquelle Auth0 redirigera l’utilisateur après une connexion réussie.
/api/auth/me : la route à partir de laquelle le profil utilisateur doit être récupéré.

Ajouter le composant UserProvider

Côté frontal, la trousse SDK utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Pour que cet état soit accessible à toutes vos pages, vous devez remplacer le Root Layout component (composant Disposition racine) et envelopper la balise <body> avec un UserProvider dans le fichier app/layout.jsx.

L’état d’authentification exposé par UserProvider est accessible dans n’importe quel composant client à l’aide de l’appel useUser().

checkpoint.header

Maintenant que vous avez ajouté le gestionnaire de route et UserProvider, exécutez votre application pour vérifier qu’elle ne génère pas d’erreurs liées à Auth0.

Ajouter une connexion à votre application

Les utilisateurs peuvent désormais se connecter à votre application en visitant Gestionnaire de route /api/auth/login fourni par la trousse SDK. Ajoutez un lien qui pointe vers la route de connexion à l’aide d’une balise d’ancrage. En cliquant sur ce lien, vos utilisateurs seront redirigés vers la page de connexion universelle Auth0, où Auth0 pourra les authentifier. Une fois l’authentification réussie, Auth0 redirigera vos utilisateurs vers votre application.

Les prochaines règles de liaison pourraient suggérer d’utiliser le composant Link au lieu d’une balise d’ancrage. Le composant Link est destiné à effectuer des transitions côté client entre les pages. Comme le lien pointe vers une route API et non vers une page, vous devez le conserver en tant que balise d’ancrage.

checkpoint.header

Ajoutez le lien de connexion à votre application.

Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers la page Connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.
Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.

Auth0 active le fournisseur social Google par défaut sur les nouveaux locataires et vous offre des clés de développeur pour tester la connexion avec des fournisseurs d’identité sociale. Toutefois, ces clés de développeur présentent certaines limitations qui peuvent entraîner un comportement différent de votre application. Pour plus de détails sur ce comportement et comment le résoudre, consultez le document Tester les connexions sociales avec des clés de développeur Auth0.

Ajouter une fonctionnalité de déconnexion à votre application

Maintenant que vous pouvez vous connecter à votre application Next.js, vous avez besoin d’un moyen de vous déconnecter. Ajoutez un lien qui pointe vers la route API /api/auth/logout. En cliquant dessus, vous redirigez vos utilisateurs vers votre point de terminaison de déconnexion Auth0 (https://YOUR_DOMAIN/v2/logout), puis vous les redirigez immédiatement vers votre application.

checkpoint.header

Lancez votre application.

Vérifiez que votre application Next.js vous redirige vers la page de connexion universelle Auth0 et que vous pouvez désormais vous connecter ou vous inscrire à l’aide d’un nom d’utilisateur et d’un mot de passe ou d’un fournisseur de réseau social.
Une fois cette opération terminée, vérifiez qu’Auth0 effectue une redirection vers votre application.

Next Steps

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.

This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:

Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
nextjs-auth0 SDK - Explore the SDK used in this tutorial more fully
Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality

Did it work?

Any suggestion or typo?

Edit on GitHub