Skip to content

Cookies set in middleware are unavailable on initial render #850

Closed
@dnewbound0

Description

@dnewbound0

Currently, the x-middleware-set-cookie header is being removed from the middleware response:

const filteredHeaders = [
"x-middleware-override-headers",
"x-middleware-set-cookie",
"x-middleware-next",
"x-middleware-rewrite",
// We need to drop `content-encoding` because it will be decoded
"content-encoding",
];

When reading cookies() the value of this header is merged into the existing cookies object: https://github.com/vercel/next.js/blob/f62a135d9bde6e92b9f8f50d236b5de02de74400/packages/next/src/server/async-storage/request-store.ts#L83
https://github.com/vercel/next.js/blob/f62a135d9bde6e92b9f8f50d236b5de02de74400/packages/next/src/server/async-storage/request-store.ts#L211
So removing this header breaks reading a cookie that was set by the middleware for that request, as shown here

middleware.ts:

export function middleware(request: NextRequest) {
  const response = NextResponse.next()
  response.cookies.set("foo", "bar")

  return response
}

app/page.tsx:

import { cookies } from "next/headers";

export default async function Page() {
  // On initial render, this will be undefined!
  const foo = cookies().get("foo")?.value

  return <div>{foo}</div>
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions