Custom hosted login page failing with AnomalyDetected

[mkleene]

I’m using the default Custom Login Form template and I’m having some issues getting Username/Password database authentication working with a Client. When I go to the Connection page and click on ‘Try connection’ I successfully authenticate the user and go the ‘It Works!’ page. When I try to do it using the url for a Client, like:

https://my-company.auth0.com/client=

then I see the following:

Request:

{
"client_id":<my client id>,
"redirect_uri":<my redirect uri>,
"tenant":"my-company",
"response_type":"code",
"_csrf":"kBH1sGPrjx4zE2W4Bo9KYCjJpuxARbQIpOs",
"_intstate":"deprecated",
"username":"***",
"password":"***",
"connection":"test",
"state":"X8EBiwAI-kgju000quqSR_T_65z2wlTV"
}

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

[jmangelo]

The entry point for a full authentication request that mimics the behavior of a real client application should be the /authorize endpoint (assuming you want to use OIDC/OAuth 2.0 protocols). The URL you mentioned does not seem correct nor using the /authorize endpoint so that likely explains the situation.

You can check the documentation for the above endpoint (Authentication API Explorer) if you want to manual build an authorization URL associated with a specific client just for testing purposes.

[mkleene]

Thank you for your response!

I’m using the method outlined in the Auth0.js documentation and recommended in the ‘Custom Login Page’ template on the ‘Hosted Pages’ page:

var config = JSON.parse(
   decodeURIComponent(escape(window.atob('@@config@@')))
);

var params = Object.assign({
    domain: config.auth0Domain,
    clientID: config.clientID,
    redirectUri: config.callbackURL,
    responseType: 'code'
  }, config.internalOptions);

  var webAuth = new auth0.WebAuth(params);

  var databaseConnection = 'test';

  function login(e) {
    e.preventDefault();
    var username = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    webAuth.login({
      realm: databaseConnection,
      username: username,
      password: password
    }, function(err) {
      if (err) displayError(err);
    });
  }

Is there another way that I should implement username/password authentication to a Database Connection from a custom form?

[jmangelo]

That code seems correct for a hosted login page as it’s using the suitable method and passing the internal options to the library, but you still need to start the authentication request at the correct endpoint. What’s the full URL used by your client application to start the authentication request?

[mkleene]

Ah, I see, I was navigating directly to the page without starting the login process in my application. That explains it. Thank you for your help!