React SPA B2B onboarding flow using two different Auth0 Applications

Get Help
,
1

Hey everyone!

I’m building a B2B app using Auth0’s React SDK with AWS Lambda (no express) and JWT auth. My login and sign up flows are split into two Auth0 Applications:

Login (Application) Client
The default client used in the React app (SPA), where users are authenticated in the context of an Organization. It uses the Business Users login experience.

Signup (Onboarding) Client
Used for first-time signup, where users aren’t in an Organization yet, and are authenticated outside of the context of an Auth0 Organization. It’s a Regular Web Application, uses the Individuals login experience, and is handled server-side.

The current onboarding flow is:

  1. User enters email and clicks “Get Started”.
  2. App constructs the Onboarding client’s /authorize URL with redirect_uri poitning to a server-side endpoint.
  3. The server-side endpoint validates the access and ID tokens and redirects back to my React app a different page (user is authenticated at this point)
  4. User entier their Organization name, triggering another server endpoint that:
    • Creates a new Auth0 Organization using a scoped M2M application,
    • Adds user as a member of the new organization
    • Redirects to the Application client’s /authorize with the organization parameter set.

For step 3
I’m struggling to find the best way to check if the user is authenticated at this point, and redirect to sign-in if not. Would it be better to use auth0-spa-js for the Onboarding client (instead of manually building the authorize URL), so I could use checkSession?

For step 4
After accepting organization membership, I’m redirected back to the sign-in screen instead of into the app. But if click the “Login” button, I’m fully signed in and redirected to the app. Is there a recommended way to bridge this, so the user lands in into the app under the organization context without an extra login?

Any advice would be much appreciated!

2

Your current setup with separate Auth0 applications for login and signup is a common pattern for B2B multi-tenancy. For step 3, using auth0-spa-js for your Onboarding client is highly recommended. It simplifies token validation and state management, and checkSession is indeed the correct method to verify user authentication without a full redirect. This will allow you to gracefully handle unauthenticated users. For step 4, the redirect to the sign-in screen after organization acceptance suggests that the session established by the Onboarding client isn’t seamlessly transferring to the Application client. The recommended approach here is to leverage Auth0’s OIDC conformant behavior. After successfully adding the user to the organization, instead of redirecting to the Application client’s /authorize with just the organization parameter, you should trigger a silent authentication flow (e.g., using checkSession with the organization parameter) from your React app once it loads. This will obtain new tokens scoped to the user’s new organization, effectively bridging the two sessions without an extra login step for the user.

1 Like