User not refreshed if storage is emptied

[EloHg]

Hello, I'm trying to use this library in my project. When the user logs out from a tab I would like to log him out of all tabs. For this I thought I could configure userManager to use localStorage but even if I remove the user from one tab the user that was loaded in the context of other tabs is not refreshed. Is there an event I should be listening too or if not would it be possible to tell the provider to call the userManager.getUser() function at a certain interval to refresh the user in the context? Thanks!

[pamapa]

userManager.removeUser() or userManager.signoutRedirect/Popup/Silent should make it work

[kramer99]

I have the same problem. I set the userStore to use local storage in order to have the session shared amongst multiple tabs:

oidcConfig.userStore = new WebStorageStateStore({
    store: window.localStorage
});

...and in my sign out handler I have:

const onClick = () => {
    auth.removeUser();
    Router.push('/signin');
};

...which works fine for the tab where the Signout was clicked... but switching to the second tab, I see that the AuthContext still thinks isAuthenticated == true and that a user exists - despite the entry now missing in local storage.

I played with signoutRedirect() - but I don't in fact want to log out at the authorization provider - just the open tabs of my app.

I've found snippets in the Issues here about using events, but haven't had any luck trying those out as yet.

[AlexThurston]

Has anyone figured out how to get this to work correctly? I am running to the same issue. I do notice that after the session's token has expired, the remaining tabs (presumably because they can't refresh the token) will transitioned to a state where auth.error is set.

[AlexThurston]

I believe I've figured out how this can be done. The first step is to include monitorSession={true} to the AuthProvider, ie:

 <AuthProvider {...otherConfig} monitorSession={true}>
   ...
</AuthProvider>

The second is to add a called back to the addUserSignedOut event, ie:

const auth = useAuth()

React.useEffect(() => {
        return auth.events.addUserSignedOut(() => {
            auth.signoutSilent();
        });
    }, [auth.events]);

And there you have it. All other tabs will be signed out.

[EloHg]

I believe I've figured out how this can be done. The first step is to include monitorSession={true} to the AuthProvider, ie:

 <AuthProvider {...otherConfig} monitorSession={true}>
   ...
</AuthProvider>

The second is to add a called back to the addUserSignedOut event, ie:

const auth = useAuth()

React.useEffect(() => {
        return auth.events.addUserSignedOut(() => {
            auth.signoutSilent();
        });
    }, [auth.events]);

And there you have it. All other tabs will be signed out.

This works if you want to sing out from the provider but does not work if you only want to remove the user from the browsers storage.