DEV Community

Cover image for The Multi-Tab Logout Problem Nobody Warned You About

The Multi-Tab Logout Problem Nobody Warned You About

Thea on August 25, 2025

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. ...
Read full post
Collapse
 
link2twenty profile image
Andrew Bone • • Edited

You can also use the Broadcast Channel API for this.

const bc = new BroadcastChannel("auth_channel");

function logout() {
  // logout logic
  bc.postMessage('logout');
}

bc.addEventListener('message', ({ data}) => {
  // Could reload, redirect, or update state
  if(data === 'logout') window.location.reload();
});
Enter fullscreen mode Exit fullscreen mode

But I think if your storing keys in local storage it does make sense to just listen there.

Collapse
 
highflyer910 profile image
Thea • • Edited

Oh right! Broadcast Channel API works well too
I used local storage because most apps already store auth stuff there, so one listener handles logout and other auth changes.
But yes, if you only need logout sync, Broadcast Channel is simpler for sure..
Thanks for sharing!

Collapse
 
tbroyer profile image
Thomas Broyer •

Fwiw, most apps I've worked on don't store anything in local storage, and certainly not auth-related things!

Thread Thread
 
highflyer910 profile image
Thea •

lol right, in demos I've seen localStorage used a lot, but you're right, secure storage is safer:)

Thread Thread
 
fredbrooker_74 profile image
Fred Brooker •

it's a notification, does not matter :D

Collapse
 
chanhlt profile image
Chanh Le •

I think the BroadcastChannel API is more appropriate for this case.

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •
  • 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.

The moment you log out of Tab 1 and then log in to Tab 2, you're using a feature. Most of the things are refresh or server actions based. Like, logging into X or LinkedIn, then opening two tabs, T1 & T2. You log out from T1, and then T2, you're still active. The moment you try to like, comment, or rewatch something, that's a server action, and then it's not completed. Of course, you'll still enjoy those 3-4 minutes of free time/see whatever is in your viewport, but then it will mostly be refreshed soon.

Most of the websites have identified and fixed this. But the new-age vibecoded applications aren't, I'm just saying. Well you know, 😊

Collapse
 
highflyer910 profile image
Thea •

Exactly! Big platforms handle server-side validation well. The problem is newer apps that let you click around for minutes before realizing your session is dead:)
This post is mainly for devs who haven't dealt with this yet , better UX to sync logout immediately on the client side

Collapse
 
srbhr profile image
𝚂𝚊𝚞𝚛𝚊𝚋𝚑 𝚁𝚊𝚒 •

Yes, smart devs are likely to test and find it out while building an app.

Big platforms -> lots of devs working together. In the end, it's all developers. Always have been

Collapse
 
raziq_din_bd0274cc2ac748b profile image
Raziq Din •

Great read!

Collapse
 
parag_nandy_roy profile image
Parag Nandy Roy • • Edited

Ah yes... the ghost session 👻 sneaky but deadly 😁

Collapse
 
eghtesadiha profile image
Eghtesadiha •

Thanks for sharing this! Super helpful — I never noticed this issue before.

Collapse
 
fredbrooker_74 profile image
Fred Brooker •

I've found that localStorage can be blocked, so always use try/catch and preferably try the feature first, then note it in you global object, that local storage is NOT available