May 2017

How to Detect User Log-in Across Browser Tabs

Some sites like GitHub prompt users to refresh the page when they sign in using a different browser tab. This feature is useful for users, who can benefit from the additional user-specific page context, and for site operators, who may receive fewer support inquiries.

Here’s how GitHub’s Web Storage-based implementation works:

Ensure the browser supports the Web Storage API (window.localStorage).
Determine if the user is currently logged-in. For example, GitHub adds a meta element to its HTML responses with the user’s username:
```
<meta name="user-login" content="bobsmith">
```
When a user is not logged-in, the element exists, but the content is empty. (If the element can’t be found, it aborts.)
Set the user’s logged-in status using window.localStorage.setItem.
Monitor storage events by creating an event listener:
```
window.addEventListener("storage", function(e){
  // Check for changes to the value of the key that
  // stores the user's logged-in state
})
```
Events fire whenever a change is made to the Storage object, but only when that change is made in a different context (e.g., a different browser tab).
In the listener’s callback, check for changes to the value of the key set in step #3. If e.newValue exists and differs from the initial value retrieved on page load, the user has logged-in or logged-out; prompt the user to reload the page.

GitHub’s developers chose to check and store the length of the username (bobsmith) to determine whether the user’s status has changed. This is a good design decision because not only does it detect log-ins and log-outs, but it will also detect most people who have logged-out and then logged-in again as a different user (so long as the lengths of the usernames differ).

They may have chosen not to store and use the username directly so as to reduce the impact of a browser vulnerability exposing this data to an attacker. For an even more sophisticated implementation, consider storing a one-way hash of user’s username to check against. ￭