State Cookie Not Generated Post Login (Nextjs)

2 days ago all of my applications decided to start failing on /api/auth/callback. Some applications I haven’t touched in months (no new releases), others I am actively working on. Works fine locally but not on any deployed versions in Vercel.

High level setup:
@auth0/nextjs-auth0”: “^3.5.0”,
“next”: “^13.5.1”, //confirmed in vercel during build as: 13.5.6
Using single page application client type in auth0.

API usage:

// /src/app/pages/api/auth/[auth0].js
import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";

export default handleAuth({
  signup: handleLogin({
    authorizationParams: {
      screen_hint: "signUp",
    },
  }),
  login: handleLogin({ returnTo: "/"})
});

Usage on client:

import "@/styles/globals.css";
import { UserProvider } from "@auth0/nextjs-auth0/client";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
      <UserProvider>
        <Component {...pageProps} />
      </UserProvider>
  );
}

Using withPageAuthRequired and useUser from “@auth0/nextjs-auth0/client” for any guarded pages.

Call sequence (steps to reproduce):
GET https://dev.mydomain.com/api/auth/login?returnTo=%2F - 302 Found
GET
https://xxx-dev.us.auth0.com/authorize?client_id=KUJeJap8F0xrdWtohg7YkenpgDLTczPX&scope=openid%20profile%20email&response_type=code&redirect_uri=https%3A%2F%2Fdev.mydomain.com%2Fapi%2Fauth%2Fcallback&nonce=ZnRt0pQZRbaJAtNdwONeVcyfaGVJjjyKsOeqVrnYqfQ&state=eyJyZXR1cm5UbyI6Imh0dHBzOi8vZGV2Lmx1dnZseWRhdGluZy5jb20vIn0&code_challenge_method=S256&code_challenge=4Ryq9NkROLGNMWdbeYUyNtXwET9vQmSQJ34DAOxt5lE - 302 Found

GET
https://dev.mydomain.com/api/auth/callback?code=FkHfYZzCwp9snoz3ztcOGRx6Aoh1D1GV2WyAKOv7CzEeJ&state=eyJyZXR1cm5UbyI6Imh0dHBzOi8vZGV2Lmx1dnZseWRhdGluZy5jb20vIn0 - 400 Bad Request

Actual Behavior:
GET /api/auth/callback 400

Produces this server log:

CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
    at /var/task/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:78:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /var/task/node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:79:13 {
  code: 'ERR_CALLBACK_HANDLER_FAILURE',
  cause: MissingStateCookieError: Missing state cookie from login request (check login URL, callback URL and cookie config).
      at /var/task/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:20:19
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async /var/task/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:75:16
      at async /var/task/node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:79:13 {
    status: 400,
    statusCode: 400
  },
  status: 400
}

Checking cookies in chrome dev tools - no cookies exist.

Expected behavior (localhost version works correctly):
GET http://localhost:3000/api/auth/callback?code=meXKppbPAVJN5aqBkl6hIBU6rgLBMDPj5Nw9qpcWnBTH8&state=eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC8ifQ - 302 Found

Cookie exists in chrome dev tools appSession:<the cookie>

What I’ve tried to isolate the issue:

  • Removed all post login actions in auth0 flows
  • Upgrade nodejs version as suggested in this article: Missing state cookie from login request (yes, another one!) - v18.18.2 to v20.10.0 - configured in Vercel application settings to do this.
  • Multiple browsers, incognito window, cleared cache (storage and cookies), upgraded chrome
  • Cleared build cache in vercel, redeployed.
  • Dev server v. Built server - I was able to reproduce it once but haven’t been able to since. The steps are npm run build then npm run start instead of npm run dev
  • Dev server (npm run dev) works locally just fine
  • Tried using regular web application type in auth0 instead of single page application type for client
  • Review the quick start instructions
  • Removed and re-added env vars for auth0, verified env vars updated correctly on deployment
  • Tried the universal login page instead of the custom login html/js i was using under the branding section in auth0
  • Tried both google login and username/password login
  • Tried fixing the package versions for both next and @auth0/nextjs-auth0; Also tried other versions as well.
  • Local node version: v21.5.0, npm version: 10.2.4
  • Reviewed change logs for Auth0 and Vercel and associated npm packages
  • Reviewed monitoring in Auth0 - says user was logged in successfully
  • Tried a new project in Vercel
    [updates]:
  • Dockerizing the app seems to work but unfortunately won’t be able to use Vercel as planned and will require switching infrastructure and not confident without knowing root cause
  • In another post someone suggested setting AUTH0_TRANSACTION_COOKIE_SAME_SITE=none this seems to be for only http which won’t work for my production app. I didn’t get to test this as all my apps began to start working out of no where this morning (date/time: 1705947235145): references: Cypress login on page with withPageAuthRequired fails with "Missing state cookie from login request" error · Issue #1392 · auth0/nextjs-auth0 · GitHub, Missing state cookie from login request (yes, another one!) - #8 by juanzuluagag
  • Reviewed changelogs for auth0, vercel, nextjs, nextjs-auth0 to see if something changed overnight - no changes found

