Neah/app/loggedout/page.tsx
2025-05-02 11:08:02 +02:00

115 lines
4.0 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { clearAuthCookies } from "@/lib/session";
import Link from "next/link";
export default function LoggedOut() {
const [sessionStatus, setSessionStatus] = useState<'checking' | 'cleared' | 'error'>('checking');
// Clear auth cookies again on this page as an extra precaution
useEffect(() => {
const checkAndClearSessions = async () => {
try {
// Additional browser storage clearing
console.log('Performing complete browser storage cleanup');
// Clear cookies
clearAuthCookies();
// Clear session storage
try {
sessionStorage.clear();
console.log('Session storage cleared');
} catch (e) {
console.error('Error clearing session storage:', e);
}
// Clear local storage items related to auth
try {
const authLocalStoragePrefixes = ['token', 'auth', 'session', 'keycloak', 'kc', 'oidc', 'user'];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key) {
const keyLower = key.toLowerCase();
if (authLocalStoragePrefixes.some(prefix => keyLower.includes(prefix))) {
console.log(`Clearing localStorage: ${key}`);
localStorage.removeItem(key);
}
}
}
console.log('Local storage auth items cleared');
} catch (e) {
console.error('Error clearing localStorage:', e);
}
// Double check for Keycloak specific cookies
const keycloakCookies = ['KEYCLOAK_SESSION', 'KEYCLOAK_IDENTITY', 'KC_RESTART'];
for (const cookieName of keycloakCookies) {
document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${window.location.hostname}; SameSite=None; Secure;`;
document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}
setSessionStatus('cleared');
} catch (error) {
console.error('Error during session cleanup:', error);
setSessionStatus('error');
}
};
checkAndClearSessions();
}, []);
return (
<div
className="min-h-screen flex items-center justify-center"
style={{
backgroundImage: "url('/signin.jpg')",
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}}
>
<div className="w-full max-w-md p-8 bg-black/60 backdrop-blur-sm rounded-lg shadow-xl">
<div className="text-center">
<h2 className="text-3xl font-bold text-white mb-4">
You have been logged out
</h2>
{sessionStatus === 'checking' && (
<p className="text-white/80 mb-4">
Verifying all sessions are terminated...
</p>
)}
{sessionStatus === 'cleared' && (
<p className="text-white/80 mb-4">
Your session has been completely terminated and all authentication data has been cleared.
</p>
)}
{sessionStatus === 'error' && (
<p className="text-white/80 mb-4">
Your session has been terminated, but there might be some residual session data.
For complete security, please close your browser.
</p>
)}
<div className="mt-6">
<Link
href="/signin"
className="inline-block px-8 py-3 bg-white text-gray-800 rounded hover:bg-gray-100 transition-colors mb-4"
>
Sign In Again
</Link>
<p className="text-white/60 text-sm mt-4">
Note: If you're automatically signed in again, try clearing your browser cookies or restarting your browser.
</p>
</div>
</div>
</div>
</div>
);
}