xpeditis2.0/USER_INFO_DEBUG_ANALYSIS.md
2025-11-04 07:30:15 +01:00

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.