Implémenter une authentification sans serveur à base de jetons JSON Web (JWT) avec NextAuth.js

Introduction

L’authentification sans serveur consiste à externaliser la gestion des sessions utilisateur vers des prestataires spécialisés tels que Google, Facebook ou Auth0. Grâce à cela, on obtient une solution simple, robuste et éprouvée ne requérant aucune infrastructure backend personnalisée. Dans ce tutoriel, nous verrons comment implémenter une authentification sans serveur basée sur des jetons JSON Web (JWT) à l’aide de NextAuth.js.

Qu’est-ce Que NextAuth.js ?

NextAuth.js est une bibliothèque JavaScript conçue pour simplifier considérablement la mise en place d’un système d’authentification complet dans une application React. Compatible avec divers providers OAuth dont Google, Github, Microsoft Azure, LinkedIn, Twitter etc., elle prend en charge nativement les jetons JSON Web (JWT).

Étape 1 : Installez NextAuth.js

Commencez par installer NextAuth.js dans votre projet React via npm or yarn.

$ npx create-next-app my-app --use-npm
$ cd my-app
$ npm install next-auth @nextauth/client
# or
$ yarn add next-auth @nextauth/client

Étape 2 : Configurez Votre Fournisseur D’identité

Créez un nouveau fichier nommé [...nextauth].js à la racine du dossier pages/api/auth. Remplacez son contenu par celui-ci :

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    })
    // Add more providers here if needed
  ]
});

Remplacez process.env.GOOGLE_ID et process.env.GOOGLE_SECRET par vos propres identifiants obtenus après avoir configuré votre application sur la console Google Developpers.

Étape 3 : Intégrez L’authentification Dans Votre Application

Pour intégrer l’authentification dans votre application, importez first le hook useSession depuis @nextauth/client puis utilisez-le dans vos composants React.

import { useSession, signIn, signOut } from '@nextauth/client';

function Component() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {!session && (
        <button onClick={() => signIn('google')}>Connect</button>
      )}
      {session && (
        <div>
          Welcome {session.user.email}
          <button onClick={() => signOut()}>Sign out</button>
        </div>
      )}
    </div>
  );
}

export default Component;

Étape 4 : Personnalisez Vos Pages D’erreur Et De Redirection

Finalement, personnalisez vos pages d’erreur et de redirection en créant respectivement pages/api/auth/_error.js et pages/api/auth/_callback.js. Consultez la documentation officielle pour plus d’informations sur ces deux points.

Félicitations ! Vous disposez maintenant d’une authentification sans serveur entièrement fonctionnelle reposant sur des jetons JSON Web grâce à NextAuth.js.