nextjs-auth0 doesn't work with auth0 lock

[lone-cloud]

Description

I've been trying to get these two libraries to work together, but it seems that redirecting to a callback handler provided by this library, from a successful auth0 lock request, doesn't work correctly.

Reproduction

Create a auth0 lock like:

new Auth0Lock(config.clientId, config.domain, {
    auth: {
      params: {
        scope: config.scope,
      },
      redirectUrl: config.redirectUri, // this is the URI to the callback API that runs handleCallback()
    },
  });

After a success login, the handleCallback() code dies on https://github.com/auth0/nextjs-auth0/blob/master/src/handlers/callback.ts#L41 It appears to be happening because the authorization endpoint that auth0 lock uses doesn't set the a0:state cookie that nextjs-auth0 requires. Would it make sense for this library to generate a new state, and set it to a cookie, if none was found? @sandrinodimattia I would really appreciate your feedback here.

Environment

• Version of this library used: "@auth0/nextjs-auth0": "^0.15.0",
• Other modules/plugins/libraries that might be involved: "auth0-lock": "^11.25.0",

[rynomad]

This probably isn't a full fix for you, but after running into a similar problem, I found that lock was generating a cookie with state that included TWO values, only one of which was represented in the query string to 'api/callback'.

I have been able to bypass the state mismatch by modifying the 'api/callback' route with some monkeypatching of req.url to assign the other state value into the request url.

This isn't exactly your issue, but hopefully this gives you a lead to solve your problem.

Good luck!

[jordie23]

@rynomad Do you have an example of the changes you did to get it to work?

[jordie23]

@sandrinodimattia Would be good to be able to use auht0 lock v11 to login/sign up using the popup mode and have the session available to nextjs for server side operations and verification. Is this possible do you think?

[lone-cloud]

I believe the issue that I was running into here (and a few other places as @rynomad pointed out) is that auth0 may return the state in a query param rather than in a cookie like this lib expects. As such, you have to patch the next.js request before passing it to handleCallback.

function patchReqForCallback(req: NextApiRequest): NextApiRequest {
  const { state } = req.query;

  if (typeof state === 'string') {
    req.cookies['a0:state'] = state;
  }

  return req;
}

then

await handleCallback(patchReqForCallback(req), res);

[jordie23]

Super helpful @lone-cloud , Thank you!

[Widcket]

Closing as the issue as resolved.

[Widcket]

Hi @jordie23, what is your use case for using this library together with Lock? As they're meant to be mutually exclusive.

[jordie23]

@Widcket

Goal is to be able to run code based on user information server side (nextjs-auth0 allows this), but also allow users to login to the site seamlessly using an overlay (Lock allows this) rather than redirecting them to another page or using another window/tab popup (only options afaik with nextjs-auth0).

[Widcket]

cc @adamjmcgrath

[adamjmcgrath]

Hi @jordie23 - This SDK is only designed to be used with the Universal Login Page, we don't have any plans to make it work with embedded login I'm afraid. If you want to use embedded login, you'll need to find another session solution for the server side

[javonclarke]

@adamjmcgrath How would that work for paid users that would like to create custom user onboarding flows? I get that cross-origin authentication isn't recommended, but for paid users we'll be able to setup custom domains and that should solve that issue.