xpeditis2.0/docs/debug/USER_INFO_DEBUG_ANALYSIS.md

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 - Gère l'état utilisateur
• dashboard/layout.tsx - Affiche les infos user
• api/auth.ts - Fonction getCurrentUser()
• types/api.ts - Type UserPayload

Backend

• auth.controller.ts - Endpoint /auth/me
• jwt.strategy.ts - Validation JWT
• current-user.decorator.ts - Type UserPayload

🐛 Causes Possibles

A. Objet User est null ou undefined

Dans le layout (lignes 95-102):

{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):

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):

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):

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):

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

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:

{
  "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

# 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:

{
  "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:

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 - Composant de debug
• ✅ dashboard/layout.tsx - Ajout du debug panel

Pour retirer le debug plus tard: Supprimez simplement <DebugUser /> de la ligne 162 du layout.