Comment intégrer l’authentification Google dans les applications Next.js en utilisant NextAuth

L’intégration d’un système d’authentification sécurisé est une étape de développement cruciale qui non seulement fournit un environnement sûr pour les utilisateurs, mais aussi instille 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.

La mise en place d’un système d’authentification sécurisé à partir de la base peut être un processus long qui nécessite une compréhension approfondie des protocoles et des processus d’authentification, en particulier lorsqu’il s’agit d’utiliser différents fournisseurs d’authentification.

En utilisant NextAuth, vous pouvez vous concentrer sur la construction des fonctionnalités de base. Lisez la suite pour apprendre comment intégrer le login social de Google dans votre application en utilisant NextAuth.

Comment fonctionne NextAuth

NextAuth.js est une bibliothèque d’authentification open-source qui simplifie le processus d’ajout de fonctionnalités d’authentification et d’autorisation aux applications Next.js ainsi que la personnalisation des flux de travail d’authentification. Elle fournit une gamme de fonctionnalités telles que le courrier électronique, l’authentification sans mot de passe, et la prise en charge de divers fournisseurs d’authentification tels que Google, GitHub, et plus encore.

A 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. Lorsque l’authentification est réussie, Google renvoie une charge utile contenant les données de l’utilisateur, telles que son nom et son adresse électronique. Ces données sont utilisées pour autoriser l’accès à l’application et à ses ressources.

En utilisant les données de la charge utile, NextAuth crée une session pour chaque utilisateur authentifié et stocke le jeton de session dans un cookie HTTP sécurisé. 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.

Enregistrer 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 de Google et permette aux utilisateurs de s’authentifier avec leurs identifiants Google, vous devrez enregistrer votre application sur la console de développement de Google et obtenir un identifiant ID client et Secret du client.

Pour ce faire, accédez à la Google Developer Console. 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 l’option API et services de la liste des services dans le panneau de menu de gauche et enfin, l’onglet Informations d’identification option.

Cliquez sur le bouton Créer des informations d’identification pour générer votre identifiant et votre secret client. Ensuite, indiquez le type d’application parmi les options proposées et donnez un nom à 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. Dans le cas présent, il s’agit de http://localhost:3000/api/auth/callback/google comme spécifié par les paramètres du fournisseur Google de NextAuth.

Une fois l’inscription réussie, Google vous fournira un identifiant et un secret client que vous pourrez utiliser dans votre application.

Mise en place de l’application NextJS

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

 npx create-next-app next-auth-app 

Une fois l’installation terminée, naviguez jusqu’au répertoire du projet nouvellement créé et exécutez cette commande pour démarrer le serveur de développement.

 npm run dev 

Ouvrez votre navigateur et naviguez vers http://localhost:3000. Ceci devrait être le résultat attendu.

Configuration du fichier .env

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

 NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'client ID'
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égrer NextAuth dans votre application Next.js

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

 npm install next-auth 

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

 import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
    providers:[
        GoogleProvider({
            clientId:process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
            clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
        }),
    ]

}); 

Ce code configure Google comme fournisseur d’authentification. La fonction NextAuth définit l’objet de configuration du fournisseur Google qui contient deux propriétés : un ID client et un secret client qui initialisent le fournisseur.

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

 import '../styles/globals.css'
import { SessionProvider } from "next-auth/react"
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
 return (
   <SessionProvider session={session}>
     <Component {...pageProps} />
   </SessionProvider>
 )
}
export default MyApp  

Le code de NextAuth Fournisseur de session fournit une fonctionnalité de gestion de l’état d’authentification à l’application Next.js. Il prend un session prop qui contient les données de la session d’authentification renvoyées par l’API de Google, y compris les détails de l’utilisateur tels que l’ID, l’e-mail et le jeton d’accès.

En enveloppant l’élément MyApp Avec le composant SessionProvider, l’objet de session d’authentification contenant les détails de l’utilisateur est mis à disposition dans toute l’application, ce qui permet à l’application de persister et de rendre les pages en fonction de leur état d’authentification.

Configurer le fichier index.js

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

 import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by signing in{' '}
          <code className={styles.code}>with your Google Account</code>
          <button className={styles.loginButton}
          onClick={() => router.push('/Login')}> Login</button>
        </p>
      </main>

    </div>
  )
}
 

Ce code utilise Next.js useRouter pour gérer le routage dans l’application en définissant un objet routeur. Lorsque le bouton de connexion est cliqué, la fonction de traitement appelle l’objet router.push pour rediriger l’utilisateur vers la page de connexion.

Créer une page d’authentification

Dans la page pages créer un nouveau fichier Login.jspuis ajoutez les lignes de code suivantes.

 import { useSession, signIn, signOut } from "next-auth/react"
import { useRouter } from 'next/router';
import styles from '../styles/Login.module.css'


export default function Login() {
  const { data: session } = useSession()
  const router = useRouter();
  if (session) {
    return (
      <div className={styles.container}>
        <h1 className="title">Create Next App</h1>
        <div className={styles.content}>
             <h2> Signed in as {session.user.email} <br /></h2> 
              <div classname={styles.btns}>
              <button className={styles.button} onClick={() => router.push('/Profile')}>
                 User Profile
             </button>
              <button className={styles.button} onClick={() => {
                  signOut()
              }}>
                 Sign out
             </button>
              </div>
        </div>
      </div>

    )
  }
  return (
    <div className={styles.container}>
       <h1 className="title">Create Next App</h1>
      <div className={styles.content}>
          <h2> You are not signed in!!</h2>
      <button className={styles.button}
      onClick={() => signIn()}>Sign in</button>
      </div>
    </div>
  )
} 

useSession, s’inscrire, et signOut sont des crochets fournis par next-auth. useSession est utilisé pour accéder à l’objet session de l’utilisateur actuel une fois que l’utilisateur s’est connecté et a été authentifié avec succès par Google.

Cela permet à Next.js de persister l’état d’authentification et de rendre les détails de l’utilisateur sur le côté client de l’application, dans ce cas, l’email.

De plus, en utilisant l’objet session, vous pouvez facilement construire des profils d’utilisateurs personnalisés pour votre application et stocker les données dans une base de données telle que PostgreSQL. Vous pouvez connecter une base de données PostgreSQL à votre application Next.js en utilisant Prisma.

Le hook signOut permet à un utilisateur de se déconnecter de l’application. Ce hook supprimera l’objet de session créé pendant le processus de connexion et l’utilisateur sera déconnecté.

Allez-y et démarrez le serveur de développement pour mettre à jour les changements et dirigez-vous vers votre application Next.js fonctionnant sur le navigateur pour tester la fonctionnalité d’authentification.

 npm run dev 

De plus, vous pouvez utiliser Tailwind CSS avec votre application Next.js pour styliser les modèles d’authentification.

Authentification avec NextAuth

NextAuth supporte plusieurs services d’authentification qui peuvent être facilement intégrés dans vos applications Next.js pour gérer l’authentification côté client.

En outre, vous pouvez intégrer une base de données pour stocker les données de vos utilisateurs et le jeton d’accès pour mettre en œuvre l’authentification côté serveur pour les demandes d’authentification ultérieures puisque NextAuth prend en charge différentes intégrations de bases de données.