Comment implémenter l’authentification Google dans Next avec NextAuth

Cet article montre comment intégrer l’authentification unique à l’aide du protocole OAuth dans une application Next.js via le module NextAuth avec l’authentification Google.

NextAuth.js permet aux développeurs d’intégrer et de gérer facilement des solutions d’authentification éprouvées dans les applications Next.js, en prenant en charge les besoins d’authentification simples et complexes.

Cet article explique comment incorporer l’authentification unique à l’aide du protocole OAuth de plus en plus populaire dans une application Next.js à l’aide du module NextAuth. Bien qu’il existe de nombreux fournisseurs d’authentification pris en charge par NextAuth pour l’intégration dans nos applications, nous utiliserons Google comme fournisseur d’authentification dans ce cas.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Un compte Google
• Une compréhension de base du framework Next.js et de l’une de ses fonctionnalités principales, les routes d’API
• Un éditeur de code

Configuration du projet

Pour commencer, créez une application Next.js de base dans n’importe quel répertoire de votre choix (dans notre cas, nous en utiliserons une appelée my-app). Ouvrez votre terminal et insérez la commande suivante :

npx create-next-app my-app

Si tout est fait correctement, le contenu du répertoire de travail devrait ressembler à ceci.

Ensuite, installons Next-Auth, la seule dépendance dont nous aurons besoin. Entrez la commande suivante dans le terminal :

npm install next-auth

Ensuite, nous devons créer une route API pour utiliser le package NextAuth dans notre application. En supposant que vous vous trouviez dans le dossier pages/api, c’est-à-dire là où se trouvent tous les fichiers de route de l’API, saisissez les commandes suivantes :

mkdir auth
cd auth
touch [...nextauth].js

Nous avons créé le répertoire auth, et à l’intérieur, nous avons créé une route API avec un obligatoire nom appelé […nxtauth].js.

Le flux OAuth

Ensuite, nous examinerons brièvement OAuth Flow. (Si vous connaissez déjà le flux OAuth, vous pouvez sauter cette section.) Il est important de comprendre ce flux car :

• Cela constituera la base de toutes les décisions qui seront prises pour intégrer le protocole OAuth en utilisant next-auth dans notre application.
• Nous pourrons voir clairement quels domaines de ce flux sont entièrement gérés pour nous par NextAuth.

Vous trouverez ci-dessous un flux de code d’autorisation OAuth typique pour n’importe quel fournisseur. Dans notre cas, notre diagramme est personnalisé pour Google, mais il s’applique également à tout autre fournisseur. Nous ferons référence à ce diagramme tout au long de ce guide pour mieux renforcer notre compréhension.

En regardant le diagramme ci-dessus, nous devons faire ce qui suit :

• Tout d’abord, nous voyons de nombreux allers-retours HTTP (étapes 3, 5, 6 et 7) effectués par le client (notre application Next.js) vers le serveur d’autorisation et le serveur de ressources. NextAuth fera tout cela pour nous. Mais pour activer notre interface d’application Next.js avec le fournisseur (Google), nous devons l’enregistrer auprès du fournisseur et obtenir des informations d’identification (ID client et secret).
• Une fois que nous avons obtenu nos informations d’identification, nous devons configurer le client. Ici, nous allons configurer notre route API.
• Ensuite, une fois que le client a obtenu les données de l’utilisateur du serveur de ressources (étape 7 ci-dessus), nous devrons gérer la session de l’utilisateur sur notre interface. Encore une fois, NextAuth génère tous les jetons nécessaires pour nous et nous fournit les composants requis à intégrer dans notre interface.
• Enfin, nous devons créer une page simple avec laquelle l’utilisateur peut interagir pour s’authentifier, en commençant le processus, c’est-à-dire à partir de l’étape 1. Ici, nous allons implémenter la fonctionnalité de connexion et de déconnexion et la protection de route essentielle sur notre frontend.

Enregistrement de notre application et obtention des informations d’identification OAuth

Connectez-vous à Google Cloud Console et procédez comme suit :

1. Créez un projet.

2. Nous devons configurer notre écran de consentement OAuth dans la section API et services. Cela implique de choisir un nom d’application, de créer un lien vers la page d’accueil de l’application Next.js, de définir un logo, etc., comme indiqué ci-dessous :

