Conclusion authentification

Récapitulatif express : où en est ton app ?

En un (long) module tu viens de transformer un simple CRUD en une application full-stack sécurisée :

1. Inscription, connexion, déconnexion et ré-initialisation de mot de passe.
2. Mots de passe hachés avec bcryptjs et jamais stockés en clair.
3. Sessions HTTP-only signées, stockées dans un cookie unique __session.
4. Routes protégées grâce au duo getOptionalUser() / requireUser().
5. Redirection automatique vers la page initiale après login (redirectTo).
6. E-mail transactionnel envoyé via Nodemailer + SMTP.
7. Variables d’environnement validées au démarrage avec zod, pour éviter la production qui plante parce qu’un SMTP_HOST manque.

En clair : tout ce qu’il faut pour mettre l’appli en production sans transpirer.

Les enseignements clés (reformulés du transcript)

• UX first
  • Message d’erreur directement dans le formulaire si le slug ou le mot de passe est mauvais.
  • Focus auto sur le champ fautif, pas de reset du formulaire.
• Garde-fou universel requireUser() supprime le cookie corrompu, redirige l’anonyme vers /login?redirectTo=/route-demandée et garantit qu’aucune page privée n’échappe au contrôle.
• Flow « Mot de passe oublié »
  1. Génération d’un token unique + date d’expiration.
  2. Lien envoyé par e-mail.
  3. Page /reset-password?token=… qui valide le token, écrit le nouveau hash puis invalide le token : un seul usage possible.
• Conform + Zod, le binôme gagnant Un schéma → deux usages : validation instantanée côté client et validation asynchrone côté serveur (superRefine). Résultat : moins de code, 0 état local, type-safety totale.
• Envoi d’e-mail industrialisé Un helper sendPasswordResetEmail() centralise le transporteur nodemailer, le template HTML et le fallback texte. Tu peux le réutiliser pour des confirmations d’inscription, des newsletters, etc.
• Environnement typé Les variables .env passent par envServerSchema.parse(process.env) ; si DATABASE_URL ou SMTP_PASSWORD est manquant, l’app s’arrête dès le boot plutôt que de planter silencieusement plus tard.

Les morceaux de code à garder sous la main

Le coupe-circuit d’authentification

1
import { redirect } from "react-router";
2

3
export async function requireUser({ request }: { request: Request }) {
4
  const user = await getOptionalUser({ request });
5
  if (!user) {
6
    const path = new URL(request.url).pathname;
7
    throw await logout({
8
      request,
9
      redirectTo: `/login?redirectTo=${path}`,
10
    });
11
  }
12
  return user;
13
}

La déconnexion qui vide vraiment le cookie

1
export async function logout({
2
  request,
3
  redirectTo = "/",
4
}: {
5
  request: Request;
6
  redirectTo?: string;
7
}) {
8
  const session = await getUserSession({ request });
9
  return redirect(redirectTo, {
10
    headers: { "Set-Cookie": await destroySession(session) },
11
  });
12
}

L’envoi d’un e-mail de reset de mot de passe

1
export async function sendPasswordResetEmail({
2
  email,
3
  token,
4
}: {
5
  email: string;
6
  token: string;
7
}) {
8
  const url = `${process.env.FRONTEND_URL}/reset-password?token=${token}`;
9

10
  await sendEmail({
11
    to: email,
12
    subject: "Réinitialisation de ton mot de passe",
13
    text: `Clique sur le lien suivant : ${url}`,
14
    html: `<p>Tu as demandé un nouveau mot de passe.</p>
15
           <p><a href="${url}">Réinitialiser maintenant</a></p>
16
           <small>Ce lien expire dans 30 min.</small>`,
17
  });
18
}

Bilan compétences

Tu maîtrises maintenant tout le socle « Auth » pour n’importe quel projet React Router 7.

Et après ?

La partie la plus critique est en place. Dans le prochain module nous allons :

1. Déployer l’application (Docker, CI/CD, variables d’env en production).
2. Mettre en place des outils de monitoring (logs, erreurs, performances).
3. Optimiser le SEO et la performance grâce aux headers, aux balises meta et au pré-chargement des ressources.

Prêt·e à publier ton app ? Alors enchaîne directement sur le module « Déploiement d’une application React Router 7 » !