Use two Auth0Provider (one for each React injection) causing one injection not working

[ben.liu]

Hi,

We have a use case using React where we need to inject two places with the same Account component like below:

index.tsx

if (document.getElementById('injection-placeholder-1')) {
  ReactDOM.render(
    <React.StrictMode>
      <CommonProviders>
        <Account />
      </CommonProviders>
    </React.StrictMode>,
    document.getElementById('injection-placeholder-1')
  )
}

if (document.getElementById('injection-placeholder-2')) {
  ReactDOM.render(
    <React.StrictMode>
      <CommonProviders>
        <Account />
      </CommonProviders>
    </React.StrictMode>,
    document.getElementById('injection-placeholder-2')
  )
}

CommonProviders component

const CommonProviders: React.FC<CommonProvidersProps> = ({ children }) => (
  <Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN ?? ''}
    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID ?? ''}
    audience={process.env.REACT_APP_AUTH0_AUDIENCE ?? ''}
    redirectUri={window.location.origin}
  >
    {children}
  </Auth0Provider>
)

Account component

const Account: React.FC<AccountProps> = () => {
  const { isAuthenticated } = useAuth0()

  return isAuthenticated ? <a>Log out</a> : <a>Sign in</a>
}

Given that I have used another code to somehow set the Auth0 session in the localhost, the expected output in the browser should be:

Log out
Log out

However, I got below

Log out
Sign in

Does it mean there can be only one Auth0Provider used per React application? How to work around this issue given this use case?

Thanks in advance,

• Which SDK this is regarding: @auth0/auth0-react
• SDK Version: 1.6.0
• Platform Version: Node v14.16.0

[rueben.tiow]

Hi @ben.liu,

Welcome to the Auth0 Community.

I understand that you have questions regarding using two Auth0Providers.

@ben.liu

Does it mean there can be only one Auth0Provider used per React application? How to work around this issue given this use case?

Generally, there can only be a single Auth0Provider component that you can use to wrap your application. This will provide the React Context to components that are placed inside your application.

Having more than one Auth0Provider will cause conflicts such as the behavior you see with your implementation.

Regarding a workaround, I recommend checking out this related Community Topic that addresses using two Auth0Providers in a Single React App: https://community.auth0.com/t/using-2-auth0providers-in-a-single-react-app/52455

Please let me know if this resolves your issue.

Thank you.

[ben.liu]

Hey @rueben.tiow ,

thanks for your response.

By inspecting into the link of workaround, it looks like a different use case where there are two AuthProviders pointing to DIFFERENT client ids (therefore using skipRedirectCallback to avoid conflict), whereas in my use case, both AuthProviders are pointing to the SAME client id.

Any other way to work around this issue?

Best Regards,
Ben

[rueben.tiow]

Hi @ben.liu,

Thank you for clarifying.

Unfortunately, you can only use a single Auth0Provider in your application when using one application (clientID).

To understand your use case better, could you please elaborate more on why you intend to use two Auth0Providers pointing to the same clientID?

Thank you.

[rueben.tiow]

Hi @ben.liu,

I hope you are doing well.

It’s been some time since we have heard from you. If you still have concerns regarding your initial question, please feel free to reply to us here.

Otherwise, this topic will automatically close in a couple of weeks.

Thank you.