Next.js middleware docs show setting request cookies in place?

[ThomasBurgess2000]

Improve documentation

Link

https://supabase.com/docs/guides/auth/server-side/creating-a-client?environment=middleware

Describe the problem

In the docs for the Next.js middleware, it shows modifying the request cookies: set(name: string, value: string, options: CookieOptions) { request.cookies.set({ name, value, ...options, })

I don't think this is needed? Why would you want to modify the request cookies in place? They are not being sent back to the client.

Describe the improvement

Remove modifying the request cookies in set and remove. Modifying the request cookies within the middleware function has no lasting effect on the client's state. Only the response cookies, which are sent back to the client, can modify the client's cookies and persist changes. Therefore, the correct approach is to modify only the response cookies.

[charislam]

Hi @ThomasBurgess2000, the point of this is to make sure server components that are called downstream have the updated cookies. Otherwise they may see a stale JWT and attempt to refresh it themselves, but since the JWT has already been refreshed by the middleware, Supabase Auth will interpret this as a potentially malicious actor trying to reuse a refresh token and log the user out.

You can see that the updated request, with the new cookie header, is passed to NextResponse.next.

response = NextResponse.next({
  request: {
    headers: request.headers,
  },
})

[ThomasBurgess2000]

Interesting, what you're saying makes sense, but we actually had the opposite experience.

We copied the docs, and had an issue where the user would be logged out every hour (when the JWT expired, and a refresh was attempted).

Removing

request.cookies.set({
            name,
            value,
            ...options,
          })
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          })

leaving just

let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  });

  const supabase = createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          response.cookies.set(name, value, options);
        },
        remove(name: string, options: CookieOptions) {
          response.cookies.set(name, "", options);
        },
      },
    },
  );

fixed this for us.

But now I'm not sure why that worked.

[ThomasBurgess2000]

seems this issue might be related #22719