#multi-tab

Web Platformintermediate

BroadcastChannel for cross-tab messaging

const channel = new BroadcastChannel("auth");

export const broadcastLogout = (reason: string) => channel.postMessage({ type: "logout", reason });

channel.addEventListener("message", (event: MessageEvent<{ type: string; reason: string }>) => {

Log out in one tab and every other open tab reacts instantly, with a plain publish/subscribe API and no polling or server round trip.

Web Platformadvanced

The Web Locks API to coordinate work across browser tabs

export const getFreshAuthToken = () =>
  navigator.locks.request("auth-token-refresh", async () => {
    const expiresAt = Number(localStorage.getItem("auth-token-expires-at") ?? 0);
    if (Date.now() < expiresAt) return localStorage.getItem("auth-token")!;

Stop every open tab from refreshing the same auth token at once — let one tab do the network call while the rest wait and reuse its result.