Adding options to custom Hosted Lock page errors

Help
1

In the “Lock” hosted page. After adding an option (any option). Copy and pasted. Logging in fails and when I F12 this is what I get. Newby here, but a simple adding of an option seems straight forward. Thank you.

image
image805×125 8.79 KB

Sign In with Auth0
2

Can you share the code you are trying to use?
The first two 404 are expected, the 403 is weird. In the Network tab of the developer tools of the browser you can inspect the response content from that 403, maybe it gives a clue of what’s going on.

3

Thanks for the help! I am literally copying from the configuration guide and setting the option on the third paramater of Auth0Lock.

  <!--[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 options = {
  allowAutocomplete: true
};
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, options,{
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      /* additional configuration needed for custom domains
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'YOUR_CUSTOM_DOMAIN'
      }, */
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        //primaryColor:    'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    lock.show();
4

The Lock instance constructed in the default template for the hosted login page already contains an anonymous options object, the third parameter in the constructor (the one that has auth, assetsUrl, and so on):

{
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      /* additional configuration needed for custom domains
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      [...]

So if you want to add the allowAutocomplete option, simply add it to the existing options object. Like this:

    var lock = new Auth0Lock(config.clientID, config.auth0Domain,{
      // your custom option
      autoComplete: true,
      // leave all the other options as they were
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      // continue the default template
5

OMG. I am such a rookie! Thanks, that was it. Great to have someone to lend a hand.

2 Likes
6

No worries @mbghone! Everyone has such moments no matter the experience :slight_smile: