Universal Login - Login page keeps loading

Hi,

I’m working with Universal Login in my native app, using custom domains. I was able to figure out this issue React Native - “You should not be hitting this endpoint” but now when I press “Login” then the page keeps loading, see attached image:

Then I went to check the logs in Auth0 and this is what I’m getting:

It says “Successful Login” but the page keeps loading without doing anything.

I don’t know where I can check other logs to see what the issue can be or maybe you can help me out with a solution.

Thanks,

Daniel Berrocal

Hi @daniel.berrocal,

Are you putting credentials in, or does this happen before you enter your username/pw?

Let me know,
Dan

Hi @dan.woda,

Correct, I’m putting my credentials in and then it keeps loading without throwing an error or something.

Daniel Berrocal

Could you share the code you used to set up your auth? did you follow the react native quickstart?

Correct, I followed the react native quickstart.

Here is the code I used:

import Auth0 from 'react-native-auth0';
....

const auth0 = new Auth0({
  domain: *customDomain*,
  clientId: clientId
});


const signIn = async () => {
    try {
      const response = await auth0.webAuth
        .authorize({ scope: 'openid profile email' });
      const user = await auth0.auth.userInfo({ token: response.accessToken });
     ...
    } catch (err) {
      console.log(`Error trying to login: ${JSON.stringify(err)}`);
    }
  };

We are using Universal Login, so here is my configuration that is in https://manage.auth0.com/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->

  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.3/lock.min.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;
    
    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;
    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      allowSignUp: false,
      /* additional configuration needed for custom domains*/
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'login.dev.app.surehand.com'
      }, 
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        primaryColor: '#fba919',
      	foregroundcolor: '#000',
      	authButtons: {
        	'Username-Password-Authentication': {
          	primaryColor: '#fba919',
          	foregroundColor: '#000',
        },
      },
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });
    lock.show();
    
  </script>
</body>
</html>

I already though that maybe was something in there, so I disable the custom page and tried again and didn’t work.

I’m pretty sure it has to do with the usage of the custom domain, because when I started setting everything up and used the domain that is in the application that follows a pattern like {tenant}.auth0.com I was able to login and use my application, but I need to use the custom domain , so all I did when I started to use my custom domain was:

In this section of code:

const auth0 = new Auth0({
  domain: CUSTOM_DOMAIN,
  clientId: clientId
});

All I changed was the application domain and used my custom domain, also uncommented these lines in the Universal Login custom page:

configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: CUSTOM_DOMAIN
      }, 

That’s all I did, and now the login screen keeps loading after I put my username/pw.

Hope this code helps,

Let me know if you need more information.

Thanks!

Daniel Berrocal