Missing state cookie from login request (yes, another one!)


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:

  1. I added a middleware function
  2. 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?


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({
}: 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 />

  if (error) {
    return (
      <Box sx={{ display: "flex" }}>
        <Typography variant="h1" gutterBottom>
        <Typography variant="body1" gutterBottom>

  if (!user && isClientSide) {
    if (Router.asPath !== 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

  1. 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?)

  2. GET https://dev-24zlwfwr3qaop7nz.uk.auth0.com/authorize?client_id=RbZMV5ttNmP5DLNy1ycXyQ9Dcv4AZxdA&scope=openid%20profile%20email&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback&nonce=pe7a5EluRHUwvwQ8qFXy1MPIXiLwt88FCfMYFHbn0D0&state=eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMCJ9&code_challenge_method=S256&code_challenge=H0EdHMXZiGkKhNMa4NcJOj82cTlMJCm_j0amGf_alwg 302

  3. GET http://localhost:3000/api/auth/callback?code=2RvjmkVcyxF_cGy43coShUOE40Mv0rURWAh3rDHtX7xIV&state=eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMCJ9 400

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 {
  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

1 Like