[DO NOT MERGE] Reproduce infinite stacking cookies

[frederikprijck]

This PR demonstrates how to reproduce #1917.

To run this, it is important to run in production mode:

• cd examples/with-shadcn
• pnpm install
• pnpm run build
• pnpm run start

Additionally, ensure to configure the .env file.

What is this reproduction doing?

• It has 3 routes: test1, test2 and test3
• All 3 routes are protected using the middleware.
• If you don't have a session, the middleware will redirect to auth/login
• redirecting to /auth/login will set a transaction cookie

This is a very basic setup, nothing weird going on here at first sight.

However ... As we are using a Link component on the homepage for these 3 routes, the following happens:

• When the page loads, Nextjs executes 3 prefetch requests. 1 for each Link in the viewport.
• This results in 3 times hitting the middleware
• This results in 3 redirects to auth/login (we don't see that in the browser, it happens under the hood)
• This results in 3 transaction cookies that will never be used.

Now refresh the page, and u have 3 more. So 6.
Now refresh the page, and u have 3 more. So 9.
...

So any page-load when not being logged in, or when the middleware tries to initiate a redirect to auth/login in your own code, will end up with n cookies, where n is the amount if Link components in the viewport that refer to a protected route.

Once you click any of the actual buttons, it will call the middleware again (as it returned a non-200 code, it will hit the middleware again), set a cookie and go to auth0 and come back. Never using, or deleting the cookies that come from the page-load.

It seems to be very unreliable in next.js to skip the middleware on prefetch here. Currently, the solution seems to be to either:

• Set prefetch to false on the Link. This way, prefetch does not happen anymore on page-load in production mode. On click, we still have an additional cookie, but it should not stack infinitely anymore.
• use <a> instead of <Link>
• or; set enableParallelTransactions to false, which has the consequence that logging in in different tabs simultaneously will result in Invalid State.
  • Open Tab 1, click Login (but don't complete logging in to Auth0)
  • Open Tab 2, click Login (but don't complete logging in to Auth0)
  • Go back to Tab 1, and complete login. You will see Invalid State on /auth/callback

Additionally, I find many references to detecting prefetching in the middleware is very unreliable, and I have not been able to get that working at all.

• Missing prefetch headers in Middleware vercel/next.js#63728
• Ability to Handle a Prefetch in Middleware vercel/next.js#37736

Even though some have a solution, it does not seem to work for me when using Next.js 15.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.90%. Comparing base (193a786) to head (a8e75a9).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2377   +/-   ##
=======================================
  Coverage   86.90%   86.90%           
=======================================
  Files          37       37           
  Lines        4070     4070           
  Branches      799      799           
=======================================
  Hits         3537     3537           
  Misses        530      530           
  Partials        3        3           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.