Syncing logout across tabs in next.js

Help
,
1

I’m using nextjs-auth0. When a user logs out via auth0 ini one tab, I want to sign them out in all other tabs of our app. I’ve found this GitHub issue that’s almost identical: Checking logout in another tab. · Issue #1044 · auth0/nextjs-auth0 · GitHub. However, I’m having trouble implementing the recommendation:

You can use checkSession like so:

const { checkSession } = useUser(); await checkSession();

We don’t provide any mechanism to sync the front end login state across tabs or window, you would need to do that yourself either by polling, or hooking onto a browser event like visibilitychange

I’ve tried implementing polling with checkSession:

{ user, checkSession } = useUser()
setInterval(async () => {
    checkSession()
}, 1000 * 60)

When I call checkSession(), the value in user gets updated as expected. My problem is that because the user object is re-initialized each time this function is called, any useEffect that relies on the user object is re-rendered with each call… which means they are re-rendered a lot.

I wasn’t able to find documentation on how to use the visibilitychange event.

Any recommendations on how to approach this?

Thanks!