Description
I’m seeing this error come up LOTS in the forums and online recently. It’d be great if Auth0 engineers, etc. could explain what causes it. For me it just started happening one day and there are 2 things I did which could cause it:
- I added a middleware function
- I did a manual reset of the application (storage, cookies, etc.)
IDK if these are the things that threw the app out of sync state-wise?
Setup
I’m using:
Node version: 16, 18 or 20 and "@auth0/nextjs-auth0": "^3.1.0",
In api/auth/[...auth0].js I have:
import { handleAuth } from "@auth0/nextjs-auth0";
const auth = handleAuth();
export default auth;
I’m using a AuthRedirectWrapper from the docs.
import { useState, useRef } from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
import Router from "next/router";
import CircularProgress from "@mui/material/CircularProgress";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
type AuthRedirectWrapperProps = {
children: React.ReactNode;
};
export default function AuthRedirectWrapper({
children,
}: AuthRedirectWrapperProps): JSX.Element | null {
const isServerSide = typeof window === "undefined";
const isClientSide = !isServerSide;
const loginPath = "/api/auth/login";
const { user, error, isLoading } = useUser();
if (isLoading) {
// console.log("loading case");
return (
<Box sx={{ display: "grid", height: '100vh', placeContent: 'center' }}>
<CircularProgress />
</Box>
);
}
if (error) {
return (
<Box sx={{ display: "flex" }}>
<Typography variant="h1" gutterBottom>
Error
</Typography>
<Typography variant="body1" gutterBottom>
{JSON.stringify(error)}
</Typography>
</Box>
);
}
if (!user && isClientSide) {
if (Router.asPath !== loginPath) {
Router.push(loginPath);
}
return null;
}
// console.log("rendering normally");
return <>{children}</>;
}
I’m also using a middleware that looks like this:
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
// Clone the request headers and set a new header `x-hello-from-middleware1`
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-hello-from-middleware1", "hello");
// You can also set request headers in NextResponse.rewrite
const response = NextResponse.next({
request: {
// New request headers
headers: requestHeaders,
},
});
// console.log("called james route");
// Set a new response header `x-hello-from-middleware2`
response.headers.set("x-hello-from-middleware2", "hello");
return response;
}
export const config = {
matcher: '/courses/:course/:tutor*',
}
Call sequence
-
GET http://localhost:3000/api/auth/login 302 (there is a first one of these that gets cancelled - I think that may be due to being on the development server and getting the double load?)
Result (in Server Logs)
CallbackHandlerError: Callback handler failed. CAUSE: Missing state cookie from login request (check login URL, callback URL and cookie config).
at /Users/jamessherry/sites/new-jump/student-portal-next-sanity/node_modules/.pnpm/@auth0+nextjs-auth0@3.1.0_next@13.4.16/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:74:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async /Users/jamessherry/sites/new-jump/student-portal-next-sanity/node_modules/.pnpm/@auth0+nextjs-auth0@3.1.0_next@13.4.16/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 /Users/jamessherry/sites/new-jump/student-portal-next-sanity/node_modules/.pnpm/@auth0+nextjs-auth0@3.1.0_next@13.4.16/node_modules/@auth0/nextjs-auth0/dist/auth0-session/handlers/callback.js:17:19
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async /Users/jamessherry/sites/new-jump/student-portal-next-sanity/node_modules/.pnpm/@auth0+nextjs-auth0@3.1.0_next@13.4.16/node_modules/@auth0/nextjs-auth0/dist/handlers/callback.js:71:16
at async /Users/jamessherry/sites/new-jump/student-portal-next-sanity/node_modules/.pnpm/@auth0+nextjs-auth0@3.1.0_next@13.4.16/node_modules/@auth0/nextjs-auth0/dist/handlers/auth.js:79:13 {
status: 400,
statusCode: 400
},
status: 400
}
Any help GREATLY appreciated!!
EDIT: Just to note that this is what happens locally. The code works remotely (for the moment)
FURTHER EDIT: No state cookie is ever set. state does appear as a URL parameter though