Next.js - SSR Cookie Setting

JWT 방식과 NextAuth 라이브러리를 활용한 로그인 기능을 개발하면서 Cookie를 통해 Refresh Token을 재발급해 로그인을 하는 기능을 구현하는 과정에서 Cookie가 브라우저에 제대로 박히기 않는 문제가 발생했다.

문제😳

1. Server-Side로 로그인 API 호출 -> Repsonse 값으로 Access Token 값과 Cookie에 Refresh Token을 브라우저에 삽입.

2. Response Header에 Refresh Token의 Cookie 값이 정상적으로 들어온 것을 확인.

3. 하지만 실제 브라우저에는 Cookie가 Setting되지 않는 문제가 발생.

4. 혹시 몰라 Client-Side에서 로그인 API를 호출 -> Cookie에 Refresh Token이 정상적으로 브라우저에 Setting이 되었음.

 

해결😃

Next.js에서는 API를 통해 전달받은 Cookie를 직접 브라우저에 Setting하는 과정이 필요하다. 생각해보면 클라이언트측에서 직접 API를 호출받은 Response Header의 Cookie를 직접 받는 곳은 브라우저고 Server 쪽에서 받는 Response Header는 Next.js의 서버쪽에서 호출되기 때문에 받는 브라우저가 없기 때문에 브라우저 까지는 직접 전달하지는 않는 것 같다.

 

Cookie를 활용할 수 있는 각종 라이브러리들도 많지만 순수 Next.js에서 제공하는 Response로도 충분히 Cookie를 Setting하는데 무리는 없다.

const resCookie = apiResponse.headers["set-cookie"] as string[];
response.setHeader("Set-Cookie", resCookie);

개발 환경에 따라 다르겠지만 위 예제는 로그인 API 통해 전달받은 response header 안에 있는 set-cookie의 값을 불러오고 “response: NextApiResponse”로 setHeader 메서드를 통해 직접 받은 쿠키값을 브라우저에 세팅했다.

 

하지만 브라우저에는 쿠키값을 Setting하는데는 문제가 없었지만 Refresh Token을 발급받기 위해 Client 쪽에서 API를 호출할 때는 전달받는 서버에서 브라우저에서 호출 된 Request 값에 Cookie 값이 들어가있지 않은 상태로 전달되는 문제가 발생되었기 때문에 실제 Client에서 호출 할 때 한번 더 Header에 Cookie 값을 직접 넣어서 호출해 해결하였다.

const getRefreshToken: (cookie: any) => Promise<AxiosResponse> = (cookie) => {
	return instance.post("/refresh", null, {
		headers: {
			Cookie: `refreshToken=${cookie.refreshToken}`,
		},
	});
};

위 예제는 cookie를 Server-Side에서 API를 호출했기 때문에 cookie라는 매개변수를 직접 넘겨줘서 넘겨준 cookie의 값을 post 방식으로 호출할 때 header에 Cookie 값에 refreshToken이라는 값을 넣어서 직접 호출하도록 했다.

 

Server-Side 측에서는 API를 통해 Cookie를 활용할 때는 직접 브라우저에 Setting을 해줘야한다는 것을 모르고 도저히 왜 안될까 정말 고민을 많이 해봤고 상당한 시간이 걸려서 알게된 사실이라 정말 고생을 했다.