5da5290a6d
PHASE 1 - CORRECTIONS CRITIQUES TERMINÉES ✅ API Routes Auth créées: - /api/auth/login: Initie le flux OAuth avec Keycloak - /api/auth/token: Échange le code OAuth contre des tokens - /api/auth/logout: Déconnexion et nettoyage des tokens - /api/auth/userinfo: Récupère les informations utilisateur ✅ Middleware d'authentification: - Protection des routes privées - Vérification de l'access_token dans les cookies HttpOnly - Vérification de l'expiration des tokens - Redirection automatique vers /auth/login si non authentifié - Routes publiques configurées (/auth/*, /api/health, /) ✅ Page de login: - Interface moderne avec PrimeReact - Redirection vers Keycloak OAuth - Gestion du returnUrl pour revenir à la page demandée ✅ Sécurité: - Tokens stockés dans cookies HttpOnly (pas localStorage) - Protection CSRF avec state parameter - Validation de l'expiration des tokens - Nettoyage automatique des cookies expirés ✅ Callback OAuth: - Protection contre les appels multiples (useRef) - Gestion d'erreurs robuste - Nettoyage de l'URL après échange - Suspense boundary pour le chargement Cette implémentation résout les problèmes critiques: - Boucle OAuth infinie (code réutilisé) - Absence d'API route token exchange - Middleware non fonctionnel - Pas de page de login 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { Button } from 'primereact/button';
|
|
import { Card } from 'primereact/card';
|
|
|
|
export default function LoginPage() {
|
|
const searchParams = useSearchParams();
|
|
const returnUrl = searchParams.get('returnUrl') || '/dashboard';
|
|
|
|
const handleLogin = () => {
|
|
// Stocker l'URL de retour dans le sessionStorage
|
|
if (returnUrl) {
|
|
sessionStorage.setItem('returnUrl', returnUrl);
|
|
}
|
|
|
|
// Rediriger vers l'API de login qui initiera le flux OAuth
|
|
window.location.href = '/api/auth/login';
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex align-items-center justify-content-center" style={{
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|
}}>
|
|
<div className="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
|
<div className="text-center mb-5">
|
|
<div className="text-900 text-3xl font-medium mb-3">
|
|
BTP Xpress
|
|
</div>
|
|
<span className="text-600 font-medium line-height-3">
|
|
Plateforme de gestion pour le secteur du BTP
|
|
</span>
|
|
</div>
|
|
|
|
<Card>
|
|
<div className="text-center">
|
|
<i className="pi pi-lock text-6xl text-primary mb-4"></i>
|
|
<h2 className="text-900 font-bold text-2xl mb-2">
|
|
Connexion requise
|
|
</h2>
|
|
<p className="text-600 mb-4">
|
|
Veuillez vous connecter pour accéder à l'application
|
|
</p>
|
|
|
|
<Button
|
|
label="Se connecter avec Keycloak"
|
|
icon="pi pi-sign-in"
|
|
onClick={handleLogin}
|
|
className="w-full p-3 text-xl"
|
|
severity="info"
|
|
/>
|
|
|
|
<div className="mt-4 text-center">
|
|
<span className="text-600 text-sm">
|
|
Authentification sécurisée via Keycloak OAuth 2.0
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="mt-5 text-center">
|
|
<span className="text-white-alpha-80 text-sm">
|
|
© 2025 BTP Xpress - Tous droits réservés
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|