Les modules Blueprint Modular font partie de l'application Next.js. Il n'y a pas de package séparé par module (pas de pip install blueprint-modular-auth ni npm install blueprint-modular-auth) : on installe l'application une fois, puis on configure les variables d'environnement (NextAuth, Google, whitelist). Cette documentation décrit comment implémenter Auth, comment choisir le modèle de page (carte centrée, split, Google seul), les lignes de code pour charger et utiliser le module, et le paramétrage (variables d'environnement).

Implémentation

Le module Auth repose sur NextAuth (providers Google et credentials). La session est stockée en JWT et disponible côté serveur (getServerSession) et côté client (useSession). Les pages protégées redirigent vers /login si l'utilisateur n'est pas connecté.

Charger le module (côté app)

Route API NextAuth : app/api/auth/[...nextauth]/route.ts qui exporte le handler avec authOptions.
Provider de session : envelopper l'app avec SessionProvider (via AuthProvider) dans le layout racine.
Configuration : lib/auth.ts (authOptions, whitelist, callbacks).

Exemple — route API NextAuth :

import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Exemple — layout racine (charger la session côté client) :

import { SessionProvider } from "next-auth/react";

export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// Dans app/layout.tsx :
<AuthProvider>
  {children}
</AuthProvider>

Base de données

Le module Auth s'appuie sur les tables User et ApiKey (schéma Prisma). En production, DATABASE_URL doit être défini. Pour la liste des structures BDD et prérequis par module, voir docs/DATABASE.md dans le dépôt.

Variables d'environnement

À définir dans .env ou votre hébergeur :

DATABASE_URL — Connexion PostgreSQL (obligatoire pour la persistance des utilisateurs).
GOOGLE_CLIENT_ID et GOOGLE_CLIENT_SECRET — pour la connexion Google.
NEXTAUTH_SECRET — secret pour signer les JWT (obligatoire en production).
NEXTAUTH_URL — URL de l'app (ex. https://app.blueprint-modular.com).
AUTHORIZED_EMAILS (optionnel) — liste d'emails autorisés, séparés par des virgules (whitelist). Si défini, seuls ces emails peuvent se connecter (Google ou e-mail).
CREDENTIALS_DEMO_PASSWORD (optionnel) — mot de passe unique pour le provider credentials (connexion e-mail de démo).

Choix du modèle de page de connexion

Trois variantes sont disponibles. Par défaut, les routes /login et /register utilisent le modèle carte centrée. Vous pouvez activer le layout split ou le mode Google seul via les paramètres d'URL ou les props des composants.

Modèle	URL / paramètres	Usage
Carte centrée	`/login`, `/register` (défaut)	Formulaire dans une carte centrée, option Google + e-mail.
Split	`?layout=split`	Formulaire à gauche, image à droite (ex. /login?layout=split).
Google seul	`?showEmailOption=false`	Un seul bouton « Google », pas de formulaire e-mail (ex. /login?showEmailOption=false).

Lignes de code pour utiliser Auth

Pages de connexion et d'inscription (routes) :

Créez app/(auth)/login/page.tsx et app/(auth)/register/page.tsx qui rendent les composants LoginPage et RegisterPage avec les props souhaitées (titre, sous-titre, layout, option e-mail).

// app/(auth)/login/page.tsx
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import { authOptions } from "@/lib/auth";
import { LoginPage } from "@/components/auth";

export default async function LoginPageRoute({ searchParams }) {
  const session = await getServerSession(authOptions);
  if (session) redirect("/dashboard");

  const params = await searchParams;
  const useSplitLayout = params?.layout === "split";
  const showEmailOption = params?.showEmailOption !== "false";

  return (
    <LoginPage
      title="Blueprint Modular"
      subtitle={showEmailOption ? "Connexion sécurisée (Google ou e-mail)" : "Connexion avec Google"}
      logoSrc="/img/logo-bpm-nom.jpg"
      callbackUrl={params?.callbackUrl ? decodeURIComponent(params.callbackUrl) : null}
      showEmailOption={showEmailOption}
      useSplitLayout={useSplitLayout}
    />
  );
}

Session côté serveur (pages, API) :

import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";

export default async function MaPage() {
  const session = await getServerSession(authOptions);
  if (!session) redirect("/login");
  return <div>Bonjour, {session.user?.name}</div>;
}

Session côté client (composants) :

"use client";
import { useSession, signOut } from "next-auth/react";

export function MonComposant() {
  const { data: session, status } = useSession();
  if (status === "loading") return <p>Chargement…</p>;
  if (!session) return <p>Non connecté</p>;
  return (
    <div>
      <p>Connecté : {session.user?.email}</p>
      <button onClick={() => signOut({ callbackUrl: "/" })}>Se déconnecter</button>
    </div>
  );
}

Redirection après connexion :

NextAuth utilise pages.signIn: "/login" dans authOptions. Pour rediriger vers une URL après login, passez callbackUrl en query (ex. /login?callbackUrl=/dashboard) ou utilisez signIn(..., { callbackUrl: "/dashboard" }).

Whitelist (AUTHORIZED_EMAILS)

Si la variable AUTHORIZED_EMAILS est définie (liste d'emails séparés par des virgules), seuls ces utilisateurs peuvent se connecter, que ce soit via Google ou le provider credentials. Utile pour restreindre l'accès à une équipe ou un environnement de démo.

Documentation – Auth