Next.js 환경에서 cookie 설정하기

이번에 두 개 이상의 쿠키를 설정하는 방법을 몰라서 삽질을 했습니다.

다른 분들은 저처럼 삽질하지 마시라고 기록합니다!🤣

 

우선 기본적인 쿠키 설정 방법 예시입니다.

✨ 쿠키 설정 예시

import { serialize } from "cookie";

export async function POST(res: Response) {
	...

    const ACCESS_SERIALRIZE = serialize("kakaoAccessToken", access_token, {
          httpOnly: true,
          secure: process.env.NODE_ENV === "production",
          sameSite: "strict",
          maxAge: expires_in,
          path: "/",
         });

        return NextResponse.json(
          { ok: true },
          {
            status: 200,
            headers: {
              "Set-Cookie": ACCESS_SERIALRIZE,
            },
          }
        );
}

cookie 라이브러리의 serialize 함수를 이용해 string 형식의 데이터로 만들고, 이를 header에 적용해 줍니다.

✨ 두 개 이상의 쿠키 설정하는 법

저는 access token 그리고 refresh token 을 한 번에 설정하기 위해서 두 개의 쿠키를 설정하는 방법을 찾게 되었습니다.

HTTP 쿠키 - HTTP | MDN

HTTP 응답의 기본적인 형태로 여러 쿠키를 설정하기 위해선

set-cookie 헤더를 하나 더 적던가, ; 세미콜론으로 구분해주어야 합니다만, js에서는 그냥 , 쉼표로 구분해주면 끝납니다.

import { serialize } from "cookie";

export async function POST(res: Response) {
	...

    const ACCESS_SERIALRIZE = serialize("kakaoAccessToken", access_token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "strict",
      maxAge: expires_in,
      path: "/",
    });
    
    const REFRESH_SERIALIZE = serialize("kakaoRefressToken", refresh_token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "strict",
      maxAge: refresh_token_expires_in,
      path: "/",
    });

    return NextResponse.json(
      { ok: true },
      {
        status: 200,
        headers: {
          "Set-Cookie": `${ACCESS_SERIALRIZE}, ${REFRESH_SERIALIZE}`,
					// string 형식을 쉼표로 구분한다.
        },
      }
    );

매우 간단한 방법이었지만, 한참을 해맸네요…😭