Any ideas would be greatly appreciated. I’ll continue to update this as I find more information.

2 Likes

HI, We are facing the same issue, its working fine on local but not in production, can’t fetch cookies in production, did u find any solution if yes please share with us, it would be really helpful, Thank you

I did not find root cause or solution. It just started working again for no specific reason. Sorry, I wish i had a better answer for you. It scares me that this may happen again in the future and cause downtime for my customers.

Hey, I am also encountering this issue. Did you ever find the solution?

We experience same problem problem on our staging tenant.
We are paying customer (paid plan) on the prod tenant, can we get some support from Auth0, please?

Same update I posted on March 11 - no solution found

I would reach out via your account to contact Auth0 support if you are actively having issues with your paid account. This is a community thread and Auth0 support isn’t present here. Let us know if you find any solution. Thanks!

I had a first call with the Auth0 support this afternoon. In our case it is the staging Auth0 tenant that doesn’t play ball with our NextJs App Staging environment (Vercel). Localdev works fine with the Auth0 staging tenant.

Auth0 support is still working on this, I provided them HAR files to investigate and possibly ask around the engineering team. I will track the status of the ticket, and I will let everyone know how what the resolution is. Thanks

Thanks for the update and please do! Best of luck!

I had a second call earlier with Auth0 support, at a second glance we found one one more thing related to the network call succession:

  • GET authorize/resume?state=somestate
  • GET/api/auth/callback?code=someCode&state=somestate

On the second call Vercel responds with Set-Cookie: state=; Max-Age=0; Path=/
The same “callback” API call returns 200 on localdev(localhost), and there is no Set-Cookie on the response.

I’m observing the same behaviour in our app. An instance of our app, that’s loaded in an iFrame in a different 3p-app fails with the same error:

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

Inspecting my browser tools, I see the Set-Cookie differs in the development environment, and when run in an iFrame context.

The difference is that
Screenshot 2024-04-16 at 2.45.17 PM

this error comes up implying SameSite needs to be configured in particular way. Though, my origins go across http and https, which seems to be in contention with setting SameSite = none

Haven’t noticed this behaviour before…

Don’t know if this is your exact issue, but I was running into similar behaviour with NextJS/Vercel/nextjs-auth0 , and setting the env var AUTH0_SESSION_STORE_ID_TOKEN to false in my Vercel project settings fixed it for me.

I found this suggestion from this thread: getSession() on API route returns null when also using getSession() in middleware on Vercel · Issue #1085 · auth0/nextjs-auth0 · GitHub

1 Like

Weirdly enough, the login flow started working out of a sudden yesterday, without any changes to our Auth0 tenant config, Vercel setting, same Nextjs app deployment (version).

"@auth0/nextjs-auth0": "^2.6.3",
 "next": "^14.1.4",

Hi, I am also experiencing this issue. On a project that that has been running and working for over a year deployed on vercel. Up until yesterday the login flow using auth0 has been working seamlessly, but i now get this exact error described here. No changes to the code were made, and local is still working. If a solution is ever found i would love to know the details

1 Like

Same issue here…
Next 13.4.0 / nextjs-auth0 2.7.0

The issue is not always present, is intermittent, and different browsers… So difficult to debug…