🐛 login window cannot be closed #1476

Author: Phinease

frontend/app/[locale]/chat/page.tsx

@@ -5,12 +5,13 @@ import { useAuth } from "@/hooks/useAuth";
 
 import { useConfig } from "@/hooks/useConfig";
 import { configService } from "@/services/configService";
+import { EVENTS } from "@/const/auth";
 
 import { ChatInterface } from "./internal/chatInterface";
 
 export default function ChatPage() {
   const { appConfig } = useConfig();
-  const { user, isLoading: userLoading, openLoginModal, isSpeedMode } = useAuth();
+  const { user, isLoading: userLoading, isSpeedMode } = useAuth();
 
   useEffect(() => {
     // Load config from backend when entering chat page
@@ -22,11 +23,16 @@ export default function ChatPage() {
   }, [appConfig.appName]);
 
   // Require login on chat page when unauthenticated (full mode only)
+  // Trigger SESSION_EXPIRED event to show "Login Expired" modal instead of directly opening login modal
   useEffect(() => {
     if (!isSpeedMode && !userLoading && !user) {
-      openLoginModal();
+      window.dispatchEvent(
+        new CustomEvent(EVENTS.SESSION_EXPIRED, {
+          detail: { message: "Session expired, please sign in again" },
+        })
+      );
     }
-  }, [isSpeedMode, user, userLoading, openLoginModal]);
+  }, [isSpeedMode, user, userLoading]);
 
   // Avoid rendering and backend calls when unauthenticated (full mode only)
   if (!isSpeedMode && (!user || userLoading)) {

frontend/app/[locale]/setup/agents/page.tsx

@@ -14,6 +14,7 @@ import {
   CONNECTION_STATUS,
   ConnectionStatus,
 } from "@/const/modelConfig";
+import { EVENTS } from "@/const/auth";
 import log from "@/lib/logger";
 
 import SetupLayout from "../SetupLayout";
@@ -30,8 +31,7 @@ export default function AgentSetupPage() {
   const {
     user,
     isLoading: userLoading,
-    isSpeedMode,
-    openLoginModal,
+    isSpeedMode
   } = useAuth();
 
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(
@@ -41,9 +41,14 @@ export default function AgentSetupPage() {
   const [isSaving, setIsSaving] = useState(false);
 
   // Check login status and permission
+  // Trigger SESSION_EXPIRED event to show "Login Expired" modal instead of directly opening login modal
   useEffect(() => {
     if (!isSpeedMode && !userLoading && !user) {
-      openLoginModal();
+      window.dispatchEvent(
+        new CustomEvent(EVENTS.SESSION_EXPIRED, {
+          detail: { message: "Session expired, please sign in again" },
+        })
+      );
       return;
     }
 
@@ -52,7 +57,7 @@ export default function AgentSetupPage() {
       router.push("/setup/knowledges");
       return;
     }
-  }, [isSpeedMode, user, userLoading, router, openLoginModal]);
+  }, [isSpeedMode, user, userLoading, router]);
 
   // Check the connection status when the page is initialized
   useEffect(() => {

frontend/app/[locale]/setup/knowledges/page.tsx

@@ -16,6 +16,7 @@ import {
   CONNECTION_STATUS,
   ConnectionStatus,
 } from "@/const/modelConfig";
+import { EVENTS } from "@/const/auth";
 import log from "@/lib/logger";
 
 import SetupLayout from "../SetupLayout";
@@ -25,7 +26,7 @@ export default function KnowledgeSetupPage() {
   const { message } = App.useApp();
   const router = useRouter();
   const { t } = useTranslation();
-  const { user, isLoading: userLoading, isSpeedMode, openLoginModal } = useAuth();
+  const { user, isLoading: userLoading, isSpeedMode } = useAuth();
 
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(
     CONNECTION_STATUS.PROCESSING
@@ -34,12 +35,17 @@ export default function KnowledgeSetupPage() {
   const [isSaving, setIsSaving] = useState(false);
 
   // Check login status and permission
+  // Trigger SESSION_EXPIRED event to show "Login Expired" modal instead of directly opening login modal
   useEffect(() => {
     if (!isSpeedMode && !userLoading && !user) {
-      openLoginModal();
+      window.dispatchEvent(
+        new CustomEvent(EVENTS.SESSION_EXPIRED, {
+          detail: { message: "Session expired, please sign in again" },
+        })
+      );
       return;
     }
-  }, [isSpeedMode, user, userLoading, openLoginModal]);
+  }, [isSpeedMode, user, userLoading]);
 
   // Check the connection status when the page is initialized
   useEffect(() => {

frontend/app/[locale]/setup/models/page.tsx

@@ -17,6 +17,7 @@ import {
   ConnectionStatus,
   MODEL_STATUS,
 } from "@/const/modelConfig";
+import { EVENTS } from "@/const/auth";
 import log from "@/lib/logger";
 
 import SetupLayout from "../SetupLayout";
@@ -28,7 +29,7 @@ export default function ModelSetupPage() {
   const { message } = App.useApp();
   const router = useRouter();
   const { t } = useTranslation();
-  const { user, isLoading: userLoading, isSpeedMode, openLoginModal } = useAuth();
+  const { user, isLoading: userLoading, isSpeedMode } = useAuth();
 
   const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(
     CONNECTION_STATUS.PROCESSING
@@ -47,9 +48,14 @@ export default function ModelSetupPage() {
   const modelConfigSectionRef = useRef<ModelConfigSectionRef | null>(null);
 
   // Check login status and permission
+  // Trigger SESSION_EXPIRED event to show "Login Expired" modal instead of directly opening login modal
   useEffect(() => {
     if (!isSpeedMode && !userLoading && !user) {
-      openLoginModal();
+      window.dispatchEvent(
+        new CustomEvent(EVENTS.SESSION_EXPIRED, {
+          detail: { message: "Session expired, please sign in again" },
+        })
+      );
       return;
     }
 
@@ -58,7 +64,7 @@ export default function ModelSetupPage() {
       router.push("/setup/knowledges");
       return;
     }
-  }, [isSpeedMode, user, userLoading, openLoginModal, router]);
+  }, [isSpeedMode, user, userLoading, router]);
 
   // Check the connection status when the page is initialized
   useEffect(() => {

frontend/components/auth/loginModal.tsx

@@ -138,8 +138,10 @@ export function LoginModal() {
     closeLoginModal();
 
     // If login modal was opened due to session expiration,
-    // re-trigger the session expired event
+    // reset modal state and re-trigger the session expired event
     if (isFromSessionExpired) {
+      // Reset modal state so session expired modal can be shown again
+      document.dispatchEvent(new CustomEvent("modalClosed"));
       setTimeout(() => {
         window.dispatchEvent(
           new CustomEvent(EVENTS.SESSION_EXPIRED, {
@@ -163,9 +165,10 @@ export function LoginModal() {
       width={400}
       centered
       forceRender
-      // Prevent modal from being closed by clicking mask or close button when session is expired
+      // Prevent modal from being closed by clicking mask when session is expired
+      // But allow close button to be visible so user can return to session expired prompt
       maskClosable={!isFromSessionExpired}
-      closable={!isFromSessionExpired}
+      closable={true}
     >
       <Form
         id="login-form"

frontend/components/auth/sessionListeners.tsx

@@ -25,11 +25,17 @@ export function SessionListeners() {
   const router = useRouter();
   const pathname = usePathname();
   const { t } = useTranslation("common");
-  const { openLoginModal, setIsFromSessionExpired, logout, isSpeedMode } =
+  const { openLoginModal, setIsFromSessionExpired, clearLocalSession, isSpeedMode } =
     useAuth();
   const { modal } = App.useApp();
   const modalShownRef = useRef<boolean>(false);
 
+  const isLocaleHomePath = (path?: string | null) => {
+    if (!path) return false;
+    const segments = path.split("/").filter(Boolean);
+    return segments.length <= 1;
+  };
+
   /**
    * Show "Login Expired" confirmation modal
    * This function handles debounce logic to prevent modal from appearing repeatedly
@@ -46,25 +52,20 @@ export function SessionListeners() {
       okText: t("login.expired.okText"),
       cancelText: t("login.expired.cancelText"),
       closable: false,
-      async onOk() {
-        try {
-          // Silently logout
-          await logout({ silent: true });
-        } finally {
-          // Mark the source as session expired
-          setIsFromSessionExpired(true);
-          Modal.destroyAll();
-          openLoginModal();
-          setTimeout(() => (modalShownRef.current = false), 500);
-        }
+      onOk() {
+        // Clear local session state (session already expired on backend)
+        clearLocalSession();
+        // Mark the source as session expired
+        setIsFromSessionExpired(true);
+        Modal.destroyAll();
+        openLoginModal();
+        setTimeout(() => (modalShownRef.current = false), 500);
       },
-      async onCancel() {
-        try {
-          await logout();
-        } finally {
-          router.push("/");
-          setTimeout(() => (modalShownRef.current = false), 500);
-        }
+      onCancel() {
+        // Clear local session state (session already expired on backend)
+        clearLocalSession();
+        router.push("/");
+        setTimeout(() => (modalShownRef.current = false), 500);
       },
     });
   };
@@ -106,7 +107,7 @@ export function SessionListeners() {
       );
     };
     // Remove confirm from dependency array to avoid duplicate registration due to function reference changes
-  }, [router, pathname, openLoginModal, setIsFromSessionExpired, modal, isSpeedMode]);
+  }, [isSpeedMode]);
 
   // When component first mounts, if no local session is found, show modal immediately
   useEffect(() => {
@@ -129,23 +130,20 @@ export function SessionListeners() {
         const session = await authService.getSession();
 
         // Only show session expired modal if a prior session existed and is now invalid
-        if (!session && hadLocalSession) {
+        if ((!session && hadLocalSession) || (!session && !hadLocalSession && !isLocaleHomePath(pathname))) {
           window.dispatchEvent(
             new CustomEvent(EVENTS.SESSION_EXPIRED, {
               detail: { message: "Session expired, please sign in again" },
             })
           );
-        } else if (!session && !hadLocalSession) {
-          // Full mode with no prior session: proactively prompt login
-          openLoginModal();
         }
       } catch (error) {
         log.error("Error checking session status:", error);
       }
     };
 
     checkSession();
-  }, [pathname, isSpeedMode, openLoginModal]);
+  }, [pathname, isSpeedMode]);
 
   // Sliding expiration: refresh token shortly before expiry on user activity (skip in speed mode)
   useEffect(() => {

frontend/hooks/useAuth.ts

@@ -12,7 +12,7 @@ import { configService } from "@/services/configService"
 import { API_ENDPOINTS } from "@/services/api"
 import { User, AuthContextType } from "@/types/auth"
 import { EVENTS, STATUS_CODES } from "@/const/auth"
-import { getSessionFromStorage } from "@/lib/auth"
+import { getSessionFromStorage, removeSessionFromStorage } from "@/lib/auth"
 import log from "@/lib/logger"
 
 // Create auth context
@@ -300,6 +300,16 @@ export function AuthProvider({ children }: { children: (value: AuthContextType)
     }
   }
 
+  // Clear local session state without calling backend API
+  // Used when session is already expired on the backend
+  const clearLocalSession = () => {
+    removeSessionFromStorage()
+    setUser(null)
+    setShouldCheckSession(false)
+    // Manually trigger storage event
+    window.dispatchEvent(new StorageEvent("storage", { key: "session", newValue: null }))
+  }
+
   const logout = async (options?: { silent?: boolean }) => {
     try {
       setIsLoading(true)
@@ -357,6 +367,7 @@ export function AuthProvider({ children }: { children: (value: AuthContextType)
     login,
     register,
     logout,
+    clearLocalSession,
     revoke,
   };
 

frontend/types/auth.ts

@@ -53,6 +53,7 @@ export interface AuthContextType {
     inviteCode?: string
   ) => Promise<void>;
   logout: (options?: { silent?: boolean }) => Promise<void>;
+  clearLocalSession: () => void;
   revoke: () => Promise<void>;
 }