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.

1 Like