Using 2 Auth0Providers in a single react app

Help
1

Please include the following information in your post:

  • Which SDK this is regarding: auth0-react
  • SDK Version: e.g. 1.1.0
  • Platform Version: e.g. Node 12.19.0
  • Code Snippets/Error Messages/Supporting Details/Screenshots:

I have an app which at some point I will probably split into two apps, but for the sake of expediency at the moment have everything in one code base. Thus I have something like this:

<PatientAuthProvider>{patientRouting}</PatientAuthProvider>
<DoctorAuthProvider>{doctorRouting}</DoctorAuthProvider>

Each AuthProvider wraps an Auth0Provder and points to its own app, that is they have different client IDs.

I was hoping that everything inside each AuthProvider was self contained, however when I have both AuthProviders I’m getting some errors. When I remove one, then everything works fine. So, it looks like they are stepping on each others toes, as it were. My initial guess is that they may be saving the tokens to the same cache location, though I haven’t invested this yet. Before I get too far down this rabbit hole, I’d like to know whether it is even possible to have more than one Auth0Provider within an app. If so, any hints on getting them to play nice with each other?

2

Hmm, well it looks like my initial guess about the cache is wrong, since it they key is built like: ``${keyPrefix}::${e.client_id}::${e.audience}::${e.scope};

So, any other thoughts on why this might be failing would be great.

4

Implementing a separate callback url for each instance and configuring the skip correctly allows 2 providers in the same app:

https://github.com/auth0/auth0-react/pull/148

1 Like
5

Thanks for sharing this with the rest of community!

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.