Comment implémenter l'authentification dans Next.js avec Auto0

À propos de l'auteur

Ingénieur système de Buenos Aires, Argentine, avec plus de 15 ans d'expérience dans le développement de logiciels. Développeur Full Stack. Ambassadeur Auth0. GitKraken…
En savoir plus sur
Facundo
↬

L '«authentification» consiste à valider qu'un utilisateur est bien celui qu'il prétend être. Pour ce faire, nous implémentons généralement un système d’identification, comme un utilisateur / mot de passe, des questions de sécurité ou même la reconnaissance faciale.

«L’autorisation» détermine ce qu’un utilisateur peut (ou ne peut pas) faire. Si nous devons gérer l'authentification et l'autorisation dans notre application Web, nous aurons besoin d'une plate-forme ou d'un module de sécurité. Nous pouvons développer notre propre plateforme, la mettre en œuvre et la maintenir. Ou nous pouvons tirer parti des plates-formes d'authentification et d'autorisation existantes sur le marché qui sont proposées sous forme de services.

Lorsque nous évaluons s'il est préférable pour nous de créer notre propre plate-forme ou d'utiliser un service tiers, il y a certaines choses que nous devrions considérer:

• La conception et la création de services d'authentification ne sont pas notre compétence principale. Il y a des gens qui travaillent spécialement sur des sujets de sécurité qui peuvent créer des plates-formes meilleures et plus sécurisées que nous;
• Nous pouvons gagner du temps en nous appuyant sur une plate-forme d'authentification existante et la consacrer à ajouter de la valeur aux produits et services qui nous intéressent;
• ] Nous ne stockons pas d'informations sensibles dans nos bases de données. Nous les séparons de toutes les données impliquées dans nos applications.
• Les outils proposés par les services tiers ont amélioré la convivialité et les performances, ce qui nous permet d'administrer plus facilement les utilisateurs de notre application.

Compte tenu de ces facteurs, nous peut dire que s'appuyer sur des plates-formes d'authentification tierces peut être plus facile, moins coûteux et encore plus sûr que de créer notre propre module de sécurité.

Dans cet article, nous verrons comment implémenter l'authentification et l'autorisation dans nos applications Next.js en utilisant l'un des produits existants sur le marché: Auth0.

Qu'est-ce que Auth0?

Il vous permet d'ajouter de la sécurité aux applications développées à l'aide de n'importe quel langage ou technologie de programmation.

«Auth0 est une solution flexible et sans accès. pour ajouter des services d'authentification et d'autorisation à vos applications. »

– Dan Arias auth0.com

Auth0 possède plusieurs fonctionnalités intéressantes, telles que:

• Single Sign-On : une fois que vous vous connectez à une application lication qui utilise Auth0, vous n’avez pas à saisir à nouveau vos informations d’identification lorsque vous en saisissez une autre qui l’utilise également. Vous serez automatiquement connecté à chacun d'eux;
• Connexion sociale : authentifiez-vous en utilisant votre profil de réseau social préféré;
• Multi-Factor Authentication ;
• Plusieurs protocoles standard sont autorisés, tels que OpenID Connect, JSON Web Token ou OAuth 2.0;
• Outils de reporting et d'analyse .

Il existe un plan gratuit que vous pouvez utiliser pour commencez à sécuriser vos applications Web, couvrant jusqu'à 7 000 utilisateurs actifs par mois. Vous commencerez à payer lorsque le nombre d'utilisateurs augmentera.

Une autre chose intéressante à propos d'Auth0 est que nous avons un Next.js SDK disponible à utiliser dans notre application. Avec cette bibliothèque, créée spécialement pour Next.js, nous pouvons facilement nous connecter à l'API Auth0.

SDK Auth0 pour Next.js

Comme nous l'avons mentionné précédemment, Auth0 a créé (et maintient) un SDK axé Next.js, parmi d'autres SDK disponibles pour se connecter à l'API en utilisant divers langages de programmation. Nous avons juste besoin de télécharger le package NPM de configurer quelques détails sur notre compte Auth0 et notre connexion, et nous sommes prêts à partir.

Ce SDK nous donne des outils pour implémenter l'authentification et l'autorisation à la fois côté client et les méthodes côté serveur, en utilisant les routes API sur le backend et React Context avec React Hooks sur le frontend.

Voyons comment certaines d'entre elles fonctionnent dans un exemple d'application Next.js.

