Fix: Correction critique de la boucle OAuth - Empêcher les échanges multiples du code

PROBLÈME RÉSOLU:
- Erreur "Code already used" répétée dans les logs Keycloak
- Boucle infinie de tentatives d'échange du code d'autorisation OAuth
- Utilisateurs bloqués à la connexion

CORRECTIONS APPLIQUÉES:
1. Ajout de useRef pour protéger contre les exécutions multiples
   - hasExchanged.current: Flag pour prévenir les réexécutions
   - isProcessing.current: Protection pendant le traitement

2. Modification des dépendances useEffect
   - AVANT: [searchParams, router] → exécution à chaque changement
   - APRÈS: [] → exécution unique au montage du composant

3. Amélioration du logging
   - Console logs pour debug OAuth flow
   - Messages emoji pour faciliter le suivi

4. Nettoyage de l'URL
   - window.history.replaceState() pour retirer les paramètres OAuth
   - Évite les re-renders causés par les paramètres dans l'URL

5. Gestion d'erreurs améliorée
   - Capture des erreurs JSON du serveur
   - Messages d'erreur plus explicites

FICHIERS AJOUTÉS:
- app/(main)/aide/* - 4 pages du module Aide (documentation, tutoriels, support)
- app/(main)/messages/* - 4 pages du module Messages (inbox, envoyés, archives)
- app/auth/callback/page.tsx.backup - Sauvegarde avant modification

IMPACT:
✅ Un seul échange de code par authentification
✅ Plus d'erreur "Code already used"
✅ Connexion fluide et sans boucle
✅ Logs propres et lisibles

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/auth/callback/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 export const dynamic = 'force-dynamic';
 
-
-import React, { useEffect, useState, Suspense } from 'react';
+import React, { useEffect, useState, useRef, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { ProgressSpinner } from 'primereact/progressspinner';
 
@@ -11,25 +10,48 @@ function AuthCallbackContent() {
     const searchParams = useSearchParams();
     const [status, setStatus] = useState('Traitement de l\'authentification...');
 
+    // ✅ Protection contre les appels multiples
+    const hasExchanged = useRef(false);
+    const isProcessing = useRef(false);
+
     useEffect(() => {
         const handleAuthCallback = async () => {
+            // ✅ Vérifier si l'échange a déjà été fait
+            if (hasExchanged.current || isProcessing.current) {
+                console.log('⏭️ Code exchange already attempted or in progress, skipping');
+                return;
+            }
+
+            // ✅ Marquer comme en cours de traitement
+            isProcessing.current = true;
+
             try {
                 const code = searchParams.get('code');
                 const state = searchParams.get('state');
                 const error = searchParams.get('error');
 
+                console.log('🔐 Starting OAuth callback handling...');
+
                 if (error) {
+                    console.error('❌ OAuth error:', error);
                     setStatus(`Erreur d'authentification: ${error}`);
+                    hasExchanged.current = true;
                     setTimeout(() => router.push('/auth/login'), 3000);
                     return;
                 }
 
                 if (!code) {
+                    console.error('❌ No authorization code');
                     setStatus('Code d\'autorisation manquant');
+                    hasExchanged.current = true;
                     setTimeout(() => router.push('/auth/login'), 3000);
                     return;
                 }
 
+                // ✅ Marquer comme échangé AVANT l'appel
+                hasExchanged.current = true;
+
+                console.log('✅ Authorization code received, exchanging for tokens...');
                 setStatus('Échange du code d\'autorisation...');
 
                 // Échanger le code contre des tokens
@@ -42,28 +64,44 @@ function AuthCallbackContent() {
                 });
 
                 if (!response.ok) {
-                    throw new Error('Échec de l\'échange de token');
+                    const errorData = await response.json().catch(() => ({}));
+                    console.error('❌ Token exchange failed:', errorData);
+                    throw new Error(errorData.error || 'Échec de l\'échange de token');
                 }
 
                 const result = await response.json();
+                console.log('✅ Token exchange successful');
 
                 setStatus('Authentification réussie, redirection...');
 
                 // Les tokens sont maintenant stockés dans des cookies HttpOnly côté serveur
                 // Pas besoin de les stocker dans localStorage
 
-                // Rediriger vers le dashboard
-                window.location.href = '/dashboard';
+                // ✅ Nettoyer l'URL avant redirection
+                const cleanUrl = window.location.pathname;
+                window.history.replaceState({}, document.title, cleanUrl);
+
+                // Rediriger vers le dashboard après un court délai
+                setTimeout(() => {
+                    console.log('✅ Redirecting to dashboard');
+                    window.location.href = '/dashboard';
+                }, 500);
 
             } catch (error) {
-                console.error('Erreur lors du traitement de l\'authentification:', error);
+                console.error('❌ Error during authentication processing:', error);
                 setStatus('Erreur lors de l\'authentification');
-                setTimeout(() => router.push('/auth/login'), 3000);
+
+                // En cas d'erreur, permettre un nouvel essai après un délai
+                setTimeout(() => {
+                    hasExchanged.current = false;
+                    isProcessing.current = false;
+                    router.push('/auth/login');
+                }, 3000);
             }
         };
 
         handleAuthCallback();
-    }, [searchParams, router]);
+    }, []); // ✅ Tableau vide - s'exécute UNE SEULE FOIS au montage
 
     return (
         <div className="flex flex-column align-items-center justify-content-center min-h-screen">