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 buildthennpm run startinstead ofnpm 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.
