Cookies missing in Nextjs with app directory if set cookie in middleware

[iMuFeng]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Relevant packages:
      next: 13.4.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/iMuFeng/nextjs-app-cookie

To Reproduce

Run git clone https://github.com/iMuFeng/nextjs-app-cookie
Run cd nextjs-app-cookie && pnpm i && pnpm dev
Open http://127.0.0.1:3000/
Create a new cookie named "cookie1" manually in the console with any value (like abc), and then refresh this page.

Describe the Bug

Nextjs has a bug where the cookies from the response are parsed by nextjs/headers cookies instead of those from the request.

Expected Behavior

There should display the value of "cookie1"

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[pnodet]

@iMuFeng having the same issue, inconsistent behaviour where cookies().getAll() returns [] but cookies are correctly appearing in the chrome dev application tab.

What did you end up doing?

[iMuFeng]

@pnxdxt The issue I encountered was that Supabase added the cookie field in the HTTP response header. After removing it, I was able to retrieve other cookies.

[pnodet]

@iMuFeng Thanks! For anyone looking this up, we had this line

export const dynamic = ‘force-static’

which didn’t seem to work well with server-side cookies 😌

[shuding]

You should forward the headers from the request to the middleware response, like this:

export default async function (req) {
  const res = NextResponse.next({
    headers: req.headers,
  })

  // add cookies to `res.headers` ...

  return res
}

How Next.js middleware currently works is, if the middleware doesn't handle the request at all (e.g. it just return nothing):

The user request will be directly forwarded to the page because the middleware skips handling.

However, if the middleware accepts that request and returns a new response (e.g. return NextResponse.next()), it will be this:

Since you want the page to accept headers from the original user request, you need to pass them as init to the middleware's response constructor.

Let me know if you have other questions!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.