cookies written in middleware not being seen on following page

[textual]

Summary

im trying to write session and refresh tokens to cookies in middleware, then redirect to another page. the redirect works, and the cookies are present in the application, but my session does not see them. i need to refresh the page for the cookies to take effect. I've tried a few variations of writing the cookie, forcing the cookie into the header, getting the new cookie directly from the request in middleware. but it appears that writing a cookie within middleware and trying to use it in the next page in middleware isn't working.

Additional information

sample from middleware logic

if (pathname.startsWith("/verify")) {
    const params = pathname.split("/");
    const type = params[2];
    const id = params[3];
    const token = params[4];

    const new_tokens = await attemptLoginLink({ id, token });
    // return await attemptLoginLink({ id, token, type, origin });
    console.log("mw - new_tokens", new_tokens);
    if (new_tokens) {
      const response = NextResponse.redirect(
        new URL(
          type === "password"
            ? CHANGE_PASSWORD_URL
            : EMAIL_REGISTRATION_SUCCESS_URL,
          request.url
        )
      );
      response.cookies.set({
        name: "session",
        value: new_tokens.accessToken,
        httpOnly: true,
        sameSite: "strict",
        maxAge: jwtExpiryTime / 1000,
      });

      response.cookies.set({
        name: "refresh",
        value: new_tokens.refreshToken,
        httpOnly: true,
        sameSite: "strict",
        maxAge: refreshExpirytime / 1000,
      });

      // applySetCookie(request, response);
      return response; // redirects as expected, and cookies are present in chrome/dev tools application
    }
  }

  const user = await getSession(); // attempts to get cookies from next/cookies but they are not visible
  console.log("middle ware user", user);

Example

No response

[icyJoseph]

Hi,

You are writing the cookie to the outgoing response, but the incoming request does not have it.

For incoming requests, cookies comes with the following methods: get, getAll, set, and delete cookies. You can check for the existence of a cookie with has or remove all cookies with clear.

So, you have to set it to the incoming request. Try for example:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

type Cookie = Parameters<
  ReturnType<typeof NextResponse.next>["cookies"]["set"]
>[0];

export function middleware(request: NextRequest) {
  const cookie = { name: "vercel", value: "fast", path: "/" } satisfies Cookie;
  request.cookies.set(cookie.name, cookie.value);

  const response = NextResponse.next(request.clone());
  response.cookies.set(cookie);

  return response;
}

[textual]

I'm not sure if the docs clearly call out how to get cookies while in middleware, it looks as though you always use
import { cookies } from 'next/headers'
this approach works everywhere EXCEPT for when I redirect to a new page AND also set the cookies. If I refresh the page, the cookies are visible again in the middleware.

[icyJoseph]

In the Middleware section of the docs, the cookies function is never mentioned. Regardless, does that fix the issue though?

[textual]

the desired behavior is to intercept the verify page, set a cookie and redirect to an action page as an authenticated user. this works locally and in staging, but not production. the workaround is to set the cookie but not redirect in middleware, check for the user on my verify page and redirect from there. its more of a compromise than a fix

[icyJoseph]

Could you try with same-site policy, set to lax? IIRC, over Chrome had some quirky behavior with redirects and cookies. Does it work with other browsers?

[textual]

Yes, the redirect from middleware worked in firefox, so I changed the session cookie to lax and now it works in chrome as well. thank you and marking your last response as answer