State Mismatch issue with custom login screen and Auth0-js and NextJS

Help
1

Please include the following information in your post:

  • Which SDK this is regarding: nextjs-auth0
  • SDK Version: 1.9.1
  • Platform Version:
  • Code Snippets/Error Messages/Supporting Details/Screenshots:

Her there - I’m attempting to wire up my app useing nextjs-auth0 SDK, and a custom universal login page that utilizes the auth0-js api to handle login etc. However, I am getting a state mismatch error when attempting to login, I believe because on the custom login page the state parameter is set in a query param and nextjs-auth0 expect its on the cookie. Is there a way to resolve this?

2

Figured it out! in my app, I was using initAuth0 with an audience and scope


  return initAuth0({
    baseURL: '...',
    issuerBaseURL: '...',
    secret: '...',
    clientID: '...',
    clientSecret: '...',
    routes: {
      callback: '/api/auth/callback',
      postLogoutRedirect: 'http://localhost:3000',
    },
    authorizationParams: {
      audience: ...,
      response_type: 'code',
      scope: 'openid profile email',
    },
  });

But in my hosted custom login screen in auth0, i was also initializing the WebAuth class with an audience and scope:

const webAuth = new WebAuth({
    overrides: {
      __tenant: config.auth0Tenant || tenant,
      __token_issuer: config.authorizationServer.issuer || serverIssuer,
    },
    domain: config.auth0Domain,
    clientID: config.clientID,
    audience: config.audience,
    scope: config.scope,
    redirectUri: config.callbackURL,
    responseType: 'code',
    ...config.internalOptions,
  });

Removing the audience and scope from the new WebAuth class successfully sent along the correct state back to my app

1 Like
3

Thanks for sharing that with the rest of community!