keycloak improve with build 2

This commit is contained in:
alma 2026-01-02 14:53:29 +01:00
parent 246051b4f4
commit 7a8b736241
3 changed files with 96 additions and 16 deletions

View File

@ -1,13 +1,48 @@
"use client";
import { signIn, useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useEffect, useState, useRef } from "react";
import { useRouter, useSearchParams } from "next/navigation";
export default function SignIn() {
const { data: session, status } = useSession();
const router = useRouter();
const searchParams = useSearchParams();
const [initializationStatus, setInitializationStatus] = useState<string | null>(null);
const hasAttemptedLogin = useRef(false);
const isLogoutRedirect = useRef(false);
// Check if this is a logout redirect (from Keycloak post_logout_redirect_uri)
useEffect(() => {
// Check URL parameters or session storage for logout flag
const logoutParam = searchParams.get('logout');
const fromLogout = sessionStorage.getItem('just_logged_out');
if (logoutParam === 'true' || fromLogout === 'true') {
isLogoutRedirect.current = true;
sessionStorage.removeItem('just_logged_out');
// Clear any OAuth parameters from URL to prevent callback processing
const url = new URL(window.location.href);
const hasOAuthParams = url.searchParams.has('code') ||
url.searchParams.has('state') ||
url.searchParams.has('error');
if (hasOAuthParams) {
// Remove OAuth parameters but keep logout=true
url.searchParams.delete('code');
url.searchParams.delete('state');
url.searchParams.delete('error');
url.searchParams.delete('error_description');
url.searchParams.set('logout', 'true');
// Replace URL without OAuth params
window.history.replaceState({}, '', url.toString());
}
// Don't auto-trigger login after logout
return;
}
}, [searchParams]);
useEffect(() => {
// If user is already authenticated, redirect to home
@ -16,10 +51,30 @@ export default function SignIn() {
return;
}
// Only trigger Keycloak sign-in if not authenticated and not loading
// Don't auto-login if this is a logout redirect or we've already attempted login
if (isLogoutRedirect.current || hasAttemptedLogin.current) {
return;
}
// Don't auto-login if status is still loading (might be processing OAuth callback)
if (status === "loading") {
return;
}
// Only trigger Keycloak sign-in if not authenticated, not loading, and not from logout
// Add a longer delay to ensure OAuth callbacks have completed
if (status === "unauthenticated") {
// Trigger Keycloak sign-in
signIn("keycloak", { callbackUrl: "/" });
hasAttemptedLogin.current = true;
// Longer delay to ensure we're not in a logout redirect flow or OAuth callback
const timer = setTimeout(() => {
// Double-check we're still unauthenticated and not in a logout flow
if (!isLogoutRedirect.current) {
// Trigger Keycloak sign-in
signIn("keycloak", { callbackUrl: "/" });
}
}, 1000);
return () => clearTimeout(timer);
}
}, [status, session, router]);
@ -57,6 +112,9 @@ export default function SignIn() {
}
}, [session]);
// Show logout message if coming from logout
const showLogoutMessage = isLogoutRedirect.current || searchParams.get('logout') === 'true';
return (
<div
className="min-h-screen flex items-center justify-center"
@ -70,7 +128,9 @@ export default function SignIn() {
<div className="w-full max-w-md space-y-8 bg-white/90 backdrop-blur-sm p-8 rounded-xl shadow-xl">
<div>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
{initializationStatus === "initializing"
{showLogoutMessage
? "Vous avez été déconnecté avec succès"
: initializationStatus === "initializing"
? "Initialisation de votre espace..."
: initializationStatus === "success"
? "Initialisation réussie, redirection..."
@ -78,6 +138,20 @@ export default function SignIn() {
? "Échec de l'initialisation. Veuillez réessayer."
: "Redirection vers la page de connexion..."}
</h2>
{showLogoutMessage && (
<div className="mt-4 text-center">
<button
onClick={() => {
hasAttemptedLogin.current = false;
isLogoutRedirect.current = false;
signIn("keycloak", { callbackUrl: "/" });
}}
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Se connecter
</button>
</div>
)}
{initializationStatus === "initializing" && (
<div className="flex justify-center mt-4">
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>

View File

@ -10,13 +10,16 @@ export function SignOutHandler() {
useEffect(() => {
const handleSignOut = async () => {
try {
// Mark that we're logging out to prevent auto-login
sessionStorage.setItem('just_logged_out', 'true');
// Get Keycloak issuer from environment
const keycloakIssuer = process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER;
const idToken = session?.idToken;
// First, sign out from NextAuth (clears NextAuth cookies)
await signOut({
callbackUrl: "/signin",
callbackUrl: "/signin?logout=true",
redirect: false
});
@ -29,10 +32,10 @@ export function SignOutHandler() {
`${keycloakIssuer}/protocol/openid-connect/logout`
);
// Add required parameters
// Add required parameters - include logout=true in redirect URI
keycloakLogoutUrl.searchParams.append(
'post_logout_redirect_uri',
window.location.origin + '/signin'
window.location.origin + '/signin?logout=true'
);
keycloakLogoutUrl.searchParams.append(
'id_token_hint',
@ -43,12 +46,12 @@ export function SignOutHandler() {
window.location.href = keycloakLogoutUrl.toString();
} else {
// Fallback: just redirect to signin if we don't have Keycloak info
window.location.href = '/signin';
window.location.href = '/signin?logout=true';
}
} catch (error) {
console.error('Error during sign out:', error);
// Fallback: redirect to signin on error
window.location.href = '/signin';
window.location.href = '/signin?logout=true';
}
};

View File

@ -362,12 +362,15 @@ export function MainNav() {
className="text-white/80 hover:text-white hover:bg-black/50 cursor-pointer"
onClick={async () => {
try {
// Mark that we're logging out to prevent auto-login
sessionStorage.setItem('just_logged_out', 'true');
const keycloakIssuer = process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER;
const idToken = session?.idToken;
// First sign out from NextAuth (clears NextAuth cookies)
await signOut({
callbackUrl: '/signin',
callbackUrl: '/signin?logout=true',
redirect: false
});
@ -377,10 +380,10 @@ export function MainNav() {
`${keycloakIssuer}/protocol/openid-connect/logout`
);
// Add required parameters
// Add required parameters - include logout=true in redirect URI
keycloakLogoutUrl.searchParams.append(
'post_logout_redirect_uri',
window.location.origin + '/signin'
window.location.origin + '/signin?logout=true'
);
keycloakLogoutUrl.searchParams.append(
'id_token_hint',
@ -391,12 +394,12 @@ export function MainNav() {
window.location.href = keycloakLogoutUrl.toString();
} else {
// Fallback: just redirect to signin if we don't have Keycloak info
window.location.href = '/signin';
window.location.href = '/signin?logout=true';
}
} catch (error) {
console.error('Error during logout:', error);
// Fallback to simple redirect if something goes wrong
window.location.href = '/signin';
window.location.href = '/signin?logout=true';
}
}}
>