Intégrer pismile avec Next.js (Auth.js)

Ce guide ajoute « Se connecter avec pismile » à une application Next.js (App Router) avec Auth.js. Durée : 10 minutes.

1. Installez Auth.js

   TerminalCopier

   npm install next-auth@beta
   npx auth secret

   La seconde commande crée AUTH_SECRET dans .env.local.

2. Ajoutez vos identifiants

   .env.localCopier

   AUTH_SECRET=...            # généré par npx auth secret
   AUTH_PISMILE_ID=VOTRE_CLIENT_ID
   AUTH_PISMILE_SECRET=votre_secret
   AUTH_PISMILE_ISSUER=https://pismile.com

3. Déclarez pismile comme fournisseur OIDC

   auth.tsCopier

   import NextAuth from "next-auth";
   
   export const { handlers, auth, signIn, signOut } = NextAuth({
     providers: [
       {
         id: "pismile",
         name: "pismile",
         type: "oidc",
         issuer: process.env.AUTH_PISMILE_ISSUER,
         clientId: process.env.AUTH_PISMILE_ID,
         clientSecret: process.env.AUTH_PISMILE_SECRET,
         authorization: { params: { scope: "openid profile" } },
         checks: ["pkce", "state"],
       },
     ],
     callbacks: {
       // Première connexion : on recopie les claims pismile dans le jeton de session
       jwt({ token, profile }) {
         if (profile) {
           token.sub = profile.sub as string;
           token.name = profile.name as string;
           token.country = profile.pismile_country as string | undefined;
           token.category = profile.pismile_category as string | undefined;
         }
         return token;
       },
       session({ session, token }) {
         session.user.id = token.sub as string;
         Object.assign(session.user, {
           country: token.country,
           category: token.category,
         });
         return session;
       },
     },
   });

   app/api/auth/[...nextauth]/route.tsCopier

   import { handlers } from "@/auth";
   
   export const { GET, POST } = handlers;

4. Affichez l'utilisateur

   app/page.tsxCopier

   import { auth, signIn, signOut } from "@/auth";
   
   export default async function Home() {
     const session = await auth();
   
     if (!session?.user) {
       return (
         <form
           action={async () => {
             "use server";
             await signIn("pismile");
           }}
         >
           <button type="submit">Se connecter avec pismile</button>
         </form>
       );
     }
   
     const user = session.user as typeof session.user & {
       country?: string;
       category?: string;
     };
     return (
       <main>
         <h1>Bonjour {user.name}</h1>
         <p>
           Pays : {user.country} · Catégorie : {user.category}
         </p>
         <form
           action={async () => {
             "use server";
             await signOut();
           }}
         >
           <button type="submit">Se déconnecter</button>
         </form>
       </main>
     );
   }

5. Enregistrez vos utilisateurs (facultatif)

   Pour garder vos utilisateurs en base, utilisez session.user.id (le sub pismile) comme clé : par exemple dans le callback jwt, lors du premier passage (if (profile) { await db.user.upsert(...) }).

6. Testez

   TerminalCopier

   npm run dev

   Ouvrez http://localhost:3000, connectez-vous avec un alias de test du sandbox BCEAO et confirmez la demande dans le playground.