Authentification fonctionnelle via security.lions.dev

app/(main)/dashboard/page.tsx

@@ -36,61 +36,28 @@ const Dashboard = () => {
     const searchParams = useSearchParams();
     const [selectedChantier, setSelectedChantier] = useState<ChantierActif | null>(null);
     const [showQuickView, setShowQuickView] = useState(false);
-    const [authProcessed, setAuthProcessed] = useState(false);
-    const [authError, setAuthError] = useState<string | null>(null);
-    const [authInProgress, setAuthInProgress] = useState(false);
-    const [isHydrated, setIsHydrated] = useState(false);
 
-    // Flag global pour éviter les appels multiples (React 18 StrictMode)
-    const authProcessingRef = useRef(false);
-    // Mémoriser le code traité pour éviter les retraitements
-    const processedCodeRef = useRef<string | null>(null);
-    // Flag pour éviter les redirections multiples
-    const redirectingRef = useRef(false);
-
-    const currentCode = searchParams.get('code');
-    const currentState = searchParams.get('state');
-
-    console.log('🏗️ Dashboard: SearchParams:', {
-        code: currentCode?.substring(0, 20) + '...',
-        state: currentState,
-        authProcessed,
-        processedCode: processedCodeRef.current?.substring(0, 20) + '...',
-        authInProgress: authInProgress
-    });
-
-    // Gérer l'hydratation pour éviter les erreurs SSR/CSR
+    // Nettoyer les paramètres OAuth de l'URL après le retour de Keycloak
     useEffect(() => {
-        setIsHydrated(true);
-    }, []);
-
-    // Réinitialiser authProcessed si on a un nouveau code d'autorisation
-    useEffect(() => {
-        if (!isHydrated) return; // Attendre l'hydratation
-        
-        if (currentCode && authProcessed && !authInProgress && processedCodeRef.current !== currentCode) {
-            console.log('🔄 Dashboard: Nouveau code détecté, réinitialisation authProcessed');
-            setAuthProcessed(false);
-            processedCodeRef.current = null;
-        }
-    }, [currentCode, authProcessed, authInProgress, isHydrated]);
-    
-    // Fonction pour nettoyer l'URL des paramètres d'authentification
-    const cleanAuthParams = useCallback(() => {
-        if (typeof window === 'undefined') return; // Protection SSR
+        if (typeof window === 'undefined') return;
 
         const url = new URL(window.location.href);
-        if (url.searchParams.has('code') || url.searchParams.has('state')) {
+
+        // Nettoyer query string
+        if (url.searchParams.has('code') || url.searchParams.has('state') || url.searchParams.has('session_state')) {
+            console.log('🧹 Dashboard: Nettoyage des paramètres OAuth de l\'URL (query)');
             url.search = '';
             window.history.replaceState({}, '', url.toString());
-// Nettoyer sessionStorage après succès                        if (typeof window !== 'undefined') {                            sessionStorage.removeItem('oauth_code_processed');                        }
+        }
+
+        // Nettoyer fragment (hash) si Keycloak utilise implicit flow par erreur
+        if (url.hash && (url.hash.includes('code=') || url.hash.includes('state='))) {
+            console.log('🧹 Dashboard: Nettoyage des paramètres OAuth de l\'URL (fragment)');
+            url.hash = '';
+            window.history.replaceState({}, '', url.toString());
         }
     }, []);
 
-    // Hooks pour les données et actions du dashboard
-    // Charger les données après authentification ou si pas de code d'autorisation
-    const shouldLoadData = authProcessed || !currentCode;
-
     const {
         metrics,
         chantiersActifs,
@@ -104,6 +71,8 @@ const Dashboard = () => {
         onRefresh: refresh
     });
 
+    console.log('🏗️ Dashboard: État du chargement -', { loading, metricsLoaded: !!metrics, chantiersCount: chantiersActifs?.length || 0 });
+
     // Optimisations avec useMemo pour les calculs coûteux
     const formattedMetrics = useMemo(() => {
         if (!metrics) return null;
@@ -194,129 +163,6 @@ const Dashboard = () => {
         chantierActions.handleQuickView(chantier);
     }, [chantierActions]);
 
-    // Traiter l'authentification Keycloak si nécessaire
-    useEffect(() => {
-        // Attendre l'hydratation avant de traiter l'authentification
-        if (!isHydrated) {
-            return;
-        }
-
-        // Mode développement : ignorer l'authentification Keycloak
-        if (process.env.NEXT_PUBLIC_DEV_MODE === 'true' || process.env.NEXT_PUBLIC_SKIP_AUTH === 'true') {
-            console.log('🔧 Dashboard: Mode développement détecté, authentification ignorée');
-            setAuthProcessed(true);
-            return;
-        }
-
-        // Si l'authentification est déjà terminée, ne rien faire
-        if (authProcessed) {
-            return;
-        }
-
-        // Si on est en train de rediriger, ne rien faire
-        if (redirectingRef.current) {
-            return;
-        }
-
-        const processAuth = async () => {
-            try {
-            // Protection absolue contre les boucles
-            if (authInProgress || authProcessingRef.current) {
-                console.log('🛑 Dashboard: Processus d\'authentification déjà en cours, arrêt');
-                return;
-            }
-
-            // Les tokens sont maintenant stockés dans des cookies HttpOnly
-            // Le middleware les vérifiera automatiquement
-            // Pas besoin de vérifier localStorage
-
-            const code = currentCode;
-            const state = currentState;
-            const error = searchParams.get('error');
-
-            if (error) {
-                setAuthError(`Erreur d'authentification: ${error}`);
-                setAuthProcessed(true);
-                return;
-            }
-
-            // Vérifier si ce code a déjà été traité
-            if (code && !authProcessed && !authInProgress && !authProcessingRef.current && processedCodeRef.current !== code) {
-                try {
-                    console.log('🔐 Traitement du code d\'autorisation Keycloak...', { code: code.substring(0, 20) + '...', state });
-
-                    // Marquer IMMÉDIATEMENT dans sessionStorage pour empêcher double traitement
-                    if (typeof window !== 'undefined') {
-                        sessionStorage.setItem('oauth_code_processed', code);
-                    }
-
-                    // Marquer l'authentification comme en cours pour éviter les appels multiples
-                    authProcessingRef.current = true;
-                    processedCodeRef.current = code;
-                    setAuthInProgress(true);
-
-                    console.log('📡 Appel de /api/auth/token...');
-
-                    // Utiliser fetch au lieu d'un formulaire pour éviter la boucle de redirection
-                    const response = await fetch('/api/auth/token', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ code, state: state || '' })
-                    });
-
-                    if (response.ok) {
-                        console.log('✅ Authentification réussie, tokens stockés dans les cookies');
-
-                        // Nettoyer l'URL en enlevant les paramètres OAuth
-                        window.history.replaceState({}, '', '/dashboard');
-// Nettoyer sessionStorage après succès                        if (typeof window !== 'undefined') {                            sessionStorage.removeItem('oauth_code_processed');                        }
-
-                        // Marquer l'authentification comme terminée
-                        setAuthProcessed(true);
-                        setAuthInProgress(false);
-                        authProcessingRef.current = false;
-                    } else {
-                        console.error("❌ Erreur lors de l'authentification");
-                        const errorData = await response.json();
-                        setAuthError(`Erreur lors de l'authentification: ${errorData.error || 'Erreur inconnue'}`);
-                        setAuthProcessed(true);
-                        setAuthInProgress(false);
-                        authProcessingRef.current = false;
-                    }
-
-                } catch (error) {
-                    console.error('❌ Erreur lors du traitement de l\'authentification:', error);
-
-                    // ARRÊTER LA BOUCLE : Ne pas rediriger automatiquement, juste marquer comme traité
-                    console.log('🛑 Dashboard: Erreur d\'authentification, arrêt du processus pour éviter la boucle');
-
-                    const errorMessage = error instanceof Error ? error.message : 'Erreur inconnue lors de l\'authentification';
-                    setAuthError(`Erreur lors de l'authentification: ${errorMessage}`);
-                    setAuthProcessed(true);
-                    setAuthInProgress(false);
-                    authProcessingRef.current = false;
-                }
-            } else {
-                setAuthProcessed(true);
-                setAuthInProgress(false);
-                authProcessingRef.current = false;
-            }
-            } catch (error) {
-                console.error('❌ Erreur générale lors du traitement de l\'authentification:', error);
-                const errorMessage = error instanceof Error ? error.message : 'Erreur inconnue lors de l\'authentification';
-                setAuthError(`Erreur lors de l'authentification: ${errorMessage}`);
-                setAuthProcessed(true);
-                setAuthInProgress(false);
-                authProcessingRef.current = false;
-            }
-        };
-
-        processAuth();
-    }, [currentCode, currentState, authProcessed, authInProgress, isHydrated]);
-
-
-
-
     const actionBodyTemplate = useCallback((rowData: ChantierActif) => {
         const actions: ActionButtonType[] = ['VIEW', 'PHASES', 'PLANNING', 'STATS', 'MENU'];
 
@@ -385,68 +231,6 @@ const Dashboard = () => {
         );
     }, [handleQuickView, router, chantierActions]);
 
