Multiple auth0 providers breaks hooks until refresh

[ryan-nauman]

Describe the problem

When using multiple auth0 providers (the second with a custom context) the useAuth0 hooks do not return the correct status for each provider unless a page refresh occurs.

What was the expected behavior?

I expect both hooks to appropriately display the user information without requiring a page refresh.

Reproduction

1. Setup two auth0 providers using cacheLocation="localstorage".
2. Login using provider A
3. Verify useAuth0 displays correct information
4. Login using provider B
5. useAuth0(providerBContext) returns correct information. useAuth0() returns initial information (isAuthenticated=false)
6. Refresh the page to see useAuth0(providerBContext) & useAuth0() both return correct information

Example

MFA.tsx

const MFA = () => {
  const {
    user: mfaUser,
    isAuthenticated: mfaIsAuthenticated,
    loginWithRedirect: mfaLoginWithRedirect,
    logout: mfaLogout,
  } = useAuth0(MFAContext);
  const { user, isAuthenticated, loginWithRedirect, logout } = useAuth0();

  return (
    <>
      <MFANav />
      <h1>Standard</h1>
      {isAuthenticated ? (
        <>
          <pre>{JSON.stringify({ isAuthenticated, user }, null, 2)}</pre>
          <Button
            variant="outlined"
            color="primary"
            onClick={() => {
              logout({ returnTo: `${window.location.origin}/mfa` });
            }}
          >
            Logout
          </Button>
        </>
      ) : (
        <Button
          variant="outlined"
          color="primary"
          onClick={() => {
            loginWithRedirect({
              returnTo: `${window.location.origin}/mfa`,
            });
          }}
        >
          Login
        </Button>
      )}
      <h1>MFA</h1>
      {mfaIsAuthenticated ? (
        <>
          <pre>{JSON.stringify({ mfaIsAuthenticated, mfaUser }, null, 2)}</pre>
          <Button
            variant="outlined"
            color="primary"
            onClick={() => {
              mfaLogout({ returnTo: `${window.location.origin}/mfa` });
            }}
          >
            MFA Logout
          </Button>
        </>
      ) : (
        <Button
          variant="outlined"
          color="primary"
          onClick={() => {
            mfaLoginWithRedirect({
              acr_values: MFA_ACR_VALUES,
              max_age: 0,
              returnTo: `${window.location.origin}/mfa`,
            });
          }}
        >
          MFA Login
        </Button>
      )}
    </>
  );
};

MFAContext:

import { Auth0ContextInterface, initialContext } from '@auth0/auth0-react';

const MFAContext = React.createContext<Auth0ContextInterface>({
  ...initialContext,
});

Provider A:

    <Auth0Provider
      domain={domain}
      clientId={clientId}
      audience={audience}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      scope="read:current_user update:current_user_metadata"
      cacheLocation="localstorage"
      useRefreshTokens
    >
      {children}
    </Auth0Provider>

Provider B:

    <Auth0Provider
      domain={domain}
      clientId={clientId}
      audience={audience}
      redirectUri={`${window.location.origin}/mfa`}
      onRedirectCallback={onRedirectCallback}
      scope="read:current_user"
      cacheLocation="localstorage"
      useRefreshTokens
      context={MFAContext}
    >
      {children}
    </Auth0Provider>

Environment

• Version of auth0-react used: tested with both "@auth0/auth0-react": "1.12.0", & "@auth0/auth0-react": "2.0.1",
• Which browsers have you tested in? Chrome
• Which framework are you using, if applicable (Angular, React, etc): React
• Other modules/plugins/libraries that might be involved: -

[ewanharris]

Hey @ryan-nauman, thanks for this issue.

I just have some questions about your configuration:

• Are you using the same clientId and audience values for both providers?
• Does your onRedirectCallback handle not triggering for the other provider (you might need to set skipRedirectCallback.

I believe I can reproduce your issue but I want to make sure I'm setup the same as yourself as the multi-provider setup behaviour can be quite different dependent on just a few variables. If you're able to provide the project itself that would be even better

[adamjmcgrath]

Closing due to inactivity