How to use custom domain in universal login popup?

Help
, ,
1

using auth0 for react

"@auth0/auth0-react": "1.8.0",
"auth0-js": "^9.17.0",

We have a custom domain but how do we get the universal login popup to use the new domain?
We just have simple button that binds the click in a react app

const { isAuthenticated, loginWithPopup } = useAuth0();
...
<Button
  onClick={() => loginWithPopup()}
  className="ContinueBTn"
>

I’ve tried looking changing some of the configs in the login template but that didn’t work either.
How can I make the login popup use our custom domain instead of the tenant url @ https://{tenant_name}.us.auth0.com/?

3

Hi @aryou,

Thanks for reaching out to the Auth0 Community!

I understand that you would like to configure to use your custom domain in the Universal Login Page.

To do so, please see this doc here to learn more about how to configure the Auth0 Universal Login with custom domains.

In this situation, you will need to set the override options in your code:

var webAuth = new auth0.WebAuth({
  clientID: config.clientID,
  domain: config.auth0Domain,
  //code omitted for brevity
  overrides: {
  	__tenant: config.auth0Tenant,
  	__token_issuer: config.authorizationServer.issuer
  },
  //code omitted for brevity
});

Once that is complete, you can use your custom domains for login.

Please let me know if there’s anything else I can do to help.

Thank you.

4

Hi Rueben,
Thank you for getting back to me. I have uncommented the overrides section in the universal login. This is what it currently looks like but its still not using the custom domain in the popup

    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: ['Username-Password-Authentication'],
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      languageDictionary: languageDictionary,
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      allowSignUp: false
    });

    // page_background code

    lock.show();

What am I doing wrong?

5

Should I be using new auth0.WebAuth instead of new Auth0Lock?

6

Hi @aryou,

Thank you for your responses.

After further testing, I was able to access my custom domain’s Universal Login page by making a request like the following:

https://YOUR_CUSTOM_DOMAIN/authorize?
    response_type=code&
    client_id=YOUR_CLIENT_ID&
    redirect_uri=https://YOUR_APP/callback&
    scope=SCOPE&
    state=STATE

For my configuration, I configured custom domains and used the default Auth0 Lock template with the Classic Universal Login experience.

Since you are using Auth0 Lock, you can continue using it. And after testing your script, it works for me without any problems. I could access my custom domain login page.

With that, you should be all set and good to go.

Please let me know if you encounter any further issues or have any questions.

Thank you.