2

I have a strict requirement to only allow a logged in user to open my web app in one tab. I've noticed that WhatsApp and Google Messenger's web apps have implemented this. For example, trying to open those apps in more than one tab (be it on the same browser, different browser, or even different device) results in these warnings:

enter image description here

enter image description here

Anyone know how this is done? There must be some sort of sync happening between the server and the client to ensure that only one tab is open. But this would require a unique tab identifier, which can get quite complicated to build reliably. Anyone know how WhatsApp and Google Messenger are doing it? Their technique seems to work flawlessly.

Johnny Oshika
  • 54,741
  • 40
  • 181
  • 275

2 Answers2

1

I don't know exactly how this is done at WhatsApp and Google Messenger, but if you work with WebSockets (your post hast the tag "websocket", so I assume, you do) every tab has its single connection to the server, and if your users need to be logged in you could check if the user has already a open weboscket connection to your server.

Apollo79
  • 674
  • 3
  • 14
  • Very interesting approach. I don't actually use websockets at the moment, but it is something I can introduce. I currently use gRPC via Firebase's Firestore, so that's another area I can pursue. Thanks for the suggestion. – Johnny Oshika Feb 10 '22 at 18:35
  • I have no experiences with Firebase and its Firestore nor gRPC, but maybe this approach helps you to implement something similar. Maybe JSON WebTokens are something other you could work with. – Apollo79 Feb 10 '22 at 18:43
1

I dont know what is whatsApp web or google messages does but i've been manage to do that with local storage to mark the tab, and im using storage listener to listen if there is any changes to the local storage, what these code would do is decide what the first tab gonna do.

first assign some key to the tab with unique id, im using rand function.

localStorage.initPage = rand();

it would make a key called "initPage" into the local storage, then add the storage listener it would detect if the new tab is making new "initPage" key

window.addEventListener('storage', function (e) {
if (e.key === "initPage") {
    // action
}
}, false);

Hope it help.

Fragmantedbin
  • 75
  • 9
  • Thanks for this. While this can detect multiple tabs open in the same browser, it won't detect a tab being open in another browser or another device. – Johnny Oshika Aug 31 '23 at 21:17