Auth0 Different Logins for Different Roles

Hello everyone,

I have a question about how I should proceed. I currently need two forms of Authentication 1 for regular users and 1 for special healthcare providers.

Backstory

I created two separate single page applications (I am using a React frontend and Java/Spring backend) in the Auth0 dashboard for each authentication form (regular user and healthcare provider) and each one has a unique client id. I have 2 roles setup with the Auth0 dashboard for both user and healthcare provider and a special rule.

My rule will look at the client id for the incoming authentication request and if it is the users first time logging in the rule will automatically assign the user a role depending on which SPA app they used to authenticate (basically it looks at the client id in the request).

Question:

On the client side (React) how can I dynamically update the client id of the SPA Auth0 application users use to login? I.e there will be two buttons on the login page one for regular users and one for health care providers. I want new users to click on the appropriate button and be re-directed to the appropriate Auth0 application so that their roles are correctly assigned automatically upon registration and sign in.

My React app uses the Auth0 SDK for React here and it uses the component as the top level wrapper for all the children in the application I.e:

ReactDOM.render(<Auth0Provider client_id={THIS_NEEDS_TO_BE_DYNAMIC}><App /></Auth0Provider>);

Any help would be much appreciated.