403 'Invalid state' from Custom Login Page with Classic Universal Login Enabled

Overview

With the Classic Universal Login enabled, the following features have been configured:
  • 'Customize Login Page' is enabled under Branding > Universal Login > Advanced Options > Login 
  • Custom HTML has been added, including additional javascript files that are hosted in a non-Auth0 related CDN
  • Using the Auth0.js library in the Customized Login Page
With the above configurations, end users see the error 'invalid state' when attempting to log in to a given connection.

Cause

When the config.internalOptions object, which includes the state value generated at GET /login, is not included in the params object, the correct state is not passed to the Auth0.js login methods. This results in the methods generating a new state value that does not match the original /login state.

Solution

Ensure that the config.internalOptions object in included in the params object like the following:
var params = Object.assign({
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: config.authorizationServer.issuer
        },
        domain: config.auth0Domain,
        clientID: config.clientID,
        redirectUri: config.callbackURL,
        responseType: 'code'
      }, config.internalOptions);

Recommended content

No recommended content found...