NextJS on Auth0 fails with "Missing state cookie from login request"

Help
,
1

I am new to Auth0 and am looking to add authentication to a NextJS application being hosted on AWS Amplify. I followed the guide here.

The issue

Everything works great locally. When running on Amplify, I get the following error:

CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).

If anyone has ideas on what I should do to debug this further, it would be greatly appreciated. I am currently out of ideas.

Context

This happens after I hit “log in,” sign in through the UI and get returned to my site.

In the logs from Amplify, before the error, I see the log, which appears to suggest the cookie is being set:

[x-amplify-log][INFO] app response status_code=302 Found headers=set-cookie: redacted (134), set-cookie: redacted (120), set-cookie: redacted (170), set-cookie: redacted (156), set-cookie: redacted (142), set-cookie: redacted (128), location: redacted (454), date: Sun, 19 Mar 2023 01:35:05 GMT, connection: keep-alive, keep-alive: redacted (9), transfer-encoding: chunked, x-amplify-internal-request-id: 48xxx

My amplify domain is “https://staging.xxx.amplifyapp.com/”, and I have a callback URL configured for “https://staging.xxx.amplifyapp.com/api/auth/callback”, so that should be correct. That is in the same format as my localhost callback, which works correctly.

Following other threads I found, I set “AUTH0_COOKIE_SAME_SITE” env var to “none” to no avail.

In Chrome dev tools, I can see that there are no cookies set when I am returned to my website.

1 Like
3

Hi @cameronlund,

The “Missing state cookie from login request” error happens because the Next.js SDK can’t find any query parameters in the callback request (/api/auth/callback). This usually occurs when middleware between the app and the browser removes these parameters. See this knowledge solution, which mentions this.

With that, I’d suggest reviewing your deployment configurations for any middleware or network components that may interfere with the callback URL’s state parameter. Specifically, make sure to preserve the state parameter in the query string of the callback URL (e.g., /api/auth/callback?state=XXXXX).

Here’s what you can do:

  1. Review Middleware Configurations: Check for any reverse proxies, load balancers, or security tools in your deployment setup that might strip off URL parameters.
  2. Inspect Cookie Configurations: Ensure that cookies are correctly set and sent during the authentication process. Misconfigurations here could prevent the state cookie from being present. You might need to add the AUTH0_TRANSACTION_COOKIE_SAME_SITE=none in the auth0-config.
  3. Verify Callback URLs: Double-check that the login URL, callback URL, and cookie configurations are set correctly in your Auth0 and Next.js settings.

References:

Thanks,
Rueben

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.