Dans la liste déroulante du type d’application, choisissez Application Web. Sélectionnez l’origine autorisée où le flux OAuth peut commencer (c’est-à-dire, où l’étape 1 peut commencer). Nous l’avons défini sur l’origine où notre application Next.js s’exécute localement, qui est localhost.

Note: Hormis l’hôte local, qui est une exception, une origine autorisée doit fonctionner sur HTTPS.

4. Ensuite, configurez l’URL de redirection. Il s’agit de l’URL utilisée à l’étape 5 par le serveur d’autorisation sur notre diagramme OAuth pour émettre notre route API NextJs le jeton d’autorisation. Nous définissons cette URL sur https://localhost:300/api/auth/callback/google. Cette URL invoquera la route API encore à définir dans l’application Next.js. Une fois cela fait, cliquez sur Enregistrer, puis vous obtiendrez votre identifiant client et votre secret, comme indiqué ci-dessous.

Configuration de la route API

Ouvrez le […nextauth.js fichier et insérez le code suivant :

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
export const authOptions = {
 providers: [
  GoogleProvider({
   clientId: process.env.GOOGLE_ID,
   clientSecret: process.env.GOOGLE_SECRET,
  }),
 ],
 session: {
  strategy: 'jwt',
 },
};
export default NextAuth(authOptions);

Dans ce fichier, nous commençons par définir l’objet qui contient les options d’authentification que nous voulons pour l’application. Dans le tableau des fournisseurs, nous configurons le module GoogleProvider où nous transmettons notre ID client et notre secret que nous avons obtenus précédemment, que nous stockons en tant que variables d’environnement. A la racine de votre projet, vous pouvez créer un fichier .env en exécutant cette commande :

touch .env

Ensuite, mettez à jour le fichier avec les éléments suivants :

GOOGLE_ID=<YOUR_CLIENT_ID_HERE>
GOOGLE_SECRET=<YOUR_CLIENT_SECRET_HERE>

La clé facultative suivante dans nos options d’authentification est celle appelée sessionoù nous avons spécifié la propriété de stratégie avec une valeur de jwt. Étant donné que nous n’intégrons aucune base de données pour stocker et gérer la session utilisateur dans notre application, par défaut, la prochaine Auth utilise des jetons JWE (cryptage Web JSON) pour le faire pour nous.

En parlant de JWE, vous vous demandez peut-être d’où viendra le secret utilisé pour signer et chiffrer le jeton. Au cours du développement, NextAuth calcule en interne un hachage de notre objet d’options d’authentification et l’utilise si nous ne spécifions pas nous-mêmes de secret dans les options d’authentification, dans une option session.secret propriété ou en tant que variable d’environnement créée avec la propriété NEXTAUTH_SECRET clé.

En passant, si vous êtes plus familier avec le terme général JWT (jetons Web JSON) et vous souhaitez en savoir plus sur des implémentations spécifiques telles que JWE, Vérifiez ici. De plus, nous n’avons pas besoin de spécifier le session propriété dans nos options d’authentification dans le code ci-dessus avec une valeur de stratégie de jwt pour que cela fonctionne, car c’est la valeur par défaut – nous l’avons fait ici par souci de clarté.

Enfin, nous invoquons et exportons la fonction nextAuth importée du module nextAuth et la passons à l’objet auth options que nous avons défini comme argument. Cette invocation renvoie une fonction de route d’API Next.js traditionnelle configurée avec toutes les bonnes choses fournies avec le module nextAuth.

Gérer la session de l’utilisateur sur le frontend

Ouvrez le _app.js fichier et insérez le code suivant :

function App({ Component, pageProps }) {
 return (
  <SessionProvider session={pageProps.session}>
   <Component {...pageProps} />
  </SessionProvider>
 );
}

export default App;

Ce modèle commun est utilisé pour gérer la session utilisateur dans une application Next.js. On commence par introduire le SessionProvider composant du module next-auth, et dans le corps du composant App, nous l’enveloppons autour du Component soutenir; les Component prop représente la page courante.

Les SessionProvider est également alimenté un prop de session extrait des props de la page actuelle, c’est-à-dire, pageProps.session. Les pageProps.session L’objet est créé par la page actuelle s’il est rendu côté serveur, en d’autres termes, une page qui récupère la session de l’utilisateur à l’aide de getServerSideProps.

const somePage=()=>{
 return <> page data</>
}
export getServersideProps(ctx){
 return {
props:{
 session:"// define logic to get user session here, this will be part of pageProps in _app.js"

  }
 }
}

Notre application n’utilisera pas l’approche côté serveur ; à la place, nous obtiendrons la session des utilisateurs côté client, comme nous le verrons dans la section suivante. Donc, pour notre application, pageProps.session sera toujours indéfini.

Comment implémenter l’authentification Google dans une application NextJS à l’aide de Next Auth

Ouvrez le pages/index.js fichier et mettez à jour son contenu pour qu’il corresponde aux éléments suivants :

import { useSession, signIn, signOut } from 'next-auth/react';
export default function IndexPage() {
  const { data, status } = useSession();
  if (status === 'loading') return <h1> loading... please wait</h1>;
  if (status === 'authenticated') {
    return (
      <div>
        <h1> hi {data.user.name}</h1>
        <img src={data.user.image} alt={data.user.name + ' photo'} />
        <button onClick={signOut}>sign out</button>
      </div>
    );
  }
  return (
    <div>
      <button onClick={() => signIn('google')}>sign in with gooogle</button>
    </div>
  );
}

On commence par introduire le signIn, signOut et useSession crochets. Ensuite, dans le corps du IndexPage composant, nous utilisons le useSession crochet pour obtenir la session utilisateur actuelle ; useSession retourne un objet avec deux propriétés data et status.

Data contient des informations sur l’utilisateur authentifié et la date d’expiration du jeton JWE émis et a la valeur null si l’utilisateur n’est pas authentifié.

Status est une chaîne qui peut être « authentifiée », « non authentifiée » ou « en cours de chargement ». Ensuite, nous rendons différentes pièces d’interface utilisateur en fonction de l’état de la chaîne d’état. Si le statut est en cours de chargement (dans les cas où le useSession hook effectue des appels API à la route API pour valider ou résoudre la session de l’utilisateur), nous rendons un message de chargement.

Une fois authentifiés, nous rendons les données sur l’utilisateur authentifié à partir de l’objet de données. Nous rendons également un bouton qui invoque le signOut lorsque vous cliquez dessus, ce qui déconnectera l’utilisateur. Enfin, lorsque l’utilisateur n’est pas authentifié, nous affichons un bouton qui, lorsqu’il est cliqué, connecte l’utilisateur.

Remarquez que nous avons passé la chaîne du fournisseur, c’est-à-dire « google », comme argument à la fonction de connexion. Ceci est facultatif, car la fonction de connexion peut être déclenchée sans elle, ce qui nous amènera à une page personnalisée créée par nextAuth pour choisir un fournisseur avec lequel se connecter. Cette page ressemble à ça :

Mais nous ne voulons pas visiter la page ci-dessus lorsque nous nous inscrivons, c’est pourquoi nous avons déclenché signIn avec « google » comme paramètre de fournisseur pour ignorer cet écran et passer directement au processus de connexion.

Dans tous les cas, en invoquant le signIn fonction lorsque le bouton est cliqué commencera le OAuth flux de l’étape 1 à l’étape 7, où nextAuth obtient nos données utilisateur.

Mais cela ne s’arrête pas là. Le module nextAuth est basé sur les options spécifiées dans l’objet auth options — dans notre cas, il nous envoie plusieurs jetons et les stocke dans un cookie envoyé au navigateur comme indiqué ci-dessous.

Comme vous l’avez peut-être deviné, le signOut La fonction supprime tous ces jetons et déconnecte l’utilisateur. Pour voir l’application en cours d’exécution, ouvrez votre terminal et insérez la commande suivante :

npm run dev

Conclusion

Avec NextAuth, il est beaucoup plus facile de créer un système d’authentification robuste dans une application Next.js. Dans ce guide, nous nous sommes principalement concentrés sur l’utilisateur OAuth. Le package NextAuth fournit d’autres mécanismes d’authentification vous pouvez explorer pour répondre aux besoins des différents projets sur lesquels nous travaillons.