Login issue when added custom field in the sign-up page

Get Help
, ,
1

I have added the custom input field on the sign-up page after that I’m trying to log in but got fail can anyone help on this. while login i got response
{“statusCode”:403,“description”:“Invalid state”,“name”:“AnomalyDetected”,“code”:“access_denied”}

image

1 Like
3

Hi @Vijayan_Murugan,

Thanks for reaching out to the Auth0 Community!

I understand you encountered issues with logging in.

Before we continue, could you please share your Universal Login Page code?

And could you please clarify if you could log in without the added custom field previously?

Thank you.

4

Hi @rueben.tiow,

below code is sample one please take a look

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with APP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</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.32/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;
    var colors = config.colors || {};
	
var options = {
   auth: {
          audience:'https://example.us.auth0.com/api/v2/',
          redirect: true,
          params: {
            scope: "openid profile email"
          },
},
  closable: false,
  languageDictionary: {
    title: "Sample App Log In"
  },
   flashMessage: {
    type: 'success',
    text: 'Welcome!'
  },
  allowShowPassword: true,
  allowAutocomplete: true,
   connectionScopes: {
    connectionName: [ 'Username-Password-Authentication']
   },
  allowedConnections: ['Username-Password-Authentication'],
  theme: {
   // logo: '',
    primaryColor: '#0059d6',
    page_background:'#f8f7f7'
  },
  additionalSignUpFields: [{
    type: "select",
    name: "userType",
    placeholder: "choose your sign in type",
    options: [
      {value: "U", label: "User"},
	  {value: "C", label: "Contributor"},
    ],
    // The following properties are optional
    //icon: "https://example.com/assests/location_icon.png",
    prefill: "U"
  }]
};
    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    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
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      languageDictionary: languageDictionary,
      theme: {
        logo:            '',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
    });

    if(colors.page_background) {
      var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                  colors.page_background +
                ' }';
      var style = document.createElement('style');

      style.appendChild(document.createTextNode(css));

      document.body.appendChild(style);
    }

    lock.show();
  </script>
</body>
</html>
5

Hi @Vijayan_Murugan,

Thank you for your response.

I have tested the additionalSignUpFields in isolation and found that it works correctly without issues. I can confirm that it is not an issue and not responsible for the login errors you experienced.

Now, looking carefully at your error:

{
  "statusCode":403,
  "description":"Invalid state",
  "name":"AnomalyDetected",
  "code":"access_denied"
}

I found it to be reproducible when directly calling the /username/login endpoint when it should hit the /authorize endpoint. Moreover, this error indicates that a state was not passed.

To work around this, could you please add the params: config.internalOptions, to your Auth0Lock and see if it resolves the issue?

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  params: config.internalOptions,
  // ...redacted for brevity
}

Please let me know how this works for you.

Thank you.

7

Hi @rueben.tiow

Thanks,
sure, let me try once