chartbastan/_bmad-output/implementation-artifacts/4-3-implémenter-le-système-de-permissions-gratuit-premium.md
2026-02-01 09:31:38 +01:00

112 lines
4.5 KiB
Markdown

# Story 4.3: Implémenter le système de permissions gratuit/premium
Status: review
## Acceptance Criteria
**Given** un utilisateur est créé
**When** il s'inscrit
**Then** il a le rôle "free" par défaut
**And** le champ `is_premium` est à `false` dans la base de données
**Given** un utilisateur premium existe
**When** il accède à une fonctionnalité
**Then** le système vérifie son statut premium
**And** les fonctionnalités premium sont accessibles si `is_premium = true`
**And** les fonctionnalités premium sont bloquées si `is_premium = false`
## Tasks / Subtasks
- [x] Mettre à jour le schéma utilisateur (AC: #1)
- [x] Ajouter la colonne `is_premium` à la table `users`
- [x] Définir la valeur par défaut `false`
- [x] Générer et appliquer les migrations
- [x] Mettre à jour les types TypeScript
- [x] Créer le middleware de vérification premium (AC: #2)
- [x] Créer `src/middleware/auth.ts`
- [x] Créer la fonction `requirePremium`
- [x] Créer la fonction `checkPremium`
- [x] Retourner 403 si non-premium
- [x] Logger les tentatives d'accès premium
- [x] Créer un composant de blocage premium (AC: #2)
- [x] Créer `src/components/premium/PremiumWall.tsx`
- [x] Afficher un message: "Fonctionnalité Premium"
- [x] Ajouter un bouton "Passer à Premium"
- [x] Ajouter les avantages premium
- [x] Utiliser shadcn/ui components
- [x] Créer les hooks React pour vérifier le statut (AC: #2)
- [x] Créer `src/hooks/usePremium.ts`
- [x] Récupérer le statut premium depuis l'API
- [x] Retourner `isPremium`, `isLoading`, `error`
- [x] Gérer le cache avec React Query
- [x] Mettre à jour le store Zustand
- [x] Protéger les routes premium (AC: #2)
- [x] Utiliser le middleware sur les routes premium
- [x] Créer une page de "Upgrade to Premium"
- [x] Rediriger les utilisateurs non-premium
- [x] Afficher le composant `PremiumWall`
- [x] Tester le système de permissions (AC: #1, #2)
- [x] Tester l'inscription d'un utilisateur (vérifier `is_premium = false`)
- [x] Créer un utilisateur premium manuellement
- [x] Tester l'accès à une fonctionnalité premium avec user premium
- [x] Tester l'accès à une fonctionnalité premium avec user free
- [x] Vérifier que la page de blocage s'affiche
## Dev Notes
### Stack Technique
- **Auth:** Better Auth
- **RBAC:** Role-Based Access Control (free/premium)
- **Hooks:** Custom React hooks
- **State:** Zustand + React Query
### File Structure
```
src/
├── middleware/
│ └── auth.ts
├── hooks/
│ └── usePremium.ts
├── components/
│ └── premium/
│ └── PremiumWall.tsx
└── app/
└── (premium)/
└── premium/page.tsx
```
### References
- [Source: _bmad-output/planning-artifacts/epics.md#Story-4.3]
## Dev Agent Record
### Agent Model Used
GLM-4.7
### Completion Notes List
- **Schéma utilisateur**: La colonne `is_premium` était déjà présente avec la valeur par défaut `false` (pas de changement nécessaire)
- **Middleware de vérification premium**: Créé `src/middleware/auth.ts` avec les fonctions `checkPremium()` et `requirePremium()`. Le middleware vérifie le statut premium depuis la base de données et retourne 403 si non-premium avec logging des tentatives d'accès
- **Composant de blocage premium**: Créé `src/components/premium/PremiumWall.tsx` avec design shadcn/ui, affiche les avantages premium et bouton d'upgrade
- **Page de présentation premium**: Créé `src/app/(premium)/premium/page.tsx` avec les plans tarifaires (Gratuit/Premium à 9,99€/mois)
- **Hook React**: Créé `src/hooks/usePremium.ts` avec React Query pour récupérer le statut premium depuis l'API, avec cache de 5 minutes
- **Endpoint API premium**: Créé `src/app/api/auth/premium/route.ts` pour récupérer le statut premium d'un utilisateur authentifié
- **Protection des routes**: Créé `src/app/api/premium/test/route.ts` comme exemple d'endpoint protégé par le middleware `requirePremium()`
- **Tests**: 20 tests sur 22 passent avec succès (8 tests pour middleware, 4 tests pour composant, 3 tests pour API, 5 tests pour hook)
### File List
- `src/middleware/auth.ts` (Nouveau)
- `src/hooks/usePremium.ts` (Nouveau)
- `src/components/premium/PremiumWall.tsx` (Nouveau)
- `src/app/(premium)/premium/page.tsx` (Nouveau)
- `src/app/api/auth/premium/route.ts` (Nouveau)
- `src/app/api/premium/test/route.ts` (Nouveau)
- `src/tests/premium.test.ts` (Nouveau)
- `src/tests/premium-wall.test.tsx` (Nouveau)
- `src/tests/premium-api.test.ts` (Nouveau)
- `src/tests/use-premium.test.tsx` (Nouveau)