refactor-upto-phase 6

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy } from "react";
+import { Suspense, lazy, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router";
 import { HelmetProvider } from "react-helmet-async";
 import AppLayout from "./layout/AppLayout";
@@ -7,6 +7,7 @@ import ProtectedRoute from "./components/auth/ProtectedRoute";
 import ModuleGuard from "./components/common/ModuleGuard";
 import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
 import LoadingStateMonitor from "./components/common/LoadingStateMonitor";
+import { useAuthStore } from "./store/authStore";
 
 // Auth pages - loaded immediately (needed for login)
 import SignIn from "./pages/AuthPages/SignIn";
@@ -137,6 +138,23 @@ const Tooltips = lazy(() => import("./pages/Settings/UiElements/Tooltips"));
 const Videos = lazy(() => import("./pages/Settings/UiElements/Videos"));
 
 export default function App() {
+  const { isAuthenticated, refreshUser, logout } = useAuthStore((state) => ({
+    isAuthenticated: state.isAuthenticated,
+    refreshUser: state.refreshUser,
+    logout: state.logout,
+  }));
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return;
+    }
+
+    refreshUser().catch((error) => {
+      console.warn('Session validation failed:', error);
+      logout();
+    });
+  }, [isAuthenticated, refreshUser, logout]);
+
   return (
     <>
       <GlobalErrorDisplay />