# 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';
```