Exemple d'application Next.js utilisant Auth0

Revenons à notre exemple précédent de plate-forme vidéo et créons une petite application pour montrer comment utiliser le SDK Auth0 Next.js. Nous mettrons en place la connexion universelle d'Auth0 . Nous aurons quelques URL de vidéo YouTube. Ils seront cachés sous une plateforme d'authentification. Seuls les utilisateurs enregistrés pourront voir la liste des vidéos via notre application Web.

Remarque : Cet article se concentre sur la configuration et l'utilisation d'Auth0 dans votre application Next.js. Nous n'entrerons pas dans les détails comme le style CSS ou l'utilisation de la base de données. Si vous voulez voir le code complet de l'exemple d'application, vous pouvez accéder à ce référentiel GitHub .

Créer un compte Auth0 et configurer les détails de l'application

Tout d'abord, nous devons créer un Auth0 compte en utilisant la page d'inscription .

Après cela, passons à la Tableau de bord Auth0 . Accédez à Applications et créez une nouvelle application de type [“Regular Web Applications”].

En faisant cela, nous configurons l'URL vers laquelle nous voulons rediriger les utilisateurs après leur connexion à notre site (Callback), et l'URL où nous redirigeons les utilisateurs après leur déconnexion (Déconnexion). Nous devrions ajouter les URL de production lorsque nous déployons la version finale de notre application sur le serveur d'hébergement.

Auth0 Dashboard a de nombreuses configurations et personnalisations que nous pouvons appliquer à nos projets. Nous pouvons changer le type d'authentification que nous utilisons, la page de connexion / inscription, les données que nous demandons pour les utilisateurs, activer / désactiver les nouvelles inscriptions, configurer les bases de données des utilisateurs, etc.

Créer l'application Next.js [19659033] Pour créer une toute nouvelle application Next.js, nous utiliserons create-next-app qui configure tout automatiquement pour vous. Pour créer le projet, exécutez:

 npx create-next-app [name-of-the-app]

Ou

 yarn create next-app [name-of-the-app]

Pour démarrer le serveur de développement localement et voir le site que vous venez de créer dans votre navigateur, accédez au nouveau dossier que vous avez créé:

 cd [name-of-the-app]

Et exécutez:

 npm run dev

Ou

 fil dev

Installer et configurer le SDK Auth0 Next.js

Installons le SDK Auth0 Next.js dans notre application:

 npm install @ auth0 / nextjs-auth0

Ou

 yarn add @ auth0 / nextjs-auth0

Maintenant, dans notre fichier env.local (ou le menu des variables d'environnement de notre plateforme d'hébergement), ajoutons ces variables:

 AUTH0_SECRET = "[A 32 characters secret used to encrypt the cookies]"
AUTH0_BASE_URL = "http: // localhost: 3000"
AUTH0_ISSUER_BASE_URL = "https: // [Your tenant domain. Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_ID = "[Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_SECRET = "[Can be found in the Auth0 dashboard under settings]"

Si vous voulez plus d'options de configuration, vous pouvez consulter la documentation

Créer la route API dynamique

Next.js offre un moyen de créer des API sans serveur: API Routes . Avec cette fonctionnalité, nous pouvons créer du code qui sera exécuté dans chaque demande d'utilisateur à nos routes. Nous pouvons définir des routes fixes, comme /api/index.js . Mais nous pouvons aussi avoir routes API dynamiques avec des paramètres que nous pouvons utiliser dans notre code de routes API, comme / api / blog / [postId] .js .

Créons le fichier / pages / api / auth / [...auth0] .js qui sera une route API dynamique. À l'intérieur du fichier, importons la méthode handleAuth du SDK Auth0 et exportons le résultat:

 import {handleAuth} from '@ auth0 / nextjs-auth0';

export default handleAuth (); 

Cela créera et gérera les routes suivantes:

• / api / auth / login
  Pour se connecter ou s'inscrire avec Auth0.
• / api / auth / logout
  Pour déconnecter l'utilisateur.
• / api / auth / callback
  Pour rediriger l'utilisateur après une connexion réussie.
• / api / auth / me [19659073] Pour obtenir les informations de profil utilisateur.

Et ce serait la partie côté serveur de notre application. Si nous voulons nous connecter à notre application ou créer un nouveau compte, nous devons visiter http: // localhost: 3000 / api / auth / login . Nous devrions ajouter un lien vers cette route dans notre application. Idem pour la déconnexion de notre site: Ajouter un lien vers http: // localhost: 3000 / api / auth / logout .

Ajouter le composant UserProvider

Pour gérer l'état d'authentification de l'utilisateur sur le frontend de notre application Web, nous pouvons utiliser le composant UserProvider React, disponible sur Auth0 Next.js SDK. le composant utilise React Context en interne.

Si vous souhaitez accéder à l'état d'authentification utilisateur sur un composant, vous devez l'encapsuler avec un composant UserProvider .

Si nous voulons accéder à toutes les pages de notre application, nous devons ajouter le composant au fichier pages / _app.js . pages / _app.js remplace le composant React App . C'est une fonctionnalité que Next.js expose pour personnaliser notre application. Pour en savoir plus cliquez ici .

 import React de 'react';
import {UserProvider} de '@ auth0 / nextjs-auth0';

Exporter l'application de la fonction par défaut ({Component, pageProps}) {
  revenir (
    
      
    
  );
} 

