Picture this: you’re using your favorite web app. You have three tabs open — one with reports, one editing a document, and one checking settings.
In the settings tab, you click Logout.
You think you’re done… but when you switch back to the other tabs, surprise! They still look logged in. You can click buttons, type in forms, and maybe even see private data.
This is the multi-tab session problem. And it’s more common than you think.
Why This Problem Happens
Browsers don't automatically tell every tab that you've logged out in another one.
Yes, cookies are shared across tabs, but your app’s JavaScript in each tab doesn’t know what happened until it talks to the server again.
So you end with:
- Tab A -> You're officially logged out (server knows, UI knows)
- Tab B -> Your UI doesn't know what happened and hasn't updated yet
Result: a weird, broken state that can confuse users or even expose private data.
Real-Life Example
Imagine a design tool with a subscription:
- Tab 1: You’re using a premium feature.
- Tab 2: You cancel your subscription in settings.
- What happens? Tab 1 still lets you use the premium feature until refresh.
Bad for business (free features) and bad for the user (sudden “Access Denied” when saving). Everyone loses.
How Developers Fix It
The trick is simple: make your tabs talk to each other.
Step 1: When something important changes (like logging out), store that change in localStorage.
Step 2: Add a listener in every tab that watches for these changes:
window.addEventListener('storage', (event) => {
// Check for our specific key and that it was set to 'loggedOut'
if (event.key === 'authStatus' && event.newValue === 'loggedOut') {
// Could reload, redirect, or update state
window.location.reload();
}
});
Now, if one tab logs out and sets authStatus = 'loggedOut', the other tabs instantly know.
Better approach: instead of always reloading (which can be annoying), you can show a message like: "You’ve been logged out" → redirect to login page.
Things to Remember
- This only works for the same domain (yourapp.com).
- The storage event fires only in other tabs, not the one that made the change.
- For some apps, you may also want to sync session data between tabs, but that’s extra work.
The Bottom Line
If you’re building a web app with accounts, don’t forget the multi-tab case. Users won’t thank you when it works… but they’ll notice when it doesn’t.
Because the only thing worse than a broken logout is working inside a ghost session that died 20 minutes ago. 👻
You can also use the Broadcast Channel API for this.
But I think if your storing keys in local storage it does make sense to just listen there.