React Router state synchronization across multiple tabs during token expiration

Use BroadcastChannel with a storage-event fallback

The most efficient pattern is a thin wrapper around the BroadcastChannel API that posts a LOGOUT message when any tab detects token expiry or an explicit logout. Other tabs listening on the same channel immediately clear their auth context and redirect via React Router. For browsers without BroadcastChannel (notably IE), fall back to a storage event on a dedicated localStorage key.

Implementation steps

1. Create an auth context provider that initializes a BroadcastChannel('auth-state') in a useEffect with an empty dependency array.
2. Expose a logout function that clears local tokens, sets the user to null, posts { type: 'LOGOUT' } to the channel, and calls navigate('/login').
3. Add a message listener in the same effect that, on LOGOUT, performs the same state reset and navigation. Return a cleanup function that removes the listener and closes the channel.
4. Add a storage-event listener (inside the same effect) that watches for a key like auth-logout. When the key changes, trigger the same logout logic. The logout function should also set this key (e.g., localStorage.setItem('auth-logout', Date.now())) to activate the fallback.
5. Wrap the provider around <Routes> so every route has access to the synchronized auth state.

Key guards

• Deduplicate logout triggers: use a ref flag or a small debounce so that simultaneous interceptor errors and manual clicks don’t fire multiple resets.
• Keep messages minimal—only a type discriminator—to avoid unnecessary payload parsing.
• Test in incognito/private windows; they often isolate localStorage and BroadcastChannel, so each context behaves independently (which is usually the desired security posture).

Verification checklist

1. Open two tabs, log in, then call the logout endpoint or expire the JWT in tab A.
2. Confirm tab B immediately clears the user object and redirects to /login without a manual refresh.
3. Disable BroadcastChannel (e.g., via a feature flag or by testing in an older UA) and verify the storage fallback still works.

One diagnostic detail needed: What is your minimum supported browser matrix? If Internet Explorer 11 must work, the storage fallback is mandatory; otherwise you can rely solely on BroadcastChannel and simplify the provider.