Nouvelles mises à jour dans NextAuth.js v4 : ce que vous devez savoir
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 une prise en charge de l’authentification et de l’autorisation pour les 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.
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 à 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 :
import { useSession } from "next-auth/react"
export default function Component() {
const { data: session, status } = useSession()
if (status === "authenticated") {
return <p>Signed in as {session.user.email}</p>
}
return <p> Not signed in </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 fichier _app.jsx .
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.
import { SessionProvider } from "next-auth/react"
export default function App({
Component, pageProps: { session,. ..pageProps },
}) {
return (
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} /> </SessionProvider>
)
}
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.
import GoogleProvider from "next-auth/providers/google"
import Auth0Provider from "next-auth/providers/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 :
signIn({ user, account, profile, email, credentials })
session({ session, token, user })
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 :
- Créez une application Next.js en exécutant cette commande : npx create-next-app <app name>
- Exécutez npm install next-auth dans votre terminal pour installer NextAuth.js dans votre application Next.js.
- Visitez la documentation officielle de NextAuth.js 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.
- Dans la console développeur du/des fournisseur(s) sélectionné(s), spécifiez l’ URL de la route d’accueil et l’ URL de redirection de rappel , enregistrez les modifications et copiez le ClientID et le Client Secret .
- Dans le répertoire racine de votre application Next.js, créez un fichier. env pour contenir l’ ID client et le secret client .
- Enfin, dans le répertoire /pages/api, créez un nouveau dossier appelé auth . 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 :
import GoogleProvider from "next-auth/providers/google";
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.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 :
import React from 'react';
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
<p> Signed in as {session.user.email} </p>
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
<p> Not signed in </p>
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Le crochet useSession 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 par rapport aux solutions prêtes à l’emploi telles que NextAuth.js
En choisissant entre la création d’un système d’authentification personnalisé et l’intégration d’une solution d’authentification prête à l’emploi 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.
Laisser un commentaire