feature/IO-3404-Seamless-Logout - Implement Seamless Logout

client/src/App/App.container.jsx

@@ -12,6 +12,7 @@ import GlobalLoadingBar from "../components/global-loading-bar/global-loading-ba
 import { setDarkMode } from "../redux/application/application.actions";
 import { selectDarkMode } from "../redux/application/application.selectors";
 import { selectCurrentUser } from "../redux/user/user.selectors.js";
+import { signOutStart } from "../redux/user/user.actions";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import getTheme from "./themeProvider";
@@ -20,14 +21,13 @@ import getTheme from "./themeProvider";
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
-    key: "anon" // Default key, overridden dynamically by SplitClientProvider
+    key: "anon"
   }
 };
 
-// Custom provider to manage the Split client key based on imexshopid from Redux
 function SplitClientProvider({ children }) {
-  const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
-  const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
+  const imexshopid = useSelector((state) => state.user.imexshopid);
+  const splitClient = useSplitClient({ key: imexshopid || "anon" });
   useEffect(() => {
     if (splitClient && imexshopid) {
       console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
@@ -36,40 +36,66 @@ function SplitClientProvider({ children }) {
   return children;
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode))
-});
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-function AppContainer({ currentUser, setDarkMode }) {
+const mapDispatchToProps = (dispatch) => ({
+  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
+  signOutStart: () => dispatch(signOutStart())
+});
+
+function AppContainer({ currentUser, setDarkMode, signOutStart }) {
   const { t } = useTranslation();
   const isDarkMode = useSelector(selectDarkMode);
   const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
 
-  // Update data-theme attribute when dark mode changes
+  // Global seamless logout listener with redirect to /signin
+  useEffect(() => {
+    const handleSeamlessLogout = (event) => {
+      if (event.data?.type !== "seamlessLogoutRequest") return;
+
+      const requestOrigin = event.origin;
+
+      if (currentUser?.authorized !== true) {
+        window.parent.postMessage(
+          { type: "seamlessLogoutResponse", status: "already_logged_out" },
+          requestOrigin || "*"
+        );
+        return;
+      }
+
+      signOutStart();
+      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
+    };
+
+    window.addEventListener("message", handleSeamlessLogout);
+    return () => {
+      window.removeEventListener("message", handleSeamlessLogout);
+    };
+  }, [signOutStart, currentUser]);
+
+  // Update data-theme attribute
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
     return () => document.documentElement.removeAttribute("data-theme");
   }, [isDarkMode]);
 
-  // Sync Redux darkMode with localStorage on user change
+  // Sync darkMode with localStorage
   useEffect(() => {
     if (currentUser?.uid) {
       const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
       if (savedMode !== null) {
         setDarkMode(JSON.parse(savedMode));
       } else {
-        setDarkMode(false); // default to light mode
+        setDarkMode(false);
       }
     } else {
       setDarkMode(false);
     }
-  }, [currentUser?.uid]);
+  }, [currentUser?.uid, setDarkMode]);
 
-  // Persist darkMode to localStorage when it or user changes
+  // Persist darkMode
   useEffect(() => {
     if (currentUser?.uid) {
       localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));