feat(auth): expose individual auth page components as a public entry point

2026-04-23 19:55:35 -04:00
parent c901e81c83
commit 995edae513
4 changed files with 111 additions and 347 deletions
@@ -0,0 +1,102 @@
+# Pages d'authentification personnalisées
+
+Pour utiliser sa propre mise en page, on crée des routes Next.js qui enveloppent les composants Zen dans un layout.
+
+Chaque page suit le même patron : un **composant serveur** qui charge la session et passe les actions, et un **wrapper client** qui gère la navigation.
+
+- Composants : `@zen/core/features/auth/pages`
+- Actions : `@zen/core/features/auth/actions`
+
+---
+
+## Composants disponibles
+
+| Page                  | Composant              | Props principales |
+|-----------------------|------------------------|-------------------|
+| Connexion             | `LoginPage`            | `onSubmit`, `onSetSessionCookie`, `onNavigate`, `redirectAfterLogin`, `currentUser` |
+| Inscription           | `RegisterPage`         | `onSubmit`, `onNavigate`, `currentUser` |
+| Mot de passe oublié   | `ForgotPasswordPage`   | `onSubmit`, `onNavigate`, `currentUser` |
+| Réinitialisation      | `ResetPasswordPage`    | `onSubmit`, `onNavigate`, `email`, `token` |
+| Confirmation courriel | `ConfirmEmailPage`     | `onSubmit`, `onNavigate`, `email`, `token` |
+| Déconnexion           | `LogoutPage`           | `onLogout`, `onSetSessionCookie` |
+
+`onNavigate` reçoit une valeur parmi : `'login' | 'register' | 'forgot' | 'reset'`.
+
+---
+
+## Exemple : page de connexion
+
+**Serveur** — `app/auth/login/page.js`
+
+```js
+import { getSession, loginAction, setSessionCookie } from '@zen/core/features/auth/actions';
+import { LoginPageWrapper } from './LoginPageWrapper';
+
+export default async function LoginRoute() {
+  const session = await getSession();
+  return (
+    <MonLayout>
+      <LoginPageWrapper
+        loginAction={loginAction}
+        setSessionCookie={setSessionCookie}
+        currentUser={session?.user ?? null}
+      />
+    </MonLayout>
+  );
+}
+```
+
+**Client** — `app/auth/login/LoginPageWrapper.js`
+
+```js
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { LoginPage } from '@zen/core/features/auth/pages';
+
+export function LoginPageWrapper({ loginAction, setSessionCookie, currentUser }) {
+  const router = useRouter();
+  return (
+    <LoginPage
+      onSubmit={loginAction}
+      onSetSessionCookie={setSessionCookie}
+      onNavigate={(page) => router.push(`/auth/${page}`)}
+      redirectAfterLogin="/"
+      currentUser={currentUser}
+    />
+  );
+}
+```
+
+Le même patron s'applique à toutes les autres pages. Les différences :
+
+- **RegisterPage** : passer `registerAction` comme `onSubmit`
+- **ForgotPasswordPage** : passer `forgotPasswordAction` comme `onSubmit`
+- **ResetPasswordPage** / **ConfirmEmailPage** : lire `email` et `token` dans `searchParams` et les passer en props
+- **LogoutPage** : utiliser `onLogout` au lieu de `onSubmit`, pas de `onNavigate` requis
+
+---
+
+## Protection de route
+
+```js
+import { getSession } from '@zen/core/features/auth/actions';
+import { redirect } from 'next/navigation';
+
+export default async function PageProtégée() {
+  const session = await getSession();
+  if (!session?.user) redirect('/auth/login');
+  // ...
+}
+```
+
+---
+
+## Page par défaut (sans personnalisation)
+
+Si une mise en page personnalisée n'est pas nécessaire, on garde simplement :
+
+```js
+// app/auth/[...auth]/page.js
+export { default } from '@zen/core/features/auth/server';
+```