lionsdev/btpxpress-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Authentification fonctionnelle via security.lions.dev

Browse Source
This commit is contained in:
DahoudG
2025-11-01 14:16:20 +00:00
parent a5adb84a62
commit 1d68878601
20 changed files with 387 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
app/(main)/dashboard/page.tsx
View File

@@ -36,61 +36,28 @@ const Dashboard = () => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [selectedChantier, setSelectedChantier] = useState<ChantierActif | null>(null); const [selectedChantier, setSelectedChantier] = useState<ChantierActif | null>(null);
const [showQuickView, setShowQuickView] = useState(false); 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) // Nettoyer les paramètres OAuth de l'URL après le retour de Keycloak
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
useEffect(() => { 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); 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 = ''; url.search = '';
window.history.replaceState({}, '', url.toString()); 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 { const {
metrics, metrics,
chantiersActifs, chantiersActifs,
@@ -104,6 +71,8 @@ const Dashboard = () => {
onRefresh: refresh onRefresh: refresh
}); });
console.log('🏗️ Dashboard: État du chargement -', { loading, metricsLoaded: !!metrics, chantiersCount: chantiersActifs?.length || 0 });
// Optimisations avec useMemo pour les calculs coûteux // Optimisations avec useMemo pour les calculs coûteux
const formattedMetrics = useMemo(() => { const formattedMetrics = useMemo(() => {
if (!metrics) return null; if (!metrics) return null;
@@ -194,129 +163,6 @@ const Dashboard = () => {
chantierActions.handleQuickView(chantier); chantierActions.handleQuickView(chantier);
}, [chantierActions]); }, [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 actionBodyTemplate = useCallback((rowData: ChantierActif) => {
const actions: ActionButtonType[] = ['VIEW', 'PHASES', 'PLANNING', 'STATS', 'MENU']; const actions: ActionButtonType[] = ['VIEW', 'PHASES', 'PLANNING', 'STATS', 'MENU'];
@@ -385,68 +231,6 @@ const Dashboard = () => {
); );
}, [handleQuickView, router, chantierActions]); }, [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) { if (loading) {
return ( return (
<div className="grid"> <div className="grid">

7
app/(main)/page.tsx
View File

@@ -12,6 +12,7 @@ import { Button } from 'primereact/button';
import { LayoutContext } from '../../layout/context/layoutcontext'; import { LayoutContext } from '../../layout/context/layoutcontext';
import { PrimeReactContext } from 'primereact/api'; import { PrimeReactContext } from 'primereact/api';
import type { ColorScheme, Page } from '@/types'; import type { ColorScheme, Page } from '@/types';
import { redirectToLogin } from '@/lib/auth';
const LandingPage: Page = () => { const LandingPage: Page = () => {
const { layoutConfig, setLayoutConfig } = useContext(LayoutContext); const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
@@ -140,13 +141,13 @@ const LandingPage: Page = () => {
</StyleClass> </StyleClass>
</li> </li>
<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> <span>Connexion</span>
<Ripple /> <Ripple />
</a> </a>
</li> </li>
<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> <span>Inscription</span>
<Ripple /> <Ripple />
</a> </a>
@@ -182,7 +183,7 @@ const LandingPage: Page = () => {
Bienvenue sur BTP Xpress Bienvenue sur BTP Xpress
</h1> </h1>
<h2 className="mt-0 font-medium text-4xl text-gray-700">Votre plateforme de gestion BTP moderne</h2> <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> <span className="p-button-text">Commencer</span>
</a> </a>
</div> </div>

29
app/api/auth/login/route.ts
View File

@@ -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());
}

48
app/api/auth/logout/route.ts
View File

@@ -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);
}

138
app/api/auth/token/route.ts
View File

@@ -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 }
);
}
}

82
app/api/auth/userinfo/route.ts
View File

@@ -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 }
);
}
}

5
app/auth/login/page.tsx
View File

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

19
app/page.tsx
View File

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

266
app/page_backup.tsx
View File

@@ -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;

13
components/ClientProviders.tsx
View File

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

24
components/ProtectedLayout.tsx
View File

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

3
components/layout/AppLayout.tsx
View File

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

167
contexts/AuthContext.tsx
View File

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

119
contexts/KeycloakContext.tsx Normal file
View File

@@ -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>
);
};

78
lib/auth.ts Normal file
View File

@@ -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;
}
};

14
lib/keycloak.ts Normal file
View File

@@ -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;

92
middleware.ts
View File

@@ -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 * Avec Keycloak JS SDK, l'authentification est gérée côté client par KeycloakContext.
* d'un access_token dans les cookies HttpOnly. * 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 { NextResponse } from 'next/server';
import type { NextRequest } 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) { export function middleware(request: NextRequest) {
const { pathname } = request.nextUrl; // Laisser passer toutes les requêtes
// L'authentification est gérée côté client par Keycloak JS SDK
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
return NextResponse.next(); return NextResponse.next();
} }

11
public/silent-check-sso.html Normal file
View File

@@ -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>

32
services/ApiService.ts
View File

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

59
services/api.ts
View File

@@ -4,7 +4,7 @@
import axios, { AxiosInstance, AxiosResponse } from 'axios'; import axios, { AxiosInstance, AxiosResponse } from 'axios';
import { API_CONFIG } from '../config/api'; import { API_CONFIG } from '../config/api';
import { keycloak, KEYCLOAK_TIMEOUTS } from '../config/keycloak'; import keycloak from '../lib/keycloak';
import { CacheService, CacheKeys } from './cacheService'; import { CacheService, CacheKeys } from './cacheService';
import { import {
Client, Client,
@@ -42,18 +42,30 @@ class ApiService {
// Interceptor pour les requêtes // Interceptor pour les requêtes
this.api.interceptors.request.use( this.api.interceptors.request.use(
async (config) => { 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); 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 // Ajouter des en-têtes par défaut
config.headers['X-Requested-With'] = 'XMLHttpRequest'; config.headers['X-Requested-With'] = 'XMLHttpRequest';
// Assurer que les cookies sont envoyés avec les requêtes CORS
config.withCredentials = true;
return config; return config;
}, },
(error) => { (error) => {
@@ -103,16 +115,29 @@ class ApiService {
const hasAuthCode = currentUrl.includes('code=') && currentUrl.includes('/dashboard'); const hasAuthCode = currentUrl.includes('code=') && currentUrl.includes('/dashboard');
if (!hasAuthCode) { if (!hasAuthCode) {
console.log('🔄 Token expiré ou absent, redirection vers la connexion...'); console.log('🔄 Token expiré ou absent, redirection vers Keycloak...');
// Sauvegarder la page actuelle pour y revenir après reconnexion
const currentPath = window.location.pathname + window.location.search;
sessionStorage.setItem('returnUrl', currentPath);
// Les cookies HttpOnly seront automatiquement nettoyés par l'expiration // Essayer de rafraîchir le token Keycloak
// ou lors de la reconnexion. Pas besoin de manipulation côté client. if (keycloak && keycloak.authenticated) {
try {
// Rediriger vers la page de connexion await keycloak.updateToken(-1); // Force refresh
window.location.href = '/api/auth/login'; // 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 { } else {
console.log('🔄 API Service: Erreur 401 ignorée car authentification en cours...'); console.log('🔄 API Service: Erreur 401 ignorée car authentification en cours...');
} }