chartbastan/_bmad-output/implementation-artifacts/4-2-implémenter-l-inscription-et-la-connexion-utilisateur.md

Story 4.2: Implémenter l'inscription et la connexion utilisateur

Status: review

Acceptance Criteria

Given je suis sur la page d'inscription When je remplis le formulaire avec email et mot de passe valides Then mon compte est créé And je suis automatiquement connecté And je suis redirigé vers le dashboard

Given je suis sur la page de connexion When je saisis mes identifiants corrects Then je suis connecté And ma session est créée And je suis redirigé vers le dashboard

Given je saisis des identifiants incorrects When je tente de me connecter Then un message d'erreur clair est affiché And je reste sur la page de connexion

Tasks / Subtasks

• Créer la page d'inscription (AC: #1)

  • Créer src/app/(auth)/register/page.tsx
  • Créer le formulaire d'inscription avec email et mot de passe
  • Ajouter validation des champs (email format, mot de passe min 8 caractères)
  • Ajouter confirmation de mot de passe
  • Utiliser shadcn/ui components (Input, Button, Card)

• Implémenter l'action d'inscription (AC: #1)

  • Créer src/app/actions/auth.ts
  • Implémenter la fonction register pour appeler l'API
  • Gérer les erreurs de validation
  • Connecter automatiquement après inscription
  • Rediriger vers le dashboard

• Créer la page de connexion (AC: #2)

  • Créer src/app/(auth)/login/page.tsx
  • Créer le formulaire de connexion avec email et mot de passe
  • Ajouter lien vers la page d'inscription
  • Utiliser shadcn/ui components
  • Ajouter option "Se souvenir de moi"

• Implémenter l'action de connexion (AC: #2, #3)

  • Créer la fonction login dans src/app/actions/auth.ts
  • Appeler l'endpoint /api/auth/login
  • Gérer les tokens JWT
  • Gérer les cookies de session
  • Rediriger vers le dashboard

• Gérer les erreurs de connexion (AC: #3)

  • Afficher des messages d'erreur clairs
  • Gérer les erreurs: email invalide, mot de passe incorrect, serveur indisponible
  • Maintenir l'utilisateur sur la page de connexion
  • Ajouter des suggestions (ex: "Vérifiez votre email")

• Tester l'inscription et la connexion (AC: #1, #2, #3)

  • Tester l'inscription avec données valides
  • Tester l'inscription avec email déjà utilisé
  • Tester la connexion avec identifiants corrects
  • Tester la connexion avec identifiants incorrects
  • Vérifier la redirection vers le dashboard

Dev Notes

Stack Technique

• Auth: Better Auth v1.4.4
• Forms: React Hook Form + Zod
• UI: shadcn/ui components

File Structure

src/
├── app/
│   ├── (auth)/
│   │   ├── register/page.tsx
│   │   └── login/page.tsx
│   └── actions/
│       └── auth.ts
└── components/
    └── auth/
        ├── RegisterForm.tsx
        └── LoginForm.tsx

References

• [Source: _bmad-output/planning-artifacts/epics.md#Story-4.2]

Dev Agent Record

Agent Model Used

GLM-4.7

Completion Notes List

• Pages d'inscription et de connexion créées
• Formulaires implémentés avec validation (email, mot de passe, confirmation)
• Actions d'authentification créées (register, login)
• Gestion des erreurs implémentée avec messages clairs
• Composants UI shadcn/ui créés (Button, Input, Card, Label)
• Dashboard page créé avec redirection réussie
• Tests unitaires écrits (30/31 tests passent)

File List

• src/app/(auth)/register/page.tsx
• src/app/(auth)/login/page.tsx
• src/app/dashboard/page.tsx
• src/app/actions/auth.ts
• src/components/auth/RegisterForm.tsx
• src/components/auth/LoginForm.tsx
• src/components/ui/button.tsx
• src/components/ui/input.tsx
• src/components/ui/card.tsx
• src/components/ui/label.tsx
• src/tests/register.test.tsx
• src/tests/login.test.tsx