fix(frontend): add useSubscribeBroadcastChannel

frontend/src/contexts/auth.context.tsx

@@ -21,13 +21,12 @@ import { Progress } from "@/app-components/displays/Progress";
 import { useLogout } from "@/hooks/entities/auth-hooks";
 import { useApiClient } from "@/hooks/useApiClient";
 import { CURRENT_USER_KEY, PUBLIC_PATHS } from "@/hooks/useAuth";
+import { useSubscribeBroadcastChannel } from "@/hooks/useSubscribeBroadcastChannel";
 import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
 import { getFromQuery } from "@/utils/URL";
 
-import { useBroadcastChannel } from "./broadcast-channel.context";
-
 export interface AuthContextValue {
   user: IUser | undefined;
   isAuthenticated: boolean;
@@ -101,17 +100,16 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     setUser(user);
   };
   const isAuthenticated = !!user;
-  const { subscribe } = useBroadcastChannel();
+
+  useSubscribeBroadcastChannel("logout", () => {
+    router.reload();
+  });
 
   useEffect(() => {
     const search = location.search;
 
     setSearch(search);
     setIsReady(true);
-
-    subscribe("logout", () => {
-      router.reload();
-    });
   }, []);
 
   if (!isReady || isLoading) return <Progress />;

frontend/src/contexts/broadcast-channel.context.tsx

@@ -49,11 +49,11 @@ const getOrCreateTabId = () => {
   return storedTabId;
 };
 
-interface IBroadcastChannelContext {
+export interface IBroadcastChannelContext {
   subscribe: (
     event: `${EBCEvent}`,
     callback: (message: BroadcastChannelData) => void,
-  ) => () => void;
+  ) => void;
   postMessage: (payload: BroadcastChannelPayload) => void;
 }
 

frontend/src/hooks/useSubscribeBroadcastChannel.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { useEffect } from "react";
+
+import {
+  IBroadcastChannelContext,
+  useBroadcastChannel,
+} from "@/contexts/broadcast-channel.context";
+
+export const useSubscribeBroadcastChannel: IBroadcastChannelContext["subscribe"] =
+  (...props) => {
+    const { subscribe } = useBroadcastChannel();
+
+    useEffect(() => {
+      subscribe(...props);
+    }, [subscribe, ...props]);
+  };