diff --git a/ui/src/auth/LoginPage.tsx b/ui/src/auth/LoginPage.tsx index d28e05f..8334f30 100644 --- a/ui/src/auth/LoginPage.tsx +++ b/ui/src/auth/LoginPage.tsx @@ -1,13 +1,20 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useLogto } from '@logto/react'; import { useNavigate } from 'react-router'; -import { Spinner } from '@cameleer/design-system'; +import { Button, Card, Spinner } from '@cameleer/design-system'; +import cameleerLogo from '@cameleer/design-system/assets/cameleer-logo.svg'; export function LoginPage() { const { signIn, isAuthenticated, isLoading } = useLogto(); const navigate = useNavigate(); const redirected = useRef(false); + // Check if we arrived here from a logout redirect + const [signedOut] = useState(() => { + const params = new URLSearchParams(window.location.search); + return params.has('signed_out'); + }); + useEffect(() => { if (isAuthenticated) { navigate('/', { replace: true }); @@ -15,11 +22,39 @@ export function LoginPage() { }, [isAuthenticated, navigate]); useEffect(() => { + // Don't auto-redirect after logout — show the signed-out state instead + if (signedOut) return; if (!isLoading && !isAuthenticated && !redirected.current) { redirected.current = true; signIn(`${window.location.origin}/platform/callback`); } - }, [isLoading, isAuthenticated, signIn]); + }, [isLoading, isAuthenticated, signIn, signedOut]); + + if (signedOut && !isAuthenticated) { + return ( +
+
+ +
+ +

Signed out

+

+ You have been signed out successfully. +

+ +
+
+
+
+ ); + } return (
diff --git a/ui/src/auth/useAuth.ts b/ui/src/auth/useAuth.ts index 6d114ee..be3c774 100644 --- a/ui/src/auth/useAuth.ts +++ b/ui/src/auth/useAuth.ts @@ -7,7 +7,7 @@ export function useAuth() { const { currentTenantId } = useOrgStore(); const logout = useCallback(() => { - signOut(window.location.origin + '/platform/login'); + signOut(window.location.origin + '/platform/login?signed_out'); }, [signOut]); return {