Multiple tabs same session, clear the session when all tabs are gone

Question

So I recently had acceptance criteria for a site I was building that went as such:

• After a user logs in to the site in any tab if they navigate to the site in a new tab they must already be logged in
• When a user logs out of any tab they must log out of all tabs immediately
• A user can refresh the page and stay logged in
• Once all tabs are closed the user is logged out and must log back in
• I didn't have access to change the server code (so this had to be done on the client)

I found this Question/Answer which was really helpful

When looking through this I had to rule out cookies because outside of doing a request to the server tab A will no know that tab B had changed the cookie

So I took some parts of the answer from the question above and started using local-storage and added an event to check for if the 'logged-in' state was changed which allowed me to log out in one tab and immediately log out in another without using setInterval to continuously check! Yay

But then I still had the issue of once all tabs were closed if you opened a new tab and navigated to the site you were still logged in.

I tried some possible solutions like having a counter of the tabs that has a session open, decrement and increment on tab close/open (using window.onbeforeunload). ISSUE: refresh of the site when there is only one tab active would log you out. Everything I could think of had an edge case where it didnt work.

Answer 1

local-storage + session-storage!

I would store the value logged-in in both the local-storage and the session storage, when a window was loaded (either a new tab or a refresh of the existing one) it would check local-storage for the 'logged-in' value and if it was not there it would check session-storage!

Basically I am using session-storage to handle the refresh of a page and local-storage to handle multiple tabs. Each time a window/tab is unloaded (closed or refreshed) I delete the local-storage 'logged-in' and when I come back into the page if it is in session-storage but not in local-storage I put it back into local-storage from the session-storage and continue as an authenticated user

Here is the code for this:

On login:

localStorage.setItem('logged-in', true);
sessionStorage.setItem('logged-in', true);

In my base component:

window.onbeforeunload = (event) => {
    localStorage.removeItem('logged-in');
}

let loggedIn = localStorage.getItem('logged-in');
let sessionLoggedIn = sessionStorage.getItem('logged-in');
if(!loggedIn) {
    if(sessionLoggedIn) {
        localStorage.setItem('logged-in', JSON.parse(sessionLoggedIn));
        //go to authenticated space
        window.location.href = '/authenticated';
    } else {
        //go to login
        window.location.href = '/login';
    }
} else {
    //go to authenticated space
    window.location.href = '/authenticated';
}

window.addEventListener('storage', (event) => {
    if (event.key == 'logout' && event.newValue) { 
        sessionStorage.removeItem('logged-in');
        localStorage.removeItem('logout');
        window.location.href = '/login';
    }
});

On logout

localStorage.setItem('logout', true)

Hope this helps some of you if you ever find yourself in a similar situation