Nous avons un hook React useUser qui accède à l'état d'authentification exposé par UserProvider . On peut l'utiliser, par exemple, pour créer une sorte de page d'accueil. Modifions le code du fichier pages / index.js :

 import {useUser} from "@ auth0 / nextjs-auth0";

export default () => {
 const {utilisateur, erreur, isLoading} = useUser ();

 if (isLoading) return 
 Chargement ... 
;

 if (erreur) return 
 {error.message} 
;

 if (utilisateur) {
   revenir (
     

       
 {user.name} 
       
 {user.email} 
        Logout 
     
   );
 }
 retour  Connexion ;
}; 

L'objet user contient des informations relatives à l'identité de l'utilisateur. Si la personne visitant la page n'est pas connectée (nous n'avons pas d'objet user disponible), nous afficherons un lien vers la page de connexion. Si l'utilisateur est déjà authentifié, nous afficherons les propriétés user.name et user.email sur la page, ainsi qu'un lien de déconnexion.

Créons un fichier videos.js, avec une liste de trois URL de vidéo YouTube qui ne seront visibles que pour les personnes enregistrées. Pour autoriser uniquement les utilisateurs connectés à voir cette page, nous utiliserons la méthode withPageAuthRequired du SDK.

 import {withPageAuthRequired} from "@ auth0 / nextjs-auth0";

export default () => {
 revenir (
   

      Musique LoFi 
      Musique jazz 
      Musique pour piano 
   
 );
};

export const getServerSideProps = withPageAuthRequired (); 

Tenez compte du fait que notre application Web permet à toute personne de créer un compte, en utilisant la plateforme Auth0. L'utilisateur peut également réutiliser un compte Auth0 existant, car nous mettons en œuvre la connexion universelle.

Nous pouvons créer notre propre page d'inscription pour demander plus de détails sur l'utilisateur ou ajouter des informations de paiement afin de le facturer mensuellement pour notre service. Nous pouvons également utiliser les méthodes exposées dans le SDK pour gérer les autorisations de manière automatique.

Conclusion

Dans cet article, nous avons vu comment sécuriser nos applications Next.js en utilisant Auth0, une plateforme d'authentification et d'autorisation. Nous évaluons les avantages de l'utilisation d'un service tiers pour l'authentification de nos applications Web par rapport à la création de notre propre plate-forme de sécurité. Nous avons créé un exemple d'application Next.js et l'avons sécurisé à l'aide du plan gratuit Auth0 et du SDK Auth0 Next.js.

Si vous souhaitez déployer un exemple d'application Auth0 sur Vercel vous pouvez le faire ] ici .

Lectures et ressources supplémentaires

• Auth0 Next.js SDK GitHub repository, Auth0, GitHub
• « The Ultimate Guide To Next.js Authentication With Auth0 », Sandrino Di Mattia, Blog Auth0
  Dans notre exemple d'application, nous avons utilisé le rendu côté serveur, avec des routes API et une approche sans serveur. Si vous utilisez Next.js pour un site statique ou un serveur personnalisé pour héberger votre application, cet article explique comment implémenter l'authentification.
• « New Universal Login Experience , ”Auth0 Universal Login, Auth0 Docs
• “ Centralized Universal Login vs. Embedded Login ”Auth0 Universal Login, Auth0 Docs

(vf, yk, il)