Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

L'authentification est un élément clé du développement d'applications. Il aide à protéger les données des utilisateurs et à prévenir les activités malveillantes. En termes simples, il détermine la crédibilité de l'identité d'un utilisateur, garantissant que seuls les utilisateurs autorisés peuvent accéder à une application et à ses ressources.

La création d'un système d'authentification personnalisé peut être une tâche fastidieuse, et c'est là que NextAuth.js est utile. Il fournit une prise en charge de l'authentification sécurisée pour les applications créées avec le framework Next.js.

Qu'est-ce que NextAuth.js ?

NextAuth.js est une bibliothèque légère open source qui fournit Authentification et autorisation prise en charge des applications Next.js. Il permet aux développeurs de configurer rapidement et facilement l'authentification et l'autorisation pour leurs applications Next.js. Il fournit des fonctionnalités telles que l'authentification avec plusieurs fournisseurs, la messagerie électronique et l'authentification sans mot de passe.

instagram viewer

Comment fonctionne NextAuth.js dans l'authentification ?

La solution d'authentification de NextAuth.js fournit une API côté client que vous pouvez intégrer dans votre application Next.js. Vous pouvez l'utiliser pour authentifier les utilisateurs auprès de différents fournisseurs de connexion avec lesquels ils ont créé des comptes.

Sous le capot, les utilisateurs sont redirigés vers la page de connexion d'un fournisseur. Une fois l'authentification réussie, le fournisseur renvoie les données de session qui contiennent la charge utile de l'utilisateur. Cette charge utile peut alors autoriser l'accès à l'application et à ses ressources.

Nouvelles mises à jour de fonctionnalités dans NextAuth.js (v4)

En décembre 2022, NextAuth.js a publié sa quatrième version. Cette version a été améliorée par rapport à sa version précédente, v3, avec de nouvelles mises à jour et modifications. Les changements se concentrent principalement sur l'amélioration de l'utilisation de la bibliothèque dans le processus d'authentification.

1. Mises à jour du hook useSession

Vous pouvez utiliser le crochet useSession pour vérifier si un utilisateur est connecté ou non. Dans cette nouvelle version, le crochet useSession renvoie un objet qui offre un moyen plus simple de tester les états, grâce à l'ajout de l'option status. Voir le code ci-dessous :

importer { useSession } depuis"next-auth/react"
exporterdéfautfonctionComposant() {
constante { données: session, état } = useSession()


si (statut "authentifié") { 
retour<p>Connecté en tant que {session.user.email}p>
 }
retour<p> Pas connecté p>
}

2. Le contexte SessionProvider devient obligatoire

La nouvelle version quatre rend obligatoire l'utilisation du contexte SessionProvider. Cela signifie que vous devrez envelopper votre application avec le fournisseur useSession. NextAuth.js recommande d'encapsuler votre application dans le _app.jsx déposer.

De plus, la méthode clientMaxAge a été remplacée par refetchInterval. Cela facilitera la récupération périodique de la session en arrière-plan.

importer { Fournisseur de session } depuis"next-auth/react"
exporterdéfautfonctionApplication({
 Composant, pageProps: { session, ...pageProps }, 
}) {
retour ( 
<Fournisseur de sessionsession={session}refetchInterval={5 * 60}>
<Composant {...pageAccessoires} />Fournisseur de session>
 )
}

3. Importer des fournisseurs individuellement

NextAuth.js fournit plusieurs services de fournisseur que vous pouvez utiliser pour connecter un utilisateur. Ils comprennent:

  • Utilisation de fournisseurs OAuth intégrés (par exemple, GitHub, Google).
  • Utilisation du fournisseur de messagerie.

Dans cette nouvelle version, vous devez importer chaque fournisseur individuellement.

importer Fournisseur Google depuis"next-auth/fournisseurs/google"
importer Auth0Provider depuis"next-auth/fournisseurs/auth0";

4. Autres modifications mineures

  • L'importation côté client a été renommée en next-auth/react à partir de next-auth/client.
  • Modifications des arguments des méthodes de rappel: 
    connexion({ utilisateur, compte, profil, e-mail, informations d'identification })
    session({ session, jeton, utilisateur })
    jwt({ token, user, account, profile, isNewUser })

Premiers pas avec NextAuth.js dans l'authentification

Pour intégrer NextAuth.js dans vos applications Next.js, suivez les étapes ci-dessous :

  1. Créez une application Next.js en exécutant cette commande: npx créer-prochaine-application
  2. Courir npm installer la prochaine authentification dans votre terminal pour installer NextAuth.js dans votre application Next.js.
  3. Visiter le NextAuth.js documentation officielle et sélectionnez votre ou vos fournisseurs préférés dans la liste de ceux pris en charge. Ensuite, créez un compte dans la console développeur du ou des fournisseurs sélectionnés et enregistrez votre application Next.js.
  4. Dans la console développeur du/des fournisseur(s) sélectionné(s), spécifiez le URL de la route d'accueil et le URL de redirection de rappel, enregistrez les modifications et copiez le Identité du client et Clé secrète du client.
  5. Dans le répertoire racine de votre application Next.js, créez un fichier .env pour contenir le identité du client et Clé secrète du client.
  6. Enfin, dans le répertoire /pages/api, créez un nouveau dossier appelé authentification. Dans le dossier auth, créez un nouveau fichier et nommez-le [...nextauth].js. Dans le fichier créé, ajoutez le code ci-dessous. Le code montre l'API côté client NextAuth.js utilisant un fournisseur Google: 
importer Fournisseur Google depuis"next-auth/fournisseurs/google";
fournisseurs: [
 FournisseurGoogle({
identité du client: processus.env.GOOGLE_CLIENT_ID,
clientSecret: processus.env.GOOGLE_CLIENT_SECRET
 })
]

Vous pouvez maintenant continuer et créer une page d'authentification de connexion. Voici un rendu DOM pour un composant de connexion :

importer Réagir depuis'réagir';
importer { useSession, signIn, signOut } depuis"next-auth/react"
exporterdéfautfonctionComposant() {
constante { données: session } = useSession()


 si (séance) {
retour (
<>
<p> Connecté en tant que {session.user.email} p>
<boutonsur clic={() => déconnexion()}>Déconnexionbouton>

 )
 }
retour (
<>
<p> Pas connecté p>
<boutonsur clic={() => se connecter()}>Se connecterbouton>

 )
}

Le utiliserSession Hook accède à l'objet de session utilisateur en cours. Une fois qu'un utilisateur se connecte et est authentifié par Google, un objet de session avec la charge utile de l'utilisateur est renvoyé. Cela permet à Next.js de restituer les détails de l'utilisateur du côté client de l'application, dans ce cas l'e-mail.

Systèmes d'authentification personnalisés vs. Solutions prêtes à l'emploi telles que NextAuth.js

Choisir entre construire un système d'authentification personnalisé et intégrer une authentification prête à l'emploi solution telle que NextAuth.js, il est important de prendre en compte le coût, la complexité et la sécurité de chaque solution.

Si vous disposez des ressources et de l'expertise nécessaires pour développer un système d'authentification personnalisé, cela peut être la meilleure approche pour vous. Toutefois, si vous recherchez une solution prête à l'emploi, facile à mettre en œuvre, sécurisée et rentable, NextAuth.js peut être un bon choix à envisager. En fin de compte, le choix dépendra de vos besoins et de vos préférences.