-
-
-    // Attendre l'hydratation pour éviter les erreurs SSR/CSR
-    if (!isHydrated) {
-        return (
-            <div className="grid">
-                <div className="col-12">
-                    <div className="card">
-                        <div className="text-center">
-                            <ProgressSpinner style={{ width: '50px', height: '50px' }} />
-                            <h5 className="mt-3">Chargement...</h5>
-                            <p className="text-600">Initialisation de l'application</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    // Afficher le chargement pendant le traitement de l'authentification
-    if (!authProcessed) {
-        return (
-            <div className="grid">
-                <div className="col-12">
-                    <div className="card">
-                        <div className="text-center">
-                            <ProgressSpinner style={{ width: '50px', height: '50px' }} />
-                            <h5 className="mt-3">Authentification en cours...</h5>
-                            <p className="text-600">Traitement des informations de connexion</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-
-
-
-    // Afficher l'erreur d'authentification
-    if (authError) {
-        return (
-            <div className="grid">
-                <div className="col-12">
-                    <div className="card">
-                        <div className="text-center">
-                            <i className="pi pi-exclamation-triangle text-red-500" style={{ fontSize: '4rem' }}></i>
-                            <h5 className="text-red-500">Erreur d'authentification</h5>
-                            <p className="text-600 mb-4">{authError}</p>
-                            <Button
-                                label="Retour à la connexion"
-                                icon="pi pi-sign-in"
-                                onClick={() => window.location.href = '/api/auth/login'}
-                                className="p-button-outlined"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
     if (loading) {
         return (
             <div className="grid">

app/(main)/page.tsx

@@ -12,6 +12,7 @@ import { Button } from 'primereact/button';
 import { LayoutContext } from '../../layout/context/layoutcontext';
 import { PrimeReactContext } from 'primereact/api';
 import type { ColorScheme, Page } from '@/types';
+import { redirectToLogin } from '@/lib/auth';
 
 const LandingPage: Page = () => {
     const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
@@ -140,13 +141,13 @@ const LandingPage: Page = () => {
                                 </StyleClass>
                             </li>
                             <li>
-                                <a href="http://localhost:8080/api/v1/auth/login" className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
+                                <a onClick={() => redirectToLogin()} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                     <span>Connexion</span>
                                     <Ripple />
                                 </a>
                             </li>
                             <li>
-                                <a href="http://localhost:8080/api/v1/auth/login" className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
+                                <a onClick={() => redirectToLogin()} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                     <span>Inscription</span>
                                     <Ripple />
                                 </a>
@@ -182,7 +183,7 @@ const LandingPage: Page = () => {
                         Bienvenue sur BTP Xpress
                     </h1>
                     <h2 className="mt-0 font-medium text-4xl text-gray-700">Votre plateforme de gestion BTP moderne</h2>
-                    <a href="http://localhost:8080/api/v1/auth/login" className="p-button text-gray-700 bg-cyan-500 border-cyan-500 font-bold border-round" style={{ mixBlendMode: 'multiply', padding: ' 0.858rem 1.142rem' }}>
+                    <a onClick={() => redirectToLogin()} className="p-button text-gray-700 bg-cyan-500 border-cyan-500 font-bold border-round" style={{ mixBlendMode: 'multiply', padding: ' 0.858rem 1.142rem' }}>
                         <span className="p-button-text">Commencer</span>
                     </a>
                 </div>

app/api/auth/login/route.ts

@@ -1,29 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-const KEYCLOAK_URL = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
-const KEYCLOAK_REALM = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
-const CLIENT_ID = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
-const REDIRECT_URI = process.env.NEXT_PUBLIC_APP_URL
-  ? `${process.env.NEXT_PUBLIC_APP_URL}/auth/callback`
-  : 'https://btpxpress.lions.dev/auth/callback';
-
-export async function GET(request: NextRequest) {
-  console.log('🔐 Login API called');
-
-  // Générer un state aléatoire pour CSRF protection
-  const state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-
-  // Construire l'URL d'autorisation Keycloak
-  const authUrl = new URL(`${KEYCLOAK_URL}/realms/${KEYCLOAK_REALM}/protocol/openid-connect/auth`);
-
-  authUrl.searchParams.set('client_id', CLIENT_ID);
-  authUrl.searchParams.set('redirect_uri', REDIRECT_URI);
-  authUrl.searchParams.set('response_type', 'code');
-  authUrl.searchParams.set('scope', 'openid profile email');
-  authUrl.searchParams.set('state', state);
-
-  console.log('✅ Redirecting to Keycloak:', authUrl.toString());
-
-  // Rediriger vers Keycloak pour l'authentification
-  return NextResponse.redirect(authUrl.toString());
-}

app/api/auth/logout/route.ts

@@ -1,48 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { cookies } from 'next/headers';
-
-const KEYCLOAK_URL = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
-const KEYCLOAK_REALM = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
-const CLIENT_ID = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
-const POST_LOGOUT_REDIRECT_URI = process.env.NEXT_PUBLIC_APP_URL || 'https://btpxpress.lions.dev';
-
-export async function GET(request: NextRequest) {
-  console.log('🚪 Logout API called');
-
-  const cookieStore = await cookies();
-
-  // Récupérer l'id_token avant de supprimer les cookies
-  const idToken = cookieStore.get('id_token')?.value;
-
-  // Supprimer tous les cookies d'authentification
-  cookieStore.delete('access_token');
-  cookieStore.delete('refresh_token');
-  cookieStore.delete('id_token');
-  cookieStore.delete('token_expires_at');
-
-  console.log('✅ Authentication cookies deleted');
-
-  // Si on a un id_token, on fait un logout Keycloak
-  if (idToken) {
-    const logoutUrl = new URL(
-      `${KEYCLOAK_URL}/realms/${KEYCLOAK_REALM}/protocol/openid-connect/logout`
-    );
-
-    logoutUrl.searchParams.set('client_id', CLIENT_ID);
-    logoutUrl.searchParams.set('post_logout_redirect_uri', POST_LOGOUT_REDIRECT_URI);
-    logoutUrl.searchParams.set('id_token_hint', idToken);
-
-    console.log('✅ Redirecting to Keycloak logout');
-
-    return NextResponse.redirect(logoutUrl.toString());
-  }
-
-  // Sinon, rediriger directement vers la page d'accueil
-  console.log('✅ Redirecting to home page');
-  return NextResponse.redirect(POST_LOGOUT_REDIRECT_URI);
-}
-
-export async function POST(request: NextRequest) {
-  // Même logique pour POST
-  return GET(request);
-}

app/api/auth/token/route.ts

@@ -1,138 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { cookies } from 'next/headers';
-
-const KEYCLOAK_URL = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
-const KEYCLOAK_REALM = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
-const CLIENT_ID = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
-const REDIRECT_URI = process.env.NEXT_PUBLIC_APP_URL
-  ? `${process.env.NEXT_PUBLIC_APP_URL}/auth/callback`
-  : 'https://btpxpress.lions.dev/auth/callback';
-
-const TOKEN_ENDPOINT = `${KEYCLOAK_URL}/realms/${KEYCLOAK_REALM}/protocol/openid-connect/token`;
-
-export async function POST(request: NextRequest) {
-  console.log('🔐 Token exchange API called');
-
-  try {
-    const body = await request.json();
-    const { code, state } = body;
-
-    if (!code) {
-      console.error('❌ No authorization code provided');
-      return NextResponse.json(
-        { error: 'Code d\'autorisation manquant' },
-        { status: 400 }
-      );
-    }
-
-    console.log('✅ Exchanging code with Keycloak...');
-    console.log('📍 Token endpoint:', TOKEN_ENDPOINT);
-    console.log('📍 Client ID:', CLIENT_ID);
-    console.log('📍 Redirect URI:', REDIRECT_URI);
-
-    // Préparer les paramètres pour l'échange de code
-    const params = new URLSearchParams({
-      grant_type: 'authorization_code',
-      client_id: CLIENT_ID,
-      code: code,
-      redirect_uri: REDIRECT_URI,
-    });
-
-    // Échanger le code contre des tokens
-    const tokenResponse = await fetch(TOKEN_ENDPOINT, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: params.toString(),
-    });
-
-    if (!tokenResponse.ok) {
-      const errorText = await tokenResponse.text();
-      console.error('❌ Keycloak token exchange failed:', tokenResponse.status, errorText);
-
-      let errorData;
-      try {
-        errorData = JSON.parse(errorText);
-      } catch {
-        errorData = { error: 'Token exchange failed', details: errorText };
-      }
-
-      return NextResponse.json(
-        {
-          error: errorData.error || 'Échec de l\'échange de token',
-          error_description: errorData.error_description || 'Erreur lors de la communication avec Keycloak',
-          details: errorData
-        },
-        { status: tokenResponse.status }
-      );
-    }
-
-    const tokens = await tokenResponse.json();
-    console.log('✅ Tokens received from Keycloak');
-
-    // Stocker les tokens dans des cookies HttpOnly sécurisés
-    const cookieStore = await cookies();
-    const isProduction = process.env.NODE_ENV === 'production';
-
-    // Access token (durée: expires_in secondes)
-    cookieStore.set('access_token', tokens.access_token, {
-      httpOnly: true,
-      secure: isProduction,
-      sameSite: 'lax',
-      maxAge: tokens.expires_in || 300, // Par défaut 5 minutes
-      path: '/',
-    });
-
-    // Refresh token (durée plus longue)
-    if (tokens.refresh_token) {
-      cookieStore.set('refresh_token', tokens.refresh_token, {
-        httpOnly: true,
-        secure: isProduction,
-        sameSite: 'lax',
-        maxAge: tokens.refresh_expires_in || 1800, // Par défaut 30 minutes
-        path: '/',
-      });
-    }
-
-    // ID token
-    if (tokens.id_token) {
-      cookieStore.set('id_token', tokens.id_token, {
-        httpOnly: true,
-        secure: isProduction,
-        sameSite: 'lax',
-        maxAge: tokens.expires_in || 300,
-        path: '/',
-      });
-    }
-
-    // Stocker aussi le temps d'expiration
-    cookieStore.set('token_expires_at', String(Date.now() + (tokens.expires_in * 1000)), {
-      httpOnly: true,
-      secure: isProduction,
-      sameSite: 'lax',
-      maxAge: tokens.expires_in || 300,
-      path: '/',
-    });
-
-    console.log('✅ Tokens stored in HttpOnly cookies');
-
-    // Retourner une réponse de succès (sans les tokens)
-    return NextResponse.json({
-      success: true,
-      message: 'Authentification réussie',
-      expires_in: tokens.expires_in,
-    });
-
-  } catch (error) {
-    console.error('❌ Error in token exchange API:', error);
-
-    return NextResponse.json(
-      {
-        error: 'Erreur serveur',
-        message: error instanceof Error ? error.message : 'Erreur inconnue'
-      },
-      { status: 500 }
-    );
-  }
-}

app/api/auth/userinfo/route.ts

@@ -1,82 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { cookies } from 'next/headers';
-
-const KEYCLOAK_URL = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
-const KEYCLOAK_REALM = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
-
-const USERINFO_ENDPOINT = `${KEYCLOAK_URL}/realms/${KEYCLOAK_REALM}/protocol/openid-connect/userinfo`;
-
-export async function GET(request: NextRequest) {
-  console.log('👤 Userinfo API called');
-
-  try {
-    const cookieStore = await cookies();
-    const accessToken = cookieStore.get('access_token')?.value;
-
-    if (!accessToken) {
-      console.error('❌ No access token found');
-      return NextResponse.json(
-        { error: 'Non authentifié', authenticated: false },
-        { status: 401 }
-      );
-    }
-
-    console.log('✅ Access token found, fetching user info from Keycloak');
-
-    // Récupérer les informations utilisateur depuis Keycloak
-    const userinfoResponse = await fetch(USERINFO_ENDPOINT, {
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${accessToken}`,
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!userinfoResponse.ok) {
-      const errorText = await userinfoResponse.text();
-      console.error('❌ Keycloak userinfo failed:', userinfoResponse.status, errorText);
-
-      // Si le token est invalide ou expiré
-      if (userinfoResponse.status === 401) {
-        // Supprimer les cookies invalides
-        cookieStore.delete('access_token');
-        cookieStore.delete('refresh_token');
-        cookieStore.delete('id_token');
-        cookieStore.delete('token_expires_at');
-
-        return NextResponse.json(
-          { error: 'Token expiré ou invalide', authenticated: false },
-          { status: 401 }
-        );
-      }
-
-      return NextResponse.json(
-        {
-          error: 'Erreur lors de la récupération des informations utilisateur',
-          authenticated: false
-        },
-        { status: userinfoResponse.status }
-      );
-    }
-
-    const userinfo = await userinfoResponse.json();
-    console.log('✅ User info retrieved:', userinfo.preferred_username || userinfo.sub);
-
-    return NextResponse.json({
-      authenticated: true,
-      user: userinfo,
-    });
-
-  } catch (error) {
-    console.error('❌ Error in userinfo API:', error);
-
-    return NextResponse.json(
-      {
-        error: 'Erreur serveur',
-        authenticated: false,
-        message: error instanceof Error ? error.message : 'Erreur inconnue'
-      },
-      { status: 500 }
-    );
-  }
-}

app/auth/login/page.tsx

@@ -4,6 +4,7 @@ import React, { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Button } from 'primereact/button';
 import { Card } from 'primereact/card';
+import { redirectToLogin } from '@/lib/auth';
 
 function LoginContent() {
   const searchParams = useSearchParams();
@@ -15,8 +16,8 @@ function LoginContent() {
       sessionStorage.setItem('returnUrl', returnUrl);
     }
 
-    // Rediriger vers l'API de login qui initiera le flux OAuth
-    window.location.href = '/api/auth/login';
+    // Rediriger vers Keycloak pour l'authentification
+    redirectToLogin(returnUrl);
   };
 
   return (

app/page.tsx

@@ -11,6 +11,7 @@ import { Button } from 'primereact/button';
 import { LayoutContext } from '../layout/context/layoutcontext';
 import { PrimeReactContext } from 'primereact/api';
 import type { ColorScheme } from '@/types';
+import { redirectToLogin } from '@/lib/auth';
 
 const LandingPage = () => {
     const router = useRouter();
@@ -110,7 +111,7 @@ const LandingPage = () => {
                                 </a>
                             </li>
                             <li>
-                                <a onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
+                                <a onClick={() => redirectToLogin()} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
                                     <span>Connexion</span>
                                     <Ripple />
                                 </a>
@@ -168,7 +169,7 @@ const LandingPage = () => {
                             <span className="font-semibold text-gray-800">Facturation automatisée</span>
                         </div>
                     </div>
-                    <a onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'} className="p-button text-white bg-orange-500 border-orange-500 font-bold border-round cursor-pointer mr-3 shadow-3" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
+                    <a onClick={() => redirectToLogin()} className="p-button text-white bg-orange-500 border-orange-500 font-bold border-round cursor-pointer mr-3 shadow-3" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
                         <i className="pi pi-play mr-2"></i>
                         Démarrer maintenant
                     </a>
@@ -469,7 +470,7 @@ const LandingPage = () => {
                                     </li>
                                 </ul>
                                 <Button
-                                    onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'}
+                                    onClick={() => redirectToLogin()}
                                     className="w-full p-button-outlined border-orange-300 text-orange-600 font-semibold py-3"
                                 >
                                     Commencer l&apos;essai gratuit
@@ -513,7 +514,7 @@ const LandingPage = () => {
                                     </li>
                                 </ul>
                                 <Button
-                                    onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'}
+                                    onClick={() => redirectToLogin()}
                                     className="w-full bg-cyan-500 border-cyan-500 text-white font-semibold py-3"
                                 >
                                     Démarrer maintenant
@@ -554,7 +555,7 @@ const LandingPage = () => {
                                     </li>
                                 </ul>
                                 <Button
-                                    onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'}
+                                    onClick={() => redirectToLogin()}
                                     className="w-full p-button-outlined border-purple-300 text-purple-600 font-semibold py-3"
                                 >
                                     Nous contacter
@@ -576,7 +577,7 @@ const LandingPage = () => {
                             </p>
                             <div className="flex flex-wrap justify-content-center gap-3">
                                 <Button
-                                    onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'}
+                                    onClick={() => redirectToLogin()}
                                     style={{
                                         backgroundColor: 'white',
                                         color: '#f97316',
@@ -591,7 +592,7 @@ const LandingPage = () => {
                                     Essai gratuit 30 jours
                                 </Button>
                                 <Button
-                                    onClick={() => window.location.href = 'http://localhost:8080/api/v1/auth/login'}
+                                    onClick={() => redirectToLogin()}
                                     style={{
                                         backgroundColor: 'transparent',
                                         color: 'white',
@@ -636,8 +637,8 @@ const LandingPage = () => {
                                     <ul className="list-none p-0">
                                         <li className="mb-2"><a href="#features" className="text-gray-300 hover:text-white">Fonctionnalités</a></li>
                                         <li className="mb-2"><a href="#pricing" className="text-gray-300 hover:text-white">Tarifs</a></li>
-                                        <li className="mb-2"><a href="http://localhost:8080/api/v1/auth/login" className="text-gray-300 hover:text-white">Démo</a></li>
-                                        <li className="mb-2"><a href="http://localhost:8080/api/v1/auth/login" className="text-gray-300 hover:text-white">Essai gratuit</a></li>
+                                        <li className="mb-2"><a onClick={() => redirectToLogin()} className="text-gray-300 hover:text-white">Démo</a></li>
+                                        <li className="mb-2"><a onClick={() => redirectToLogin()} className="text-gray-300 hover:text-white">Essai gratuit</a></li>
                                     </ul>
                                 </div>
                                 <div className="col-6 md:col-3 mb-4">

app/page_backup.tsx

@@ -1,266 +0,0 @@
-'use client';
-
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Ripple } from 'primereact/ripple';
-import { InputText } from 'primereact/inputtext';
-import { StyleClass } from 'primereact/styleclass';
-import { useRouter } from 'next/navigation';
-import { Button } from 'primereact/button';
-import { LayoutContext } from '../layout/context/layoutcontext';
-import { PrimeReactContext } from 'primereact/api';
-import type { ColorScheme } from '@/types';
-
-const LandingPage = () => {
-    const router = useRouter();
-    const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
-    const { changeTheme } = useContext(PrimeReactContext);
-
-    const homeRef = useRef(null);
-    const timesRef = useRef(null);
-    const menuRef = useRef(null);
-    const menuButtonRef = useRef(null);
-    const meetRef = useRef(null);
-    const featuresRef = useRef(null);
-    const pricingRef = useRef(null);
-    const pricingButtonRef = useRef(null);
-    const buyRef = useRef(null);
-    const featuresButtonRef = useRef(null);
-
-    const goHome = () => {
-        router.push('/');
-    };
-
-    const scrollToElement = (el: React.RefObject<HTMLElement>) => {
-        if (el.current) {
-            el.current?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'nearest'
-            });
-        }
-    };
-
-    const changeColorScheme = (colorScheme: ColorScheme) => {
-        changeTheme?.(layoutConfig.colorScheme, colorScheme, 'theme-link', () => {
-            setLayoutConfig((prevState) => ({
-                ...prevState,
-                colorScheme,
-                menuTheme: layoutConfig.colorScheme === 'dark' ? 'dark' : 'light'
-            }));
-        });
-    };
-
-    useEffect(() => {
-        changeColorScheme('light');
-        setLayoutConfig((prevState) => ({
-            ...prevState,
-            menuTheme: 'light'
-        }));
-    }, []);
-
-    return (
-        <div ref={homeRef} className="landing-container" style={{ background: '#100e23' }}>
-            <div id="header" className="landing-header flex flex-column w-full p-6" style={{ minHeight: '1000px', background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)' }}>
-                <div className="header-menu-container flex align-items-center justify-content-between">
-                    <div className="header-left-elements flex align-items-center justify-content-between">
-                        <div className="cursor-pointer layout-topbar-logo flex align-items-center" onClick={goHome}>
-                            <i className="pi pi-building text-orange-600 text-3xl mr-3"></i>
-                            <span className="text-2xl font-bold text-gray-800">BTP Xpress</span>
-                        </div>
-
-                        <StyleClass nodeRef={menuButtonRef} selector="@next" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
-                            <a ref={menuButtonRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800" style={{ fontSize: '2rem' }}>
-                                <i className="pi pi-bars"></i>
-                                <Ripple />
-                            </a>
-                        </StyleClass>
-                        <ul
-                            ref={menuRef}
-                            id="menu"
-                            style={{ top: '0px', right: '0%' }}
-                            className="list-none  lg:flex lg:flex-row flex-column align-items-start bg-white absolute lg:relative h-screen lg:h-auto lg:surface-ground m-0 z-5 w-full sm:w-6 lg:w-full py-6 lg:py-0"
-                        >
-                            <StyleClass nodeRef={timesRef} selector="@parent" enterClassName="hidden" enterActiveClassName="px-scalein" leaveToClassName="hidden" leaveActiveClassName="px-fadeout">
-                                <a ref={timesRef} className="p-ripple cursor-pointer block lg:hidden text-gray-800 font-medium line-height-3 hover:text-gray-800 absolute" style={{ top: '3rem', right: '2rem' }}>
-                                    <i className="pi pi-times text-4xl"></i>
-                                    <Ripple />
-                                </a>
-                            </StyleClass>
-                            <li>
-                                <a onClick={() => scrollToElement(homeRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
-                                    <span>Accueil</span>
-                                    <Ripple />
-                                </a>
-                            </li>
-                            <li>
-                                <a onClick={() => scrollToElement(meetRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
-                                    <span>Découvrir</span>
-                                    <Ripple />
-                                </a>
-                            </li>
-                            <li>
-                                <a onClick={() => scrollToElement(featuresRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
-                                    <span>Fonctionnalités</span>
-                                    <Ripple />
-                                </a>
-                            </li>
-                            <li>
-                                <a onClick={() => scrollToElement(pricingRef)} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
-                                    <span>Tarifs</span>
-                                    <Ripple />
-                                </a>
-                            </li>
-                            <li>
-                                <a onClick={() => window.location.href = '/api/auth/login'} className="p-ripple flex m-0 md:ml-5 md:px-0 px-3 py-3 text-gray-800 font-medium line-height-3 hover:text-gray-800 cursor-pointer">
-                                    <span>Connexion</span>
-                                    <Ripple />
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                    <div className="header-right-elements flex align-items-center">
-                        <a onClick={() => {
-                            const keycloakUrl = process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev';
-                            const realm = process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress';
-                            const clientId = process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend';
-                            const redirectUri = encodeURIComponent(window.location.origin + '/dashboard');
-                            window.location.href = `${keycloakUrl}/realms/${realm}/protocol/openid_connect/registrations?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}`;
-                        }} className="p-button p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-white bg-orange-500 border-orange-500 cursor-pointer mr-3" style={{ padding: '0.714rem 1.5rem' }}>
-                            <span aria-hidden="true" className="p-button-label">
-                                Démarrer maintenant
-                            </span>
-                        </a>
-                        <a href="/pages/contact">
-                            <Button className="contact-button mr-3 p-button-outlined p-button-secondary p-button-text p-button p-component font-medium border-round text-gray-700" style={{ background: 'rgba(68, 72, 109, 0.05)' }}>
-                                <span aria-hidden="true" className="p-button-label">
-                                    Contact
-                                </span>
-                            </Button>
-                        </a>
-                    </div>
-                </div>
-
-                <div className="header-text" style={{ padding: '100px 60px' }}>
-                    <div className="flex align-items-center mb-4">
-                        <i className="pi pi-building text-orange-600 text-4xl mr-3"></i>
-                        <span className="text-3xl font-bold text-gray-800">BTP Xpress</span>
-                    </div>
-                    <h1 className="mb-0 text-gray-800" style={{ fontSize: '80px', lineHeight: '95px' }}>
-                        Construisez l&apos;avenir
-                    </h1>
-                    <h2 className="mt-0 font-medium text-4xl text-gray-700">avec BTP Xpress, la suite logicielle qui transforme le BTP</h2>
-                    <p className="text-xl text-gray-600 mb-5 line-height-3" style={{ maxWidth: '650px' }}>
-                        <strong>Fini les chantiers qui dérapent, les budgets qui explosent et les équipes désorganisées.</strong>
-                        BTP Xpress centralise tout : de la première estimation au dernier m² livré,
-                        pilotez vos projets avec la précision d&apos;un architecte et l&apos;efficacité d&apos;un chef de chantier expérimenté.
-                    </p>
-
-                    <div className="flex flex-wrap gap-3 mb-6">
-                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
-                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
-                            <span className="font-semibold text-gray-800">Gestion complète de projets</span>
-                        </div>
-                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
-                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
-                            <span className="font-semibold text-gray-800">Suivi temps réel</span>
-                        </div>
-                        <div className="flex align-items-center bg-white px-4 py-2 border-round shadow-2">
-                            <i className="pi pi-check-circle text-green-600 mr-2"></i>
-                            <span className="font-semibold text-gray-800">Facturation automatisée</span>
-                        </div>
-                    </div>
-                    <a onClick={() => window.location.href = '/api/auth/login'} className="p-button text-white bg-orange-500 border-orange-500 font-bold border-round cursor-pointer mr-3 shadow-3" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
-                        <i className="pi pi-play mr-2"></i>
-                        Démarrer maintenant
-                    </a>
-                    <a href="#features" className="p-button p-button-outlined text-orange-600 border-orange-300 font-bold border-round cursor-pointer" style={{ padding: '1.2rem 2.5rem', fontSize: '1.2rem' }}>
-                        <i className="pi pi-eye mr-2"></i>
-                        Voir les fonctionnalités
-                    </a>
-                </div>
-
-                <div ref={featuresRef} className="header-features" style={{ padding: '100px 60px' }}>
-                    <div className="text-center mb-6">
-                        <h2 className="text-4xl font-bold text-gray-800 mb-4">Spécialisé pour tous les métiers du BTP</h2>
-                        <p className="text-xl text-gray-600">Une solution adaptée à chaque corps de métier</p>
-                    </div>
-                    <div className="grid">
-                        <div className="col-12 md:col-6 lg:col-3 mb-4">
-                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
-                                <i className="pi pi-home text-4xl mb-3 block"></i>
-                                <span className="title mb-3 block text-2xl font-semibold">Gros Œuvre &amp; Structure</span>
-                                <span className="content">Béton, maçonnerie, charpente : gérez vos approvisionnements, planifiez vos coulages, suivez vos cadences et optimisez vos rotations d&apos;équipes.</span>
-                            </div>
-                        </div>
-                        <div className="col-12 md:col-6 lg:col-3 mb-4">
-                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
-                                <i className="pi pi-wrench text-4xl mb-3 block"></i>
-                                <span className="title mb-3 block text-2xl font-semibold">Second Œuvre &amp; Finitions</span>
-                                <span className="content">Électricité, plomberie, peinture, carrelage : coordonnez vos interventions, gérez vos stocks et respectez les délais de livraison.</span>
-                            </div>
-                        </div>
-                        <div className="col-12 md:col-6 lg:col-3 mb-4">
-                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
-                                <i className="pi pi-car text-4xl mb-3 block"></i>
-                                <span className="title mb-3 block text-2xl font-semibold">Travaux Publics &amp; VRD</span>
-                                <span className="content">Terrassement, voirie, réseaux : planifiez vos chantiers, gérez votre matériel et optimisez vos déplacements d&apos;équipes.</span>
-                            </div>
-                        </div>
-                        <div className="col-12 md:col-6 lg:col-3 mb-4">
-                            <div className="bg-white p-6 border-round shadow-2 text-center h-full">
-                                <i className="pi pi-briefcase text-4xl mb-3 block"></i>
-                                <span className="title mb-3 block text-2xl font-semibold">Maîtrise d&apos;Œuvre &amp; AMO</span>
-                                <span className="content">Pilotage de projets, coordination, suivi budgétaire : centralisez tous vos dossiers et collaborez efficacement avec tous les intervenants.</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div ref={meetRef} id="meet-btpxpress" className="flex justify-content-center w-full relative text-center py-8" style={{ minHeight: '400px', background: 'linear-gradient(135deg, #f97316 0%, #fb923c 30%, #fed7aa 100%)', boxShadow: '0 10px 25px rgba(249, 115, 22, 0.15)', zIndex: 100, position: 'relative' }}>
-                <div className="flex flex-column align-items-center justify-content-center px-6">
-                    <h2 className="text-4xl font-bold text-gray-800 mb-4">
-                        BTP Xpress en action
-                    </h2>
-                    <p className="text-xl text-gray-700 mb-6 line-height-3" style={{ maxWidth: '600px' }}>
-                        Découvrez comment nos clients transforment leur activité BTP avec des outils pensés pour leur réussite
-                    </p>
-                    <div className="grid w-full" style={{ maxWidth: '900px' }}>
-                        <div className="col-12 md:col-4 text-center mb-4">
-                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
-                                <i className="pi pi-clock text-orange-600 text-4xl mb-3"></i>
-                                <div className="text-3xl font-bold text-green-600 mb-2">-50%</div>
-                                <div className="text-lg font-semibold text-gray-800">Temps administratif</div>
-                                <div className="text-sm text-gray-600">Automatisation des tâches répétitives</div>
-                            </div>
-                        </div>
-                        <div className="col-12 md:col-4 text-center mb-4">
-                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
-                                <i className="pi pi-chart-bar text-green-600 text-4xl mb-3"></i>
-                                <div className="text-3xl font-bold text-green-600 mb-2">+35%</div>
-                                <div className="text-lg font-semibold text-gray-800">Rentabilité</div>
-                                <div className="text-sm text-gray-600">Optimisation des coûts et marges</div>
-                            </div>
-                        </div>
-                        <div className="col-12 md:col-4 text-center mb-4">
-                            <div className="bg-white border-round p-4 shadow-2" style={{ border: '1px solid #e5e7eb' }}>
-                                <i className="pi pi-users text-blue-600 text-4xl mb-3"></i>
-                                <div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
-                                <div className="text-lg font-semibold text-gray-800">Satisfaction client</div>
-                                <div className="text-sm text-gray-600">Respect des délais et qualité</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="w-full py-6" style={{ background: 'linear-gradient(180deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%)' }}>
-                <div id="features" className="px-4 lg:px-8 features">
-                    <h2 className="font-medium text-3xl text-center text-gray-800 mb-6">La différence BTP Xpress : des résultats concrets</h2>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default LandingPage;

components/ClientProviders.tsx

@@ -2,6 +2,7 @@
 
 import { LayoutProvider } from '../layout/context/layoutcontext';
 import { PrimeReactProvider } from 'primereact/api';
+import { KeycloakProvider } from '../contexts/KeycloakContext';
 import { AuthProvider } from '../contexts/AuthContext';
 import { DevAuthProvider } from './auth/DevAuthProvider';
 import { useServerStatusInit } from '../hooks/useServerStatusInit';
@@ -12,11 +13,13 @@ export function ClientProviders({ children }: { children: React.ReactNode }) {
 
     return (
         <PrimeReactProvider>
-            <DevAuthProvider>
-                <AuthProvider>
-                    <LayoutProvider>{children}</LayoutProvider>
-                </AuthProvider>
-            </DevAuthProvider>
+            <KeycloakProvider>
+                <DevAuthProvider>
+                    <AuthProvider>
+                        <LayoutProvider>{children}</LayoutProvider>
+                    </AuthProvider>
+                </DevAuthProvider>
+            </KeycloakProvider>
         </PrimeReactProvider>
     );
 }

components/ProtectedLayout.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { useAuth } from '../contexts/AuthContext';
+import { useKeycloak } from '../contexts/KeycloakContext';
 import LoadingSpinner from './ui/LoadingSpinner';
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import { useEffect, useRef, useMemo } from 'react';
@@ -18,6 +19,7 @@ const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
   requiredPermissions = []
 }) => {
   const { isAuthenticated, isLoading, user, hasRole, hasPermission } = useAuth();
+  const { keycloak } = useKeycloak();
   const router = useRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
@@ -26,8 +28,8 @@ const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
   // Vérifier s'il y a un code d'autorisation dans l'URL
   // Utiliser useMemo pour éviter les re-rendus inutiles
   const hasAuthCode = useMemo(() => {
-    return searchParams.get('code') !== null && pathname === '/dashboard';
-  }, [searchParams, pathname]);
+    return searchParams.get('code') !== null;
+  }, [searchParams]);
 
   useEffect(() => {
     console.log('🔍 ProtectedLayout useEffect:', {
@@ -48,11 +50,17 @@ const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
       // Marquer comme redirigé pour éviter les boucles
       redirectedRef.current = true;
 
-      // Rediriger vers la page de connexion avec l'URL de retour
-      const searchParamsStr = searchParams.toString();
-      const currentPath = pathname + (searchParamsStr ? `?${searchParamsStr}` : '');
-      console.log('🔒 ProtectedLayout: Redirection vers /api/auth/login');
-      window.location.href = `/api/auth/login?redirect=${encodeURIComponent(currentPath)}`;
+      // Rediriger vers Keycloak avec l'URL de retour
+      console.log('🔒 ProtectedLayout: Redirection vers Keycloak');
+      if (keycloak) {
+        const searchParamsStr = searchParams.toString();
+        const currentPath = pathname + (searchParamsStr ? `?${searchParamsStr}` : '');
+        const redirectUri = currentPath && currentPath !== '/'
+          ? `${window.location.origin}${currentPath}`
+          : `${window.location.origin}/dashboard`;
+
+        keycloak.login({ redirectUri });
+      }
     } else if (hasAuthCode) {
       console.log('🔓 ProtectedLayout: Code d\'autorisation détecté, pas de redirection');
     } else if (isAuthenticated) {
@@ -60,7 +68,7 @@ const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
     } else if (isLoading) {
       console.log('⏳ ProtectedLayout: Chargement en cours, pas de redirection');
     }
-  }, [isAuthenticated, isLoading, hasAuthCode, pathname]);
+  }, [isAuthenticated, isLoading, hasAuthCode, pathname, keycloak]);
 
   useEffect(() => {
     if (isAuthenticated && user) {

components/layout/AppLayout.tsx

@@ -12,6 +12,7 @@ import { StyleClass } from 'primereact/styleclass';
 import { useRouter } from 'next/navigation';
 import { useDevAuth } from '../auth/DevAuthProvider';
 import Link from 'next/link';
+import { redirectToLogin } from '@/lib/auth';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -114,7 +115,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
       icon: 'pi pi-sign-out',
       command: () => {
         logout();
-        window.location.href = '/api/auth/login';
+        redirectToLogin();
       }
     }
   ];

contexts/AuthContext.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import React, { createContext, useContext, useEffect, useState, useCallback, ReactNode } from 'react';
-import { initKeycloak, keycloakInitOptions, RoleUtils, BTP_ROLES, KEYCLOAK_TIMEOUTS, KEYCLOAK_REDIRECTS } from '@/config/keycloak';
+import { useKeycloak } from './KeycloakContext';
+import { RoleUtils, BTP_ROLES } from '@/config/keycloak';
 import { useRouter } from 'next/navigation';
 
 // Types pour l'authentification
@@ -62,6 +63,9 @@ interface AuthProviderProps {
 export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const router = useRouter();
 
+  // Utiliser le contexte Keycloak
+  const { keycloak, authenticated, loading, token, login: keycloakLogin, logout: keycloakLogout, updateToken: keycloakUpdateToken } = useKeycloak();
+
   // État de l'authentification
   const [authState, setAuthState] = useState<AuthState>({
     isAuthenticated: false,
@@ -178,11 +182,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   }, [fetchUserInfo, extractUserInfo]);
 
-  // Fonction de connexion
+  // Fonction de connexion - utilise Keycloak JS SDK
   const login = useCallback(async (): Promise<void> => {
     try {
-      // Redirection directe vers l'API d'authentification
-      window.location.href = '/api/auth/login';
+      keycloakLogin();
     } catch (error) {
       console.error('Erreur lors de la connexion:', error);
       setAuthState(prev => ({
@@ -191,21 +194,12 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
         isLoading: false,
       }));
     }
-  }, []);
+  }, [keycloakLogin]);
 
-  // Fonction de déconnexion
+  // Fonction de déconnexion - utilise Keycloak JS SDK
   const logout = useCallback(async (): Promise<void> => {
     try {
-      // Nettoyer les tokens locaux
-      localStorage.removeItem('accessToken');
-      localStorage.removeItem('refreshToken');
-      localStorage.removeItem('idToken');
-
-      // Supprimer le cookie
-      document.cookie = 'keycloak-token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
-
-      // Redirection directe vers l'API de déconnexion
-      window.location.href = '/api/auth/logout';
+      keycloakLogout();
     } catch (error) {
       console.error('Erreur lors de la déconnexion:', error);
       // Forcer la déconnexion locale même en cas d'erreur
@@ -219,45 +213,32 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       });
       router.push('/');
     }
-  }, [router]);
+  }, [keycloakLogout, router]);
 
-  // Fonction pour rafraîchir l'authentification
+  // Fonction pour rafraîchir l'authentification - utilise Keycloak SDK
   const refreshAuth = useCallback(async (): Promise<void> => {
     try {
-      // Vérifier les tokens stockés
-      const accessToken = localStorage.getItem('accessToken');
-      const refreshToken = localStorage.getItem('refreshToken');
-
-      if (!refreshToken) {
-        await logout();
-        return;
+      if (keycloak && authenticated) {
+        await keycloakUpdateToken();
       }
-
-      // TODO: Implémenter le rafraîchissement via API si nécessaire
-      console.log('Rafraîchissement des tokens...');
-
     } catch (error) {
       console.error('Erreur lors du rafraîchissement du token:', error);
       await logout();
     }
-  }, [logout]);
+  }, [keycloak, authenticated, keycloakUpdateToken, logout]);
 
-  // Fonction pour mettre à jour le token
+  // Fonction pour mettre à jour le token - utilise Keycloak SDK
   const updateToken = useCallback(async (minValidity: number = 30): Promise<boolean> => {
     try {
-      // Vérifier si le token est encore valide
-      const accessToken = localStorage.getItem('accessToken');
-      if (!accessToken) {
-        return false;
+      if (keycloak && authenticated) {
+        return await keycloakUpdateToken();
       }
-
-      // TODO: Vérifier l'expiration du token et rafraîchir si nécessaire
-      return true;
+      return false;
     } catch (error) {
       console.error('Erreur lors de la mise à jour du token:', error);
       return false;
     }
-  }, []);
+  }, [keycloak, authenticated, keycloakUpdateToken]);
 
   // Fonctions utilitaires pour les rôles et permissions
   const hasRole = useCallback((role: string): boolean => {
@@ -277,65 +258,39 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     return RoleUtils.isRoleHigher(authState.user.highestRole, role);
   }, [authState.user]);
 
-  // Initialisation de Keycloak - Désactivée pour utiliser l'authentification manuelle
+  // Synchroniser l'état avec KeycloakContext
   useEffect(() => {
-    const initializeKeycloak = async () => {
-      try {
-        // Vérifier s'il y a des tokens stockés localement
-        const accessToken = localStorage.getItem('accessToken');
-        const refreshToken = localStorage.getItem('refreshToken');
-        const idToken = localStorage.getItem('idToken');
+    const syncAuthState = async () => {
+      if (loading) {
+        setAuthState({
+          isAuthenticated: false,
+          isLoading: true,
+          user: null,
+          token: null,
+          refreshToken: null,
+          error: null,
+        });
+        return;
+      }
 
-        if (accessToken) {
-          // Stocker aussi dans un cookie pour le middleware
-          document.cookie = `keycloak-token=${accessToken}; path=/; max-age=3600; SameSite=Lax`;
+      if (authenticated && keycloak && token) {
+        // Essayer de récupérer les informations utilisateur depuis l'API
+        let user = await fetchUserInfo(token);
 
-          // Récupérer les informations utilisateur depuis l'API
-          try {
-            const user = await fetchUserInfo(accessToken);
-
-            if (user) {
-              setAuthState({
-                isAuthenticated: true,
-                isLoading: false,
-                user,
-                token: accessToken,
-                refreshToken: refreshToken,
-                error: null,
-              });
-              return;
-            }
-          } catch (error) {
-            console.warn('Impossible de récupérer les informations utilisateur depuis l\'API, utilisation des données par défaut');
-          }
-
-          // Fallback avec des données par défaut si l'API ne répond pas
-          setAuthState({
-            isAuthenticated: true,
-            isLoading: false,
-            user: {
-              id: 'dev-user-001',
-              username: 'admin.btpxpress',
-              email: 'admin@btpxpress.com',
-              firstName: 'Jean-Michel',
-              lastName: 'Martineau',
-              fullName: 'Jean-Michel Martineau',
-              roles: [BTP_ROLES.SUPER_ADMIN, BTP_ROLES.ADMIN, BTP_ROLES.DIRECTEUR],
-              permissions: RoleUtils.getUserPermissions([BTP_ROLES.SUPER_ADMIN]),
-              highestRole: BTP_ROLES.SUPER_ADMIN,
-              isAdmin: true,
-              isManager: true,
-              isEmployee: false,
-              isClient: false,
-            },
-            token: accessToken,
-            refreshToken: refreshToken,
-            error: null,
-          });
-          return;
+        // Si l'API ne répond pas, extraire du token JWT
+        if (!user) {
+          user = extractUserInfo(keycloak);
         }
 
-        // Pas de tokens, rester non authentifié
+        setAuthState({
+          isAuthenticated: true,
+          isLoading: false,
+          user,
+          token: token,
+          refreshToken: keycloak.refreshToken || null,
+          error: null,
+        });
+      } else {
         setAuthState({
           isAuthenticated: false,
           isLoading: false,
@@ -344,33 +299,13 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
           refreshToken: null,
           error: null,
         });
-
-      } catch (error) {
-        console.error('Erreur lors de l\'initialisation de l\'authentification:', error);
-        setAuthState({
-          isAuthenticated: false,
-          isLoading: false,
-          user: null,
-          token: null,
-          refreshToken: null,
-          error: 'Erreur lors de l\'initialisation de l\'authentification',
-        });
       }
     };
 
-    initializeKeycloak();
-  }, [updateAuthState, refreshAuth, logout]);
+    syncAuthState();
+  }, [authenticated, loading, token, keycloak, fetchUserInfo, extractUserInfo]);
 
-  // Rafraîchissement automatique du token
-  useEffect(() => {
-    if (!authState.isAuthenticated) return;
-
-    const interval = setInterval(() => {
-      updateToken();
-    }, KEYCLOAK_TIMEOUTS.SESSION_CHECK_INTERVAL * 1000);
-
-    return () => clearInterval(interval);
-  }, [authState.isAuthenticated, updateToken]);
+  // Le rafraîchissement automatique du token est géré par KeycloakContext
 
   // Valeur du contexte
   const contextValue: AuthContextType = {

contexts/KeycloakContext.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import Keycloak from 'keycloak-js';
+import keycloak from '../lib/keycloak';
+
+interface KeycloakContextType {
+  keycloak: Keycloak | null;
+  authenticated: boolean;
+  loading: boolean;
+  token: string | null;
+  login: () => void;
+  logout: () => void;
+  updateToken: () => Promise<boolean>;
+}
+
+const KeycloakContext = createContext<KeycloakContextType | undefined>(undefined);
+
+export const useKeycloak = () => {
+  const context = useContext(KeycloakContext);
+  if (!context) {
+    throw new Error('useKeycloak must be used within a KeycloakProvider');
+  }
+  return context;
+};
+
+interface KeycloakProviderProps {
+  children: ReactNode;
+}
+
+export const KeycloakProvider: React.FC<KeycloakProviderProps> = ({ children }) => {
+  const [authenticated, setAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initKeycloak = async () => {
+      try {
+        console.log('🔐 Initializing Keycloak...');
+
+        const authenticated = await keycloak.init({
+          onLoad: 'check-sso',
+          silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
+          pkceMethod: 'S256',
+          checkLoginIframe: false, // Désactivé pour éviter les problèmes CORS
+          flow: 'standard', // Force authorization_code flow (pas implicit/hybrid)
+          responseMode: 'query', // Force query string au lieu de fragment
+        });
+
+        console.log(`✅ Keycloak initialized. Authenticated: ${authenticated}`);
+
+        setAuthenticated(authenticated);
+        setToken(keycloak.token || null);
+
+        // Rafraîchir le token automatiquement
+        if (authenticated) {
+          setInterval(() => {
+            keycloak.updateToken(70).then((refreshed) => {
+              if (refreshed) {
+                console.log('🔄 Token refreshed');
+                setToken(keycloak.token || null);
+              }
+            }).catch(() => {
+              console.error('❌ Failed to refresh token');
+              setAuthenticated(false);
+            });
+          }, 60000); // Toutes les 60 secondes
+        }
+      } catch (error) {
+        console.error('❌ Keycloak initialization failed:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    initKeycloak();
+  }, []);
+
+  const login = () => {
+    keycloak.login({
+      redirectUri: window.location.origin + '/dashboard',
+    });
+  };
+
+  const logout = () => {
+    keycloak.logout({
+      redirectUri: window.location.origin,
+    });
+  };
+
+  const updateToken = async (): Promise<boolean> => {
+    try {
+      const refreshed = await keycloak.updateToken(30);
+      if (refreshed) {
+        setToken(keycloak.token || null);
+      }
+      return refreshed;
+    } catch (error) {
+      console.error('Failed to update token', error);
+      return false;
+    }
+  };
+
+  const value: KeycloakContextType = {
+    keycloak,
+    authenticated,
+    loading,
+    token,
+    login,
+    logout,
+    updateToken,
+  };
+
+  return (
+    <KeycloakContext.Provider value={value}>
+      {children}
+    </KeycloakContext.Provider>
+  );
+};

lib/auth.ts

@@ -0,0 +1,78 @@
+/**
+ * Utilitaires d'authentification centralisés
+ * Utilise le SDK Keycloak JS pour toutes les opérations d'authentification
+ *
+ * IMPORTANT: Utilise un import conditionnel pour éviter les erreurs SSR
+ */
+
+/**
+ * Récupère l'instance Keycloak de manière sécurisée (client-side uniquement)
+ */
+const getKeycloak = async () => {
+  if (typeof window === 'undefined') return null;
+  const { default: keycloak } = await import('./keycloak');
+  return keycloak;
+};
+
+/**
+ * Redirige vers la page de connexion Keycloak
+ */
+export const redirectToLogin = async (returnUrl?: string) => {
+  if (typeof window === 'undefined') return;
+
+  const keycloak = await getKeycloak();
+  if (keycloak) {
+    const redirectUri = returnUrl
+      ? `${window.location.origin}${returnUrl}`
+      : `${window.location.origin}/dashboard`;
+
+    keycloak.login({ redirectUri });
+  } else {
+    console.error('❌ Keycloak non initialisé');
+  }
+};
+
+/**
+ * Redirige vers la page de déconnexion Keycloak
+ */
+export const redirectToLogout = async () => {
+  if (typeof window === 'undefined') return;
+
+  const keycloak = await getKeycloak();
+  if (keycloak) {
+    keycloak.logout({ redirectUri: window.location.origin });
+  } else {
+    console.error('❌ Keycloak non initialisé');
+  }
+};
+
+/**
+ * Vérifie si l'utilisateur est authentifié
+ */
+export const isAuthenticated = async (): Promise<boolean> => {
+  const keycloak = await getKeycloak();
+  return keycloak?.authenticated ?? false;
+};
+
+/**
+ * Récupère le token d'accès actuel
+ */
+export const getAccessToken = async (): Promise<string | undefined> => {
+  const keycloak = await getKeycloak();
+  return keycloak?.token;
+};
+
+/**
+ * Rafraîchit le token si nécessaire
+ */
+export const refreshToken = async (minValidity: number = 30): Promise<boolean> => {
+  const keycloak = await getKeycloak();
+  if (!keycloak) return false;
+
+  try {
+    return await keycloak.updateToken(minValidity);
+  } catch (error) {
+    console.error('❌ Erreur lors du rafraîchissement du token:', error);
+    return false;
+  }
+};

lib/keycloak.ts

@@ -0,0 +1,14 @@
+import Keycloak from 'keycloak-js';
+
+// Configuration Keycloak
+const keycloakConfig = {
+  url: process.env.NEXT_PUBLIC_KEYCLOAK_URL || 'https://security.lions.dev',
+  realm: process.env.NEXT_PUBLIC_KEYCLOAK_REALM || 'btpxpress',
+  clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID || 'btpxpress-frontend',
+};
+
+// Créer une instance Keycloak uniquement côté client
+// Pour éviter les erreurs SSR (document is not defined)
+const keycloak = typeof window !== 'undefined' ? new Keycloak(keycloakConfig) : null;
+
+export default keycloak as Keycloak;

middleware.ts

@@ -1,97 +1,17 @@
 /**
- * Middleware Next.js pour l'authentification OAuth avec Keycloak
+ * Middleware Next.js simplifié pour Frontend-Centric auth
  *
- * Ce middleware protège les routes privées en vérifiant la présence
- * d'un access_token dans les cookies HttpOnly.
+ * Avec Keycloak JS SDK, l'authentification est gérée côté client par KeycloakContext.
+ * Ce middleware laisse passer toutes les requêtes - la protection des routes est
+ * gérée par ProtectedLayout et AuthContext côté client.
  */
 
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
-// Routes publiques accessibles sans authentification
-const PUBLIC_ROUTES = [
-  '/',
-  '/auth/login',
-  '/auth/callback',
-  '/api/auth/login',
-  '/api/auth/callback',
-  '/api/auth/token',
-  '/api/health',
-];
-
-// Routes API publiques (patterns)
-const PUBLIC_API_PATTERNS = [
-  /^\/api\/auth\/.*/,
-  /^\/api\/health/,
-];
-
-// Vérifie si une route est publique
-function isPublicRoute(pathname: string): boolean {
-  // Vérifier les routes exactes
-  if (PUBLIC_ROUTES.includes(pathname)) {
-    return true;
-  }
-
-  // Vérifier les patterns
-  return PUBLIC_API_PATTERNS.some(pattern => pattern.test(pathname));
-}
-
 export function middleware(request: NextRequest) {
-  const { pathname } = request.nextUrl;
-
-  console.log('🔒 Middleware - Checking:', pathname);
-
-  // Laisser passer les routes publiques
-  if (isPublicRoute(pathname)) {
-    console.log('✅ Middleware - Public route, allowing');
-    return NextResponse.next();
-  }
-
-  // Laisser passer les fichiers statiques
-  if (
-    pathname.startsWith('/_next') ||
-    pathname.startsWith('/static') ||
-    pathname.includes('.')
-  ) {
-    return NextResponse.next();
-  }
-
-  // Vérifier la présence du token d'authentification
-  const accessToken = request.cookies.get('access_token');
-  const tokenExpiresAt = request.cookies.get('token_expires_at');
-
-  if (!accessToken) {
-    console.log('❌ Middleware - No access token, redirecting to login');
-
-    // Rediriger vers la page de login avec l'URL de retour
-    const loginUrl = new URL('/auth/login', request.url);
-    loginUrl.searchParams.set('returnUrl', pathname);
-
-    return NextResponse.redirect(loginUrl);
-  }
-
-  // Vérifier si le token est expiré
-  if (tokenExpiresAt) {
-    const expiresAt = parseInt(tokenExpiresAt.value, 10);
-    const now = Date.now();
-
-    if (now >= expiresAt) {
-      console.log('❌ Middleware - Token expired, redirecting to login');
-
-      // Supprimer les cookies expirés
-      const response = NextResponse.redirect(new URL('/auth/login', request.url));
-      response.cookies.delete('access_token');
-      response.cookies.delete('refresh_token');
-      response.cookies.delete('id_token');
-      response.cookies.delete('token_expires_at');
-
-      return response;
-    }
-  }
-
-  console.log('✅ Middleware - Authenticated, allowing');
-
-  // L'utilisateur est authentifié, laisser passer
+  // Laisser passer toutes les requêtes
+  // L'authentification est gérée côté client par Keycloak JS SDK
   return NextResponse.next();
 }
 

public/silent-check-sso.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Silent SSO Check</title>
+</head>
+<body>
+    <script>
+        parent.postMessage(location.href, location.origin);
+    </script>
+</body>
+</html>

services/ApiService.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { API_CONFIG } from '../config/api';
-import { keycloak, KEYCLOAK_TIMEOUTS } from '../config/keycloak';
+import keycloak from '../lib/keycloak';
 
 class ApiService {
     private api = axios.create({
@@ -16,8 +16,8 @@ class ApiService {
                 // Vérifier si Keycloak est initialisé et l'utilisateur authentifié
                 if (keycloak && keycloak.authenticated) {
                     try {
-                        // Rafraîchir le token si nécessaire
-                        await keycloak.updateToken(KEYCLOAK_TIMEOUTS.TOKEN_REFRESH_BEFORE_EXPIRY);
+                        // Rafraîchir le token si nécessaire (70 secondes avant expiration)
+                        await keycloak.updateToken(70);
 
                         // Ajouter le token Bearer à l'en-tête Authorization
                         if (keycloak.token) {
@@ -29,22 +29,6 @@ class ApiService {
                         keycloak.login();
                         throw error;
                     }
-                } else {
-                    // Fallback vers l'ancien système pour la rétrocompatibilité
-                    let token = null;
-                    try {
-                        const authTokenItem = sessionStorage.getItem('auth_token') || localStorage.getItem('auth_token');
-                        if (authTokenItem) {
-                            const parsed = JSON.parse(authTokenItem);
-                            token = parsed.value;
-                        }
-                    } catch (e) {
-                        token = localStorage.getItem('token');
-                    }
-
-                    if (token) {
-                        config.headers['Authorization'] = `Bearer ${token}`;
-                    }
                 }
                 return config;
             },
@@ -73,12 +57,10 @@ class ApiService {
                             const hasAuthCode = currentUrl.includes('code=') && currentUrl.includes('/dashboard');
 
                             if (!hasAuthCode) {
-                                // Fallback vers l'ancien système
-                                localStorage.removeItem('token');
-                                localStorage.removeItem('user');
-                                localStorage.removeItem('auth_token');
-                                sessionStorage.removeItem('auth_token');
-                                window.location.href = '/api/auth/login';
+                                console.log('❌ Non authentifié, redirection vers Keycloak...');
+                                if (keycloak) {
+                                    keycloak.login();
+                                }
                             } else {
                                 console.log('🔄 ApiService: Erreur 401 ignorée car authentification en cours...');
                             }

services/api.ts

@@ -4,7 +4,7 @@
 
 import axios, { AxiosInstance, AxiosResponse } from 'axios';
 import { API_CONFIG } from '../config/api';
-import { keycloak, KEYCLOAK_TIMEOUTS } from '../config/keycloak';
+import keycloak from '../lib/keycloak';
 import { CacheService, CacheKeys } from './cacheService';
 import {
   Client,
@@ -42,18 +42,30 @@ class ApiService {
     // Interceptor pour les requêtes
     this.api.interceptors.request.use(
       async (config) => {
-        // Les tokens sont dans des cookies HttpOnly, automatiquement envoyés par le navigateur
-        // Pas besoin de les ajouter manuellement dans les headers
-        // Le header Authorization sera ajouté par le serveur en lisant les cookies
-
         console.log('🔐 API Request:', config.url);
 
+        // Vérifier si Keycloak est initialisé et l'utilisateur authentifié
+        if (keycloak && keycloak.authenticated && keycloak.token) {
+          try {
+            // Rafraîchir le token si nécessaire (70 secondes avant expiration)
+            await keycloak.updateToken(70);
+
+            // Ajouter le token Bearer à l'en-tête Authorization
+            config.headers['Authorization'] = `Bearer ${keycloak.token}`;
+            console.log('✅ Token ajouté à la requête');
+          } catch (error) {
+            console.error('❌ Erreur lors de la mise à jour du token Keycloak:', error);
+            // En cas d'erreur, rediriger vers la page de connexion
+            keycloak.login();
+            throw error;
+          }
+        } else {
+          console.warn('⚠️ Keycloak non authentifié, requête sans token');
+        }
+
         // Ajouter des en-têtes par défaut
         config.headers['X-Requested-With'] = 'XMLHttpRequest';
 
-        // Assurer que les cookies sont envoyés avec les requêtes CORS
-        config.withCredentials = true;
-
         return config;
       },
       (error) => {
@@ -103,16 +115,29 @@ class ApiService {
             const hasAuthCode = currentUrl.includes('code=') && currentUrl.includes('/dashboard');
 
             if (!hasAuthCode) {
-              console.log('🔄 Token expiré ou absent, redirection vers la connexion...');
-              // Sauvegarder la page actuelle pour y revenir après reconnexion
-              const currentPath = window.location.pathname + window.location.search;
-              sessionStorage.setItem('returnUrl', currentPath);
+              console.log('🔄 Token expiré ou absent, redirection vers Keycloak...');
 
-              // Les cookies HttpOnly seront automatiquement nettoyés par l'expiration
-              // ou lors de la reconnexion. Pas besoin de manipulation côté client.
-
-              // Rediriger vers la page de connexion
-              window.location.href = '/api/auth/login';
+              // Essayer de rafraîchir le token Keycloak
+              if (keycloak && keycloak.authenticated) {
+                try {
+                  await keycloak.updateToken(-1); // Force refresh
+                  // Retry the original request
+                  return this.api.request(error.config);
+                } catch (refreshError) {
+                  console.error('❌ Impossible de rafraîchir le token, reconnexion requise');
+                  // Sauvegarder la page actuelle pour y revenir après reconnexion
+                  const currentPath = window.location.pathname + window.location.search;
+                  sessionStorage.setItem('returnUrl', currentPath);
+                  // Rediriger vers Keycloak pour authentification
+                  keycloak.login();
+                }
+              } else {
+                // Pas authentifié, rediriger vers Keycloak
+                console.log('❌ Non authentifié, redirection vers Keycloak...');
+                if (keycloak) {
+                  keycloak.login();
+                }
+              }
             } else {
               console.log('🔄 API Service: Erreur 401 ignorée car authentification en cours...');
             }