Hosted login page not redirecting with an id_token

I am setting up a new tenant for testing a few things. My current tenant is a bit older, so maybe some of the legacy settings are affecting things but I am not sure what they could be.

I have a hosted login page. I configure the lock with auth.responseType = ‘id_token’, but when the user has signed in/up, they are redirected back to my domain with only an access token in the hash.

It works as expected in my old tenant but I can’t figure out which if any settings could be causing this. I am not sure how to debug this.

Hi @kristian_d

If you are wanting both an access_token and an id_token try setting the responseType to token id_token. (docs regarding tokens)

Hope this helps!

Well I actually only need the id_token which doesn’t seem to be included. I am not sure how to debug that.

Hi @kristian_d

Ah I see, using only id_token should be fine.

Are you able to post the snippet of code that creates your auth object and the code that executes the login?

    // 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;
    
    var lockConfig = JSON.parse(config.extraParams.lockConfig);
    
    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;
    
    var cfg = {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: 'id_token'
      },
      assetsUrl:  config.assetsUrl,
      allowLogin: lockConfig.allowLogin,
      allowSignUp: lockConfig.allowSignUp,
      allowedConnections: lockConfig.allowedConnections,
      rememberLastLogin: false,
      language: language,
      languageDictionary: lockConfig.languageDictionary,
      avatar: null,
      theme: {
        logo: lockConfig.theme.logo,
        primaryColor: lockConfig.theme.primaryColor
      },
      prefill: lockConfig.prefill,
      closable: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    };

    console.log('Configuration: ', cfg);
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, cfg);
    
    lock.show({gravatar: false});

Hi @kristian_d

Sorry for the late response, work commitments and public holidays got in the way :slight_smile:

From what I can see, the code snippet you posted is from the Auth0 Hosted Login page. Is this correct?

If so, this may be causing your issue as you should be passing the responseType when you make the authentication API call to Auth0 on your client side.

You can try resetting your Hosted Login page to the Auth0 default lock template, and setting the responseType when making the Authentication API call to Auth0.

Hope this helps!

Yes, this is from the hosted page.

I am, I only overrode (and tested) this in order to make it clear that responseType in fact has the value ‘id_token’. I get that this is not how you should do it but shouldn’t that still produce the expected behavior?

Hi @kristian_d

I’m not 100% certain on that part but I do know there is a lot of state parameters used.

Using the default Hosted page, can you please confirm whether the below URL works for you (I have been able to confirm on my test tenant that this url works):

https://<auth0_domain>.au.auth0.com/authorize?response_type=id_token&client_id=<client_id_for_a_web_client>&scope=openid%20email%20profile%20&redirect_uri=<redirect_uri_for_your_web_app_expecting_id_token>&nonce=whysoserious