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>
2025-10-30 23:45:33 +00:00
parent 9b55f5219a
commit e15d717a40
25 changed files with 3509 additions and 1417 deletions
--- a/app/auth/callback/page.tsx.backup
+++ b/app/auth/callback/page.tsx.backup
@@ -0,0 +1,94 @@
+'use client';
+export const dynamic = 'force-dynamic';
+
+
+import React, { useEffect, useState, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+function AuthCallbackContent() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [status, setStatus] = useState('Traitement de l\'authentification...');
+
+    useEffect(() => {
+        const handleAuthCallback = async () => {
+            try {
+                const code = searchParams.get('code');
+                const state = searchParams.get('state');
+                const error = searchParams.get('error');
+
+                if (error) {
+                    setStatus(`Erreur d'authentification: ${error}`);
+                    setTimeout(() => router.push('/auth/login'), 3000);
+                    return;
+                }
+
+                if (!code) {
+                    setStatus('Code d\'autorisation manquant');
+                    setTimeout(() => router.push('/auth/login'), 3000);
+                    return;
+                }
+
+                setStatus('Échange du code d\'autorisation...');
+
+                // Échanger le code contre des tokens
+                const response = await fetch('/api/auth/token', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ code, state }),
+                });
+
+                if (!response.ok) {
+                    throw new Error('Échec de l\'échange de token');
+                }
+
+                const result = await response.json();
+
+                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';
+
+            } catch (error) {
+                console.error('Erreur lors du traitement de l\'authentification:', error);
+                setStatus('Erreur lors de l\'authentification');
+                setTimeout(() => router.push('/auth/login'), 3000);
+            }
+        };
+
+        handleAuthCallback();
+    }, [searchParams, router]);
+
+    return (
+        <div className="flex flex-column align-items-center justify-content-center min-h-screen">
+            <div className="card p-4 text-center">
+                <ProgressSpinner style={{ width: '50px', height: '50px' }} />
+                <h3 className="mt-3">Authentification en cours</h3>
+                <p className="text-600">{status}</p>
+            </div>
+        </div>
+    );
+}
+
+const AuthCallbackPage = () => {
+    return (
+        <Suspense fallback={
+            <div className="flex flex-column align-items-center justify-content-center min-h-screen">
+                <div className="card p-4 text-center">
+                    <ProgressSpinner style={{ width: '50px', height: '50px' }} />
+                    <h3 className="mt-3">Chargement...</h3>
+                </div>
+            </div>
+        }>
+            <AuthCallbackContent />
+        </Suspense>
+    );
+};
+
+export default AuthCallbackPage;