Redirect the user to the appropriate Auth0 tenant

[Magic]

I would like to redirect the user to the appropriate Auth0 tenant and login form based on their selection in a form. How can I achieve this? I am using the Auth0 React SDK.

I have created three tenants in the Auth0 dashboard: staging, test, and prod. Each of these tenants will be connected to a different database. Specifically, in the staging environment, I want to place a form before the login form. This form should allow the user to choose the connection to the respective tenant.

The flow would be /beforeLogin → user selects a tenant from the dropdown → redirect to the Auth0 login form of the selected tenant. Currently, I am storing the user’s selection in React.Context. Variables such as clientId or audience change when the user submits the pre-login form with the selection of a specific tenant. However, regardless of the user’s choice, the login form always opens for the tenant that was initialized at the beginning.

Is it possible to implement this as described above, or does it go against best practices?

Here is the code that I used

export const Auth0ProviderWithNavigate = ({ children }: { children: ReactNode }) => {
  const { tenantVersion } = useContext(Auth0Context);
  const navigate = useNavigate();

  const { clientId, domain, redirectUri, audience } = pickTenant(tenantVersion);

  const onRedirectCallback = (appState?: AppState) => {
    navigate(appState?.returnTo || window.location.pathname);
  };

  if (!(domain && clientId && redirectUri && audience)) {
    return null
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: redirectUri,
        audience,
      }}
      useRefreshTokens
      onRedirectCallback={onRedirectCallback}
      useRefreshTokensFallback
    >
      {children}
    </Auth0Provider>
  );
};

const pickTenant = (tenantVersion: string) => {
  let domain = import.meta.env.REACT_APP_AUTH0_DOMAIN; //The tenant always opens with the variables with which it was initialized.
  let clientId = import.meta.env.REACT_APP_AUTH0_CLIENT_ID; //The tenant always opens with the variables with which it was initialized.
  let redirectUri = import.meta.env.REACT_APP_AUTH0_CALLBACK_URL; //The tenant always opens with the variables with which it was initialized.
  let audience = import.meta.env.REACT_APP_AUTH0_AUDIENCE_URL; //The tenant always opens with the variables with which it was initialized.

  if (tenantVersion === 'prod') {
    domain = import.meta.env.REACT_APP_AUTH0_DOMAIN_PROD;
    clientId = import.meta.env.REACT_APP_AUTH0_CLIENT_ID_PROD;
    redirectUri = import.meta.env.REACT_APP_AUTH0_CALLBACK_URL_PROD;
    audience = import.meta.env.REACT_APP_AUTH0_AUDIENCE_URL_PROD;
  }

  if (tenantVersion === 'test') {
    domain = import.meta.env.REACT_APP_AUTH0_DOMAIN_TEST;
    clientId = import.meta.env.REACT_APP_AUTH0_CLIENT_ID_TEST;
    redirectUri = import.meta.env.REACT_APP_AUTH0_CALLBACK_URL_TEST;
    audience = import.meta.env.REACT_APP_AUTH0_AUDIENCE_URL_TEST;
  }

  if (tenantVersion === 'staging') {
    domain = import.meta.env.REACT_APP_AUTH0_DOMAIN_STAGING;
    clientId = import.meta.env.REACT_APP_AUTH0_CLIENT_ID_STAGING;
    redirectUri = import.meta.env.REACT_APP_AUTH0_CALLBACK_URL_STAGING;
    audience = import.meta.env.REACT_APP_AUTH0_AUDIENCE_URL_STAGING;
  }

  return { domain, clientId, redirectUri, audience };
};

[dan.woda]

Hi @Magic,

Welcome to the Auth0 Community!

This would not be considered a best practice. Your different environments should be deployed in separate applications on different domains (and codebases). For example, you would have three tenants, three applications, on three domains/subdomains.

Each tenant would have it’s own application (client ID/secret), and each application would be deployed from a separated code base/repo. This way your environments are totally separated. Your user will need to make a login in each tenant/application seperately.

[Magic]

Perfect! Thank you for your response!