v4: Infinitely stacking cookies

[mvvmm]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

• v4 sdk creates a new additional transactional cookie each time the unauthenticated user navigates to the app
• v4 logout does not remove said cookies

v3 does not create infinite cookies and does remove cookies on logout.

This eventually leads to a situation where the header of the request is too large.

Reproduction

1. Be unauthenticated in your application (remove all cookies on that domain if you want)
2. Navigate to a route in your application (receive a cookie)
3. Navigate to another route in your application (receive another cookie)
4. Repeat as many times as you wish
5. Navigate to /auth/logout (receive another cookie, and cookies are not removed)

infinite.cookies.mp4

Additional context

N/A

nextjs-auth0 version

4.0

Next.js version

15.1.6

Node.js version

20.x

[tusharpandey13]

Thank you for reporting this, we are actively looking into this. We will post an update here once we have found a resolution.

[jdwitten]

We had some user reports of this in production. Sharing this hacky fix until there is a patch available. This is a snippet from our middleware function:

const reqCookieNames = req.cookies.getAll().map((cookie) => cookie.name);

const authRes = await auth0.middleware(req);
if (req.nextUrl.pathname === '/auth/login') {
    // This is a workaround for this issue: https://github.com/auth0/nextjs-auth0/issues/1917
    // The auth0 middleware sets some transaction cookies that are not deleted after the login flow completes.
    // This causes stale cookies to be used in subsequent requests and eventually causes the request header to be rejected because it is too large.
    reqCookieNames.forEach((cookie) => {
      if (cookie.startsWith('__txn')) {
        authRes.cookies.delete(cookie);
      }
    });
  }

if (req.nextUrl.pathname.startsWith('/auth')) {
    // If the request is for the auth routes, short circuit the middleware chain and return the response
    return authRes;
 }

On /auth/login it will delete any stale __txn cookies before creating a new one. Important to get the existing cookies before you apply the auth0.middleware or else you will end up deleting the __txn cookie for the current login attempt.

[vjekofalco]

We had some user reports of this in production. Sharing this hacky fix until there is a patch available. This is a snippet from our middleware function:

const reqCookieNames = req.cookies.getAll().map((cookie) => cookie.name);

const authRes = await auth0.middleware(req);
if (req.nextUrl.pathname === '/auth/login') {
    // This is a workaround for this issue: https://github.com/auth0/nextjs-auth0/issues/1917
    // The auth0 middleware sets some transaction cookies that are not deleted after the login flow completes.
    // This causes stale cookies to be used in subsequent requests and eventually causes the request header to be rejected because it is too large.
    reqCookieNames.forEach((cookie) => {
      if (cookie.startsWith('__txn')) {
        authRes.cookies.delete(cookie);
      }
    });
  }

if (req.nextUrl.pathname.startsWith('/auth')) {
    // If the request is for the auth routes, short circuit the middleware chain and return the response
    return authRes;
 }

On /auth/login it will delete any stale __txn cookies before creating a new one. Important to get the existing cookies before you apply the auth0.middleware or else you will end up deleting the __txn cookie for the current login attempt.

THX @jdwitten . We faced a same problem while handling 401 in middleware. This workaround saved us 🍺

[Strernd]

Trying to migrate von v3 to v4 and immediately encountered this problem. Only had problems with the migration and now the app is breaking for users because of this. I wished this would be treated with a higher priority.

[ross-mcnairn-dev]

Indeed - we have a migration branch and every time we deploy it we immediately start hitting 413s. We can manually wipe our cookies and things seem OK, but obviously we aren't expecting our users to do this. This is a blocking problem on the migration path, @tusharpandey13 have you folks had any luck isolating the root cause here? We can't upgrade nextJS until v4 of this SDK is working more reliably.

[cbovis]

Any more updates/info from the team or issue participants on this one? I'm currently doing a v4 migration and the reports here make me quite nervous.

I haven't been able to reproduce in our preview environment but feels like it'll be sods law that this hits customers if rolled out to production. Tempted to put in a hack to clean up transaction cookies like @jdwitten suggested to be on the safe side in lieu of an official response.

[marc-wilson]

Still an issue in 4.4.2

[tusharpandey13]

#2077 is open to address and fix this issue. Expect a release to be made shortly.

[nnnnat]

My team is experiencing this issue after upgrading to v4. We're currently on '^4.6.1' and using custom routes to keep the v3 paths of /api/auth/*.

 const auth0 = new Auth0Client({
    ...
    routes: {
      login: '/api/auth/login',
      logout: '/api/auth/logout',
      callback: '/api/auth/callback',
      backChannelLogout: '/api/auth/backchannel-logout',
    },
  })

I've added the middleware workaround outlined above but we're still seeing 431s.

// middleware.ts

  const reqCookieNames = request.cookies.getAll().map((cookie) => cookie.name)
  if (request.nextUrl.pathname === '/api/auth/login') {
    // This is a workaround for this issue: https://github.com/auth0/nextjs-auth0/issues/1917
    // The auth0 middleware sets some transaction cookies that are not deleted after the login flow completes.
    // This causes stale cookies to be used in subsequent requests and eventually causes the request header to be rejected because it is too large.
    reqCookieNames.forEach((cookie) => {
      if (cookie.startsWith('__txn')) {
        authResponse.cookies.delete(cookie)
      }
    })
  }

  // if path starts with /auth, let the auth middleware handle it
  if (
    pathname.startsWith('/auth') ||
    pathname.startsWith('/api/auth') ||
    pathname.startsWith('/v2/logout')
  ) {
    return authResponse
  }

  const session = await auth0.getSession(request)

  if (!session && pathname !== '/') {
    const { origin } = new URL(request.url)
    return NextResponse.redirect(
      `${origin}/api/auth/login?returnTo=${pathname}`
    )
  }

Maybe my middleware setup is bunk but I'm out of ideas.