Logging out of all tabs when logout occurs on 1 tab

localstorage_logout_sync.tsx

// Your main component.
const MyComponentWrapper = (props) => {
    // Watch changes to local storage, and if we logout in 1 tab,
    // logout in every other tab.
    const syncLogout = (event: StorageEvent): void => {
        if (event.key === 'logout') {
            Router.push('/login');
        }
    };

    useEffect(() => {
        window.addEventListener('storage', syncLogout);
        return () => {
            window.removeEventListener('storage', syncLogout);
            window.localStorage.removeItem('logout');
        };
    }, []);

    return (<div>your component stuff</div>);
};

// Somewhere else, as a handler for your `/logout` route.
const logout = (): void => {
    // 1. Hit your own backend /logout API so you can invalidate the current token.
    // 2. Delete current user's token.
    // 3. Now set the 'logout' key in local storage that will be picked up by the storage event listener.
    window.localStorage.setItem('logout', Date.now().toString());
};

@paambaati
I have one question for this source.
Which should be // Your main component.?
Sorry I just wondering, I'm from Vue.
For example:
If we have an App.vue is the very top component, and it's a wrapper.
So which should be the "// Your main component."

Thank you for your very useful script.