Implement broadcast synchronization for logout events and user authentication (#1274)

Author: ferishili

src/App.tsx

@@ -15,6 +15,7 @@ import Acls from "./components/users/Acls";
 import About from "./components/About";
 import { useAppDispatch } from "./store";
 import { fetchOcVersion, fetchUserInfo } from "./slices/userInfoSlice";
+import { subscribeToAuthEvents } from "./utils/broadcastSync";
 
 function App() {
 	const dispatch = useAppDispatch();
@@ -24,6 +25,9 @@ function App() {
 		// Load information about current opencast version on mount
 		dispatch(fetchOcVersion());
 
+		// Subscribe to the auth event to follow the login - logout events!
+		subscribeToAuthEvents();
+
 		// Add event listener for back button to check if we are still logged in
 		window.addEventListener("popstate", function (event) {
 			dispatch(fetchUserInfo());

src/components/Header.tsx

@@ -24,17 +24,14 @@ import { HiTranslate } from "react-icons/hi";
 import { IconContext } from "react-icons";
 import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
 import { ModalHandle } from "./shared/modals/Modal";
+import { broadcastLogout } from "../utils/broadcastSync";
 
 // References for detecting a click outside of the container of the dropdown menus
 const containerLang = React.createRef<HTMLDivElement>();
 const containerHelp = React.createRef<HTMLDivElement>();
 const containerUser = React.createRef<HTMLDivElement>();
 const containerNotify = React.createRef<HTMLDivElement>();
 
-function logout() {
-	window.location.href = "/j_spring_security_logout";
-}
-
 /**
  * Component that renders the header and the navigation in the upper right corner.
  */
@@ -417,6 +414,12 @@ const MenuHelp = ({
 
 const MenuUser = () => {
 	const { t } = useTranslation();
+
+	const logout = () => {
+		// Here we broadcast logout, in order to redirect other tabs to login page!
+		broadcastLogout();
+		window.location.href = "/j_spring_security_logout";
+	}
 	return (
 		<ul className="dropdown-ul">
 			<li>

src/utils/broadcastSync.ts

@@ -0,0 +1,21 @@
+const bc = new BroadcastChannel('auth_channel');
+
+export const broadcastLogout = () => {
+    bc.postMessage({ type: 'LOGOUT' });
+};
+
+export const subscribeToAuthEvents = () => {
+    bc.onmessage = (event) => {
+        if (event.data?.type === 'LOGOUT') {
+            performOnLogoutActions();
+        }
+    };
+};
+
+const performOnLogoutActions = () => {
+    // We need a tiny pause, in order to make sure the logout process has happened.
+    const intvl = setInterval(() => {
+        window.location.href = "/login.html";
+        clearInterval(intvl);
+    }, 750);
+}