I’m looking to enable self-service signup within my multi-tenant application using Auth organizations and Universal Login, but I’m having trouble integrating this with the React SDK. From what I’ve gathered, the best way to accomplish this so far is to use two clients:
Application client - The default client used in the React application, where users are authenticated in the context of an Auth0 Organization (“Business Users” login experience)
Onboarding client - The is used during the user’s initial signup flow. There is no organization for the user yet, and they are authenticated outside of the context of an Auth0 Organization, then uses the Management API to create one and add the user as a member.
The problem is the onboarding client is handled on the server while the React app requires organization membership to authenticate. Do I create a third application and switch clients in the Auth0Provider?
Creating a 3rd application to manage a correct redirect should not be needed in this case and it is not the recommended approach. I would advise on creating a separate endpoint on the server side application to redirect the users to after a successful singup in the onboarding client. So when a user registers the redirect_uri for this onboarding flow should point to a server-side endpoint in your application, not directly to your React app. Then your application’s code should
Verify the tokens
Create a new Auth0 Organization.
Add user as a member of the new organization.
Redirect to the React App callback’s URL with the organization parameter set in the /authorize request.
Then your React App should receive tokens that include an org_id as well.
I hope this helps and if you have further questions please let me know.
Thanks,
Remus
I guess my main confusion occurs with the initial user signup flow in this case. Since my main (React) application is set to “Business Users” login experience in order enforce organization membership in order to authenticate, do I need to configure my onboarding application as a “Regular Web Application” and then redirect the user to its /authorize endpoint and set redirect_uri to the server endpoint? If so, I’m a little unsure of the best way to handle this since loginWithRedirect would point to the main React application Universal Login instead of the onboardingClient.
Then, once the user is authenticated, I follow the steps you listed server-side? So I would have two applications — main (React) and onboarding. Would I need use a M2M application for handling Auth0 Management API or is it fine to handle this with the onboarding client?
You’re absolutely right about this. The onboarding client should be set as a Regular Web Application designed for a simple registration process and the server endpoint should take care of the organization assignment this way.
You can also manage the newly created endpoint from within your regular web app, but the more recommended approach would be indeed creating a M2M application with specific scopes such as create:organizations, create:organization_members and so on to interact with the Management API for a more clear separation.
Last question: Is there a recommended way to check for a session in the onboarding flow after redirecting to my React App’s callback URL?
My goal is to allow users to name their organization before it’s created in my backend. But if there’s no session, I’d like to redirect them back to /sign-in.
I can’t use the useAuth0() here since it’s configured for my main client, which requires an organization. I am receiving an appSession cookie from the backend but from my understanding it’s not recommended to decode this.
Just to recap, my current flow is:
User enters email and clicks “Get Started”
User is redirected to the “onboarding” client /authorize endpoint with redirect_uri set to a server-side endpoint
Once authenticated, my server-side endpoint validates the access token and ID token and redirects to my React App SPA Callback URL /onboarding/create — appClient cookie created
User enters organization
But first, check for a session redirect back to /sign-in if there isn’t one
a server-side endpoint creates the organization using a M2M application with proper scopes and sends back the org_id
call loginWithRedirect with the org_id passed as a parameter
