Set multiple cookies on API routes (Pages Router)

[nicolascavallin]

Link to the code that reproduces this issue

https://github.com/nicolascavallin/next-pages-firebase-auth-boilerplate/blob/main/src/pages/api/auth/session.ts

To Reproduce

## In API handler (Pages Router)

• Set two cookies with res.setHeader("Set-Cookie": [cookie1, cookie2])

• Then: if you are running local (pnpm dev and pnpm build + pnpm start), both cookies will be settled.

• Deploy to Vercel: call the same API, only first cookie will be settled.

If changes the order of cookies, then again, first will be settled (in Vercel).

In API route (App Router)

• Set two cookies with cookies()

• Then: both cookies are settled in Vercel and in Local.

Current vs. Expected behavior

I expect to settled both cookies on Pages Router API.

Current (Vercel)

Current (Local with HTTPS)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.12.1
Relevant Packages:
  next: 14.1.4
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, Middleware / Edge (API routes, runtime)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

I suspect a lot of things and play with all properties: httpOnly, secure, sameSite, priority.

Also, suspecting a "big size" of data, I just try to set simple cookies like: foo1=bar1 and foo2=bar2.

Always getting the same result, only first cookie settled.

Also I tried

res.setHeader("Set-Cookie": cookie1)
res.setHeader("Set-Cookie": cookie2)

res.setHeader("Set-Cookie": `${cookie1}; ${cookie2}`)

And of course

res.setHeader("Set-Cookie": [cookie1, cookie2])

And nothing.

I tried to get help from cookies-next library... nothing.

I didn't found any solution and any similar issue, so I'm opening this one.

Thanks in advance.

[nicolascavallin]

To bring more context:

I also tried with res.appendHeader

[therealgabryx]

appendHeader worked for me until yesterday, when we upgraded from "next": "^14.1.0" to "next": "^14.2.1".

I was successfully settings headers after login in a trpc. controller, by calling:

ctx.res.appendHeader("Set-Cookie", cookie_name1);
ctx.res.appendHeader("Set-Cookie", cookie_name2);

Since the update tho, the api stopped working and returning a 500 error, caused by the following:
Property 'appendHeader' does not exist on type 'NextApiResponse'.ts(2339)

This happened after upgrading the next package and simultaneously moving from npm to pnpm.

[therealgabryx]

Edit: upgrading to "next": "^14.2.2" (released 9hrs ago), fixed the typescript error on 'appendHeader'. The api error 500 still persists tho.

[nicolascavallin]

@therealgabryx

Does it happens on local or in prod? Everything works for me in local, with pnpm, the issue is after deploy in Vercel