Cette bibliothèque vous permet d'intégrer de manière transparente l'authentification Google dans votre application Next.js, éliminant ainsi le besoin de la développer à partir de zéro.

L'intégration d'un système d'authentification sécurisé est une étape de développement cruciale qui fournit non seulement un environnement sûr aux utilisateurs, mais qui inspire également la confiance dans votre produit. Ce système garantit que leurs données sont protégées et que seules les personnes autorisées peuvent accéder à l'application.

Construire une authentification sécurisée à partir de zéro peut être un processus long qui nécessite une compréhension des protocoles et des processus d'authentification, en particulier lors de la gestion de différentes authentifications fournisseurs.

En utilisant NextAuth, vous pouvez vous concentrer sur la création des fonctionnalités de base. Lisez la suite pour savoir comment intégrer la connexion sociale Google dans votre application à l'aide de NextAuth.

Comment fonctionne NextAuth

instagram viewer

NextAuth.js est une bibliothèque d'authentification open source qui simplifie le processus d'ajout Authentification et autorisation fonctionnalité aux applications Next.js ainsi que la personnalisation des workflows d'authentification. Il fournit une gamme de fonctionnalités telles que la messagerie électronique, l'authentification sans mot de passe et la prise en charge de divers fournisseurs d'authentification tels que Google, GitHub, etc.

À un niveau élevé, NextAuth agit comme un middleware, facilitant le processus d'authentification entre votre application et le fournisseur. Sous le capot, lorsqu'un utilisateur tente de se connecter, il est redirigé vers la page de connexion de Google. Une fois l'authentification réussie, Google renvoie une charge utile qui inclut les données de l'utilisateur, telles que son nom et son adresse e-mail. Ces données sont utilisées pour autoriser l'accès à l'application et à ses ressources.

À l'aide des données utiles, NextAuth crée une session pour chaque utilisateur authentifié et stocke le jeton de session dans un cookie HTTP sécurisé uniquement. Le jeton de session est utilisé pour vérifier l'identité de l'utilisateur et conserver son statut d'authentification. Ce processus s'applique également à d'autres fournisseurs avec de légères variations dans la mise en œuvre.

Enregistrez votre application Next.js sur Google Developer Console

NextAuth prend en charge le service d'authentification de Google. Cependant, pour que votre application interagisse avec les API Google et permette aux utilisateurs de s'authentifier avec leurs identifiants Google, vous devrez enregistrer votre application sur la console développeur de Google et obtenir un identité du client et Clé secrète du client.

Pour ce faire, accédez à Console de développeur Google. Ensuite, connectez-vous avec votre compte Google pour accéder à la console. Une fois connecté, créez un nouveau projet.

Sur la page de présentation du projet, sélectionnez le API et services onglet de la liste des services dans le volet de menu de gauche et enfin, l'onglet Crédits option.

Clique sur le Créer des identifiants bouton pour générer votre ID client et votre secret client. Ensuite, spécifiez le type d'application à partir des options données, puis fournissez un nom pour votre application.

Ensuite, spécifiez l'URL de la route d'accueil de votre application et enfin spécifiez l'URI de redirection autorisée pour votre application. Pour ce cas, il faudrait http://localhost: 3000/api/auth/rappel/google comme spécifié par les paramètres du fournisseur Google de NextAuth.

Une fois l'inscription réussie, Google vous fournira un ID client et un secret client à utiliser dans votre application.

Configurer l'application NextJS

Pour commencer, créez un projet Next.js localement :

npx créer-next-app prochaine-auth-app

Une fois la configuration terminée, accédez au répertoire de projet nouvellement créé et exécutez cette commande pour lancer le serveur de développement.

npm run dev

Ouvrez votre navigateur et accédez à http://localhost: 3000. Cela devrait être le résultat attendu.

Vous pouvez trouver le code de ce projet dans son Référentiel GitHub.

Configuration du fichier .env

Dans le dossier racine de votre projet, créez un nouveau fichier et nommez-le .env pour contenir votre ID client, votre secret et l'URL de base.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'identité du client'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'secret'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

L'URL NextAUTH est utilisée pour spécifier l'URL de base de votre application, qui est utilisée pour rediriger les utilisateurs une fois l'authentification terminée.

Intégrez NextAuth dans votre application Next.js

Tout d'abord, installez la bibliothèque de NextAuth dans votre projet.

npm installer la prochaine authentification

Ensuite, dans le /pages répertoire, créez un nouveau dossier et nommez-le API. Changez le répertoire pour le API dossier et créez un autre dossier appelé auth. Dans le dossier auth, ajoutez un nouveau fichier et nommez-le [...nextauth].js et ajoutez les lignes de code suivantes.

