fix: show session expired modal instead of silent redirect to login (#31)

- Trigger showSessionExpiredModal on 401 in axios interceptor
- Show modal with "Session Expired" message before redirecting
- Suppress error toasts when session expired modal is showing
- User must click "Login" to proceed to login page

Author: wicky-zipstack

frontend/src/auth/RequireAuth.js

@@ -5,15 +5,20 @@ import { Navigate, Outlet, useNavigate, useLocation } from "react-router-dom";
 import { useSessionStore } from "../store/session-store";
 
 const RequireAuth = () => {
-  const { showSessionExpiredModal, sessionDetails } = useSessionStore();
+  const {
+    showSessionExpiredModal,
+    setShowSessionExpiredModal,
+    sessionDetails,
+  } = useSessionStore();
   const navigate = useNavigate();
   const location = useLocation();
 
   const isLoggedIn = !!sessionDetails?.user?.id;
 
   const handleLoginRedirect = useCallback(() => {
+    setShowSessionExpiredModal(false);
     navigate("/login");
-  }, [navigate]);
+  }, [navigate, setShowSessionExpiredModal]);
 
   const modalFooter = useMemo(
     () => [
@@ -24,31 +29,33 @@ const RequireAuth = () => {
     [handleLoginRedirect]
   );
 
-  if (!isLoggedIn) {
-    return <Navigate to="/login" />;
-  }
-
-  if (location.pathname === "/") {
-    return <Navigate to="/project/list" />;
-  }
-
-  return (
-    <>
-      <Outlet />
+  // Show session expired modal instead of silently redirecting
+  if (!isLoggedIn && showSessionExpiredModal) {
+    return (
       <Modal
         title="Session Expired"
-        open={showSessionExpiredModal}
+        open
         centered
         footer={modalFooter}
+        closable={false}
         maskClosable={false}
       >
         <Typography>
-          Your session has expired. Please log in again to continue your
-          transformation with Visitran Ai.
+          Your session has expired. Please log in again to continue.
         </Typography>
       </Modal>
-    </>
-  );
+    );
+  }
+
+  if (!isLoggedIn) {
+    return <Navigate to="/login" />;
+  }
+
+  if (location.pathname === "/") {
+    return <Navigate to="/project/list" />;
+  }
+
+  return <Outlet />;
 };
 
 export { RequireAuth };

frontend/src/service/axios-service.js

@@ -31,6 +31,7 @@ function useAxiosPrivate() {
         if (error?.response?.status === 401) {
           localStorage.removeItem("orgid");
           localStorage.removeItem("session-storage");
+          useSessionStore.getState().setShowSessionExpiredModal(true);
           setSessionDetails({});
           return Promise.resolve({ suppressed: true });
         }

frontend/src/service/notification-service.js

@@ -10,6 +10,7 @@ import { notification, Button } from "antd";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import "./notification-border.css";
+import { useSessionStore } from "../store/session-store";
 
 const NotificationContext = createContext(null);
 
@@ -50,8 +51,11 @@ function NotificationProvider({ children }) {
       let finalDescription = description;
 
       if (type === "error") {
-        // Skip notification for 401 errors - session expiry modal handles this
-        if (error?.response?.status === 401) {
+        // Skip all notifications when session expired modal is showing
+        if (
+          error?.response?.status === 401 ||
+          useSessionStore.getState().showSessionExpiredModal
+        ) {
           return;
         }