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);
-    }, []);
+        if (typeof window === 'undefined') return;
 
-    // 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
-        
         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;