importer Auth Suivant depuis"next-auth/next";
importer Fournisseur Google depuis"next-auth/fournisseurs/google";
exporterdéfaut AuthSuiv({
 fournisseurs:[
 FournisseurGoogle({
 ID client: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Ce code configure Google en tant que fournisseur d'authentification. La fonction NextAuth définit l'objet de configuration du fournisseur Google qui comprend deux propriétés: un ID client et un secret client qui initialise le fournisseur.

Ensuite, ouvrez le pages/_app.js fichier et apportez les modifications suivantes au code.

importer'../styles/globals.css'
importer { Fournisseur de session } depuis"next-auth/react"
fonctionMonApp({ Composant, pageProps: { session, ...pageProps } }) {
retour (


 </SessionProvider>
 )
}
exporterdéfaut MonApp

NextAuth's Fournisseur de session Le composant fournit une fonctionnalité de gestion de l'état d'authentification à l'application Next.js. Il faut un session prop qui contient les données de session d'authentification renvoyées par l'API de Google, y compris les détails de l'utilisateur tels que son identifiant, son adresse e-mail et son jeton d'accès.

En enveloppant le MonApp composant avec le composant SessionProvider, l'objet de session d'authentification avec les détails de l'utilisateur est mis à disposition dans toute l'application, permettant à l'application de persister et d'afficher les pages en fonction de leur état d'authentification.

Configurer le fichier index.js

Ouvrez le pages/index.js fichier, supprimez le code passe-partout et ajoutez le code ci-dessous pour créer un bouton de connexion qui dirige les utilisateurs vers une page de connexion.

importer Diriger depuis'suivant/tête'
importer modes depuis'../styles/Accueil.module.css'
importer { useRouter } depuis'suivant/routeur';
exporterdéfautfonctionMaison() {
constante routeur = useRouter();

retour (





Créer l'application suivante<<span>/title></span><br> <meta name="<span">"description" content=<span>"Généré par créer l'application suivante"</span> /> <br> <lien rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Bienvenue sur <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> Commencez par vous connecter <span>dans</span>{<span>' ' </span>}<br> <code classname="{styles.code}"><span>avec</span> votre compte Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Connexion<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></code></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Ce code utilise le hook Next.js <strong>useRouter</strong> pour gérer le routage au sein de l'application en définissant un objet routeur. Lorsque le bouton de connexion est cliqué, la fonction de gestionnaire appelle la méthode <strong>router.push</strong> pour rediriger l'utilisateur à la page de connexion.</p> <h3 id="create-a-login-authentication-page">Créer une authentification de connexion Page</h3> <p>Dans le répertoire <strong>pages</strong>, créez un nouveau fichier <strong>Login.js</strong>, puis ajoutez les lignes de code suivantes.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>from</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>from</span> <span>'next /router'</span> ;<br><span>importer</span> les styles <span>depuis</span> <span>'../styles/Login.module.css'</span><p><span>exporter</span> <span>par défaut</span> <span><span>fonction</span> < span>Connexion</span>() {<br> <span>const</span> { <span>données</span>: session } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Créer l'application suivante<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Signé < span>dans <span>comme</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Profil utilisateur<br> <<span>/bouton></span><br> <bouton classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Se déconnecter<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>retour</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Créer l'application suivante<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Vous n'êtes pas connecté <span>dans</span> !!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Signer <span>dans</span><<span>/bouton></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> et <strong>signOut</strong> sont des crochets fournis par <strong>next-auth</strong>. Le crochet <strong>useSession</strong> est utilisé pour accéder à l'objet de session utilisateur en cours une fois qu'un utilisateur se connecte et est authentifié avec succès par Google.</p> <p>Cela permet à Next.js de conserver l'état d'authentification et d'afficher les détails de l'utilisateur du côté client de l'application, dans ce cas, le email.</p> <p>De plus, en utilisant l'objet de session, vous pouvez facilement créer des profils d'utilisateurs personnalisés pour votre application et stocker les données dans une base de données telle comme PostgreSQL. Vous pouvez <span>connecter une base de données PostgreSQL avec votre application Next.js à l'aide de Prisma</span>.</p> <p>Le crochet de déconnexion permet à un utilisateur de se déconnecter de l'application. Ce hook supprimera l'objet de session créé lors du processus de connexion et l'utilisateur sera déconnecté.</p> <p>Allez-y et lancez le serveur de développement pour mettez à jour les modifications et accédez à votre application Next.js exécutée sur le navigateur pour tester la fonctionnalité d'authentification.</p> <pre> <code>npm run dev</code> </pre> <p>En outre, vous pouvez <span>utiliser Tailwind CSS avec votre application Next.js</span> pour styliser les modèles d'authentification.</p> <h2 id="authentication-using-nextauth"> Authentification à l'aide de NextAuth  h2> </h2>
<p>NextAuth prend en charge plusieurs services d'authentification qui peuvent facilement être intégrés dans vos applications Next.js pour gérer le côté client authentification.</p> <p>De plus, vous pouvez intégrer une base de données pour stocker les données de vos utilisateurs et le jeton d'accès pour implémenter côté serveur l'authentification pour les demandes d'authentification ultérieures puisque NextAuth prend en charge différentes intégrations de base de données.</p> </button>
</h2>
</div>
</h1>
</div></code></p></bouton></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></lien>