403 Invalid state error from custom login page

FAQs
, , , ,
1

Problem statement

We use the WebAuth object for operations (Auth0.js) and receive the “403 Invalid state” error when trying to log into the custom login page.

Symptoms

The state value passed to POST /usernamepassword/login does not match the state value generated at GET /login (e.g. hkF…).

Troubleshooting

Review the custom login page scripts and confirm the config option is being properly parsed and that the proper values are assigned to properties of the params object that’s passed to the login methods, including config.internalOptions.

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 is included in the params object like so:

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);
2