222 lines
6.6 KiB
Markdown
222 lines
6.6 KiB
Markdown
# Analyse - Pourquoi les informations utilisateur ne s'affichent pas
|
|
|
|
## 🔍 Problème Identifié
|
|
|
|
Les informations de l'utilisateur connecté (nom, prénom, email) ne s'affichent pas dans le dashboard layout.
|
|
|
|
## 📊 Architecture du Flux de Données
|
|
|
|
### 1. **Flux d'Authentification**
|
|
|
|
```
|
|
Login/Register
|
|
↓
|
|
apiLogin() ou apiRegister()
|
|
↓
|
|
getCurrentUser() via GET /api/v1/auth/me
|
|
↓
|
|
setUser(currentUser)
|
|
↓
|
|
localStorage.setItem('user', JSON.stringify(currentUser))
|
|
↓
|
|
Affichage dans DashboardLayout
|
|
```
|
|
|
|
### 2. **Fichiers Impliqués**
|
|
|
|
#### Frontend
|
|
- **[auth-context.tsx](apps/frontend/src/lib/context/auth-context.tsx:39)** - Gère l'état utilisateur
|
|
- **[dashboard/layout.tsx](apps/frontend/app/dashboard/layout.tsx:16)** - Affiche les infos user
|
|
- **[api/auth.ts](apps/frontend/src/lib/api/auth.ts:69)** - Fonction `getCurrentUser()`
|
|
- **[types/api.ts](apps/frontend/src/types/api.ts:34)** - Type `UserPayload`
|
|
|
|
#### Backend
|
|
- **[auth.controller.ts](apps/backend/src/application/controllers/auth.controller.ts:219)** - Endpoint `/auth/me`
|
|
- **[jwt.strategy.ts](apps/backend/src/application/auth/jwt.strategy.ts:68)** - Validation JWT
|
|
- **[current-user.decorator.ts](apps/backend/src/application/decorators/current-user.decorator.ts:6)** - Type `UserPayload`
|
|
|
|
## 🐛 Causes Possibles
|
|
|
|
### A. **Objet User est `null` ou `undefined`**
|
|
|
|
**Dans le layout (lignes 95-102):**
|
|
```typescript
|
|
{user?.firstName?.[0]} // ← Si user est null, rien ne s'affiche
|
|
{user?.lastName?.[0]}
|
|
{user?.firstName} {user?.lastName}
|
|
{user?.email}
|
|
```
|
|
|
|
**Pourquoi `user` pourrait être null:**
|
|
1. **Auth Context n'a pas chargé** - `loading: true` bloque
|
|
2. **getCurrentUser() échoue** - Token invalide ou endpoint erreur
|
|
3. **Mapping incorrect** - Les champs ne correspondent pas
|
|
|
|
### B. **Type `UserPayload` Incompatible**
|
|
|
|
**Frontend ([types/api.ts:34](apps/frontend/src/types/api.ts:34)):**
|
|
```typescript
|
|
export interface UserPayload {
|
|
id?: string;
|
|
sub?: string;
|
|
email: string;
|
|
firstName?: string; // ← Optionnel
|
|
lastName?: string; // ← Optionnel
|
|
role: UserRole;
|
|
organizationId: string;
|
|
}
|
|
```
|
|
|
|
**Backend ([current-user.decorator.ts:6](apps/backend/src/application/decorators/current-user.decorator.ts:6)):**
|
|
```typescript
|
|
export interface UserPayload {
|
|
id: string;
|
|
email: string;
|
|
role: string;
|
|
organizationId: string;
|
|
firstName: string; // ← Requis
|
|
lastName: string; // ← Requis
|
|
}
|
|
```
|
|
|
|
**⚠️ PROBLÈME:** Les types ne correspondent pas!
|
|
|
|
### C. **Endpoint `/auth/me` ne retourne pas les bonnes données**
|
|
|
|
**Nouveau code ([auth.controller.ts:219](apps/backend/src/application/controllers/auth.controller.ts:219)):**
|
|
```typescript
|
|
async getProfile(@CurrentUser() user: UserPayload) {
|
|
const fullUser = await this.userRepository.findById(user.id);
|
|
|
|
if (!fullUser) {
|
|
throw new NotFoundException('User not found');
|
|
}
|
|
|
|
return UserMapper.toDto(fullUser);
|
|
}
|
|
```
|
|
|
|
**Questions:**
|
|
1. ✅ `user.id` existe-t-il? (vient du JWT Strategy)
|
|
2. ✅ `userRepository.findById()` trouve-t-il l'utilisateur?
|
|
3. ✅ `UserMapper.toDto()` retourne-t-il `firstName` et `lastName`?
|
|
|
|
### D. **JWT Strategy retourne bien les données**
|
|
|
|
**Bon code ([jwt.strategy.ts:68](apps/backend/src/application/auth/jwt.strategy.ts:68)):**
|
|
```typescript
|
|
return {
|
|
id: user.id,
|
|
email: user.email,
|
|
role: user.role,
|
|
organizationId: user.organizationId,
|
|
firstName: user.firstName, // ✅ Présent
|
|
lastName: user.lastName, // ✅ Présent
|
|
};
|
|
```
|
|
|
|
## 🧪 Composant de Debug Ajouté
|
|
|
|
**Fichier créé:** [DebugUser.tsx](apps/frontend/src/components/DebugUser.tsx:1)
|
|
|
|
Ce composant affiche en bas à droite de l'écran:
|
|
- ✅ État `loading`
|
|
- ✅ Objet `user` complet (JSON)
|
|
- ✅ Contenu de `localStorage.getItem('user')`
|
|
- ✅ Token JWT (50 premiers caractères)
|
|
|
|
## 🔧 Solutions à Tester
|
|
|
|
### Solution 1: Vérifier la Console Navigateur
|
|
|
|
1. Ouvrez les **DevTools** (F12)
|
|
2. Allez dans l'**onglet Console**
|
|
3. Cherchez les erreurs:
|
|
- `Auth check failed:`
|
|
- `Failed to refresh user:`
|
|
- Erreurs 401 ou 404
|
|
|
|
### Solution 2: Vérifier le Panel Debug
|
|
|
|
Regardez le **panel noir en bas à droite** qui affiche:
|
|
```json
|
|
{
|
|
"id": "uuid-user",
|
|
"email": "user@example.com",
|
|
"firstName": "John", // ← Doit être présent
|
|
"lastName": "Doe", // ← Doit être présent
|
|
"role": "USER",
|
|
"organizationId": "uuid-org"
|
|
}
|
|
```
|
|
|
|
**Si `firstName` et `lastName` sont absents:**
|
|
- L'endpoint `/api/v1/auth/me` ne retourne pas les bonnes données
|
|
|
|
**Si tout l'objet `user` est `null`:**
|
|
- Le token est invalide ou expiré
|
|
- Déconnectez-vous et reconnectez-vous
|
|
|
|
### Solution 3: Tester l'Endpoint Manuellement
|
|
|
|
```bash
|
|
# Récupérez votre token depuis localStorage (F12 > Application > Local Storage)
|
|
TOKEN="votre-token-ici"
|
|
|
|
# Testez l'endpoint
|
|
curl -H "Authorization: Bearer $TOKEN" http://localhost:4000/api/v1/auth/me
|
|
```
|
|
|
|
**Réponse attendue:**
|
|
```json
|
|
{
|
|
"id": "...",
|
|
"email": "...",
|
|
"firstName": "...", // ← DOIT être présent
|
|
"lastName": "...", // ← DOIT être présent
|
|
"role": "...",
|
|
"organizationId": "...",
|
|
"isActive": true,
|
|
"createdAt": "...",
|
|
"updatedAt": "..."
|
|
}
|
|
```
|
|
|
|
### Solution 4: Forcer un Rafraîchissement
|
|
|
|
Ajoutez un console.log dans [auth-context.tsx](apps/frontend/src/lib/context/auth-context.tsx:63):
|
|
|
|
```typescript
|
|
const currentUser = await getCurrentUser();
|
|
console.log('🔍 User fetched:', currentUser); // ← AJOUTEZ CECI
|
|
setUser(currentUser);
|
|
```
|
|
|
|
## 📋 Checklist de Diagnostic
|
|
|
|
- [ ] **Backend démarré?** → http://localhost:4000/api/docs
|
|
- [ ] **Token valide?** → Vérifier dans DevTools > Application > Local Storage
|
|
- [ ] **Endpoint `/auth/me` fonctionne?** → Tester avec curl/Postman
|
|
- [ ] **Panel Debug affiche des données?** → Voir coin bas-droite de l'écran
|
|
- [ ] **Console a des erreurs?** → F12 > Console
|
|
- [ ] **User object dans console?** → Ajoutez des console.log
|
|
|
|
## 🎯 Prochaines Étapes
|
|
|
|
1. **Rechargez la page du dashboard**
|
|
2. **Regardez le panel debug en bas à droite**
|
|
3. **Ouvrez la console (F12)**
|
|
4. **Partagez ce que vous voyez:**
|
|
- Contenu du panel debug
|
|
- Erreurs dans la console
|
|
- Réponse de `/auth/me` si vous testez avec curl
|
|
|
|
---
|
|
|
|
**Fichiers modifiés pour debug:**
|
|
- ✅ [DebugUser.tsx](apps/frontend/src/components/DebugUser.tsx:1) - Composant de debug
|
|
- ✅ [dashboard/layout.tsx](apps/frontend/app/dashboard/layout.tsx:162) - Ajout du debug panel
|
|
|
|
**Pour retirer le debug plus tard:**
|
|
Supprimez simplement `<DebugUser />` de la ligne 162 du layout.
|