Authentication fails (AnomalyDetected, Invalid State) after multiple tabs logout, login in old tab

[jev]

We have encountered a strange behavior when our users uses multiple tabs (SPA). Simple steps how the issue is reproducible:

1. Open app and login using Auth0 universal login
2. Inside the page navigate somewhere but by opening new tab
3. Logout from the 1st tab, tab is redirected back to app login which again is redirected to Auth0 universal login
4. Logout from the 2nd tab (same redirects in place as in prev. step)
5. Try login in the 1st tab. Failure received with the following error:
   {“statusCode”:403,“description”:“Invalid state”,“name”:“AnomalyDetected”,“code”:“access_denied”}

No Anomaly checks enabled. Looks like at step 4) logout in the 2nd tab does something with the state that interfere with the 1st tab flow. Is that an expected behavior? We use auth0-spa-js in our React app. Any ideas?

Thank you!

[stephanie.chamblee]

Hi @jev,

Welcome to the Community!

I’m having difficulty recreating the behavior using the Auth0 React SDK Quickstarts: Login. Would you mind sharing the options you are passing to the Auth0Provider (be sure to take out any sensitive data such as domain or client ID)?

For example:

  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience}
    scope="openid profile email"
    redirectUri={window.location.origin}
    cacheLocation="localstorage"
    onRedirectCallback={onRedirectCallback}
    useRefreshTokens={true}
  >
    <App />
  </Auth0Provider>,

[jev]

Hi,

Thanks for such a fast response. We use approach described here:

@auth0/auth0-spa-js

When we create client we use following parameters:

const auth0 = createAuth0Client({
  client_id: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  redirect_uri: AUTH0_REDIRECT_URI,
  audience: AUTH0_AUDIENCE,
});

When we logout we just call:
auth0Client.logout({ returnTo: AUTH0_REDIRECT_URI });

AUTH0_REDIRECT_URI points to main page in our app and is whitelisted in the dashboard.

Thanks!

[stephanie.chamblee]

Hi @jev,

Does passing cacheLocation: "localstorage" correct the behavior?:

const auth0 = createAuth0Client({
  client_id: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  redirect_uri: AUTH0_REDIRECT_URI,
  audience: AUTH0_AUDIENCE,
 cacheLocation='localstorage'
});

I’m wondering if this is caused by the auth data being stored in memory.

[jev]

Apologies for the late reply… Thank you, that works. But this solution is not desirable as we have a requirement to store in memory. Is this something in the lib itself? Can we somehow workaround this one? Thank you!

[stephanie.chamblee]

@jev

Can we somehow workaround this one?

Unfortunately, I don’t believe so because of the nature of memory storage. It doesn’t persist page refreshes and does not pick up changes in other tabs.