authMiddleware() corrupts response cookies, only emits first one in local dev

Thinkscape commented 1 year ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerkinc/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://github.com/roev-co/clerk-corrupting-cookies

Publishable key

pk_test_c3VwZXJiLWdob3VsLTEzLmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce

Given middleware.ts with authMiddleware() using afterAuth callback
Use response.cookies.set() to set 2 or more cookies
Start local next dev
Open the page, running the middleware.

Expected behavior:

Cookies get set. Cookies parameters are set.

Actual behavior:

Only the first cookie gets set. Parameters like sameSite and secure get ignored and not being sent to the browser.

Background

Only happens in local dev. Tested with older 13.4 and latest canary branches of next.
Here's a vercel deployment where you can see it working correctly
Only happens when using authMiddleware() - works fine with vanila Next.js middleware function

Repro app

Check out https://github.com/roev-co/clerk-corrupting-cookies
Put creds in .env.local
npm install
Run next dev
Open http://localhost:3000
You should be seeing cookies first second third, but it will only show first

Environment

System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.58 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.3.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 118.0.5993.70
    Safari: 16.6
  npmPackages:
    @clerk/nextjs: ^4.21.8 => 4.21.8
    @types/node: 20.1.4 => 20.1.4
    @types/react: 18.2.6 => 18.2.6
    @types/react-dom: 18.2.4 => 18.2.4
    autoprefixer: 10.4.14 => 10.4.14
    classnames: ^2.3.2 => 2.3.2
    next: 13.4.2 => 13.4.2
    postcss: 8.4.23 => 8.4.23
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    tailwindcss: 3.3.2 => 3.3.2
    typescript: 5.0.4 => 5.0.4

LekoArts commented 1 year ago

Hi,

thanks for the issue and the excellent reproduction. This is much appreciated! Cloning your project and running it I see the same behavior.

I'll see what I can find out what the culprit is 👍

LekoArts commented 1 year ago

I found the culprit: https://github.com/clerk/javascript/blob/0551488fb67fc6ec117e8d19796094c4601013d2/packages/nextjs/src/utils/response.ts#L11

In this line the cookies get removed:

CleanShot 2023-11-30 at 14 21 11

LekoArts commented 12 months ago

The PR fixing this issue is merged, I'll let you know once it's released.

LekoArts commented 11 months ago

This has been fixed in @clerk/nextjs@4.27.4

clerk / javascript