초안

창업을 준비하는 과정에서 프론트, 백 모두 개발하고 있다.
프론트는 Next.js
백은 Nest.js 로 개발 중이다.

현상

내가 구현하려고 하는 것은 유저 정보를 SSR로 불러오는 것으로 페이지를 로드할 때, 헤더에 있는 유저의 정보를 useEffect로 부를 시에, CSR로 동작되는 것이 싫었다!

헤더에 유저의 이름과 같은 정보가 들어가게 되는데, ux의 입장에서 봤을 때 CSR로 구현하면 이게 잠깐 비었다가 들어가게 되어서... 그게 너무 싫었다.

아무튼 로컬에서 로그인을 구현하고 테스트도 마친 후,
프론트는 vercel, 백은 aws ec2에 배포 후, 테스트를 진행했는데...

// 백에서 res로 쿠키를 넣어줌
    res.cookie('access_token', access_token);
    res.cookie('refresh_token', refresh_token);
    

백에서 이렇게 넣어준 쿠키가 브라우저의 application의 cookies에 보이는 상황이지만,
Next.js의 SSR에서의 context에서는 꺼내서 사용할 수 없었다!

export const fetchUserData = async (context: GetServerSidePropsContext) => {

  // 쿠키가 없거나 토큰이 없는 경우 null 반환
  const { cookie } = context.req.headers;
  console.log('cookie', cookie)

그리고 쿠키를 콘솔에 찍어보고 vercel의 로그를 확인해보면...

예...? 누구세요?

내가 넣지도 않은 _vercel_jwt 쿠키만 얻을 수 있었다. 흠...?

해결법

정말 많은 서칭의 결과 쿠키를 넣어주고 있는 nest.js 쪽에서

res.cookie('refresh_token', refresh_token, {
      httpOnly: true,
      sameSite: 'none',
      secure: true,
      domain: '.example.com',
    });

다음과 같은 코드를 추가하니 정상적으로 동작했다!
(참고: https://docs.nestjs.com/techniques/cookies)

각 옵션을 하나씩 살펴보자면,

• domain
  쿠키에 접근할 수 있는 도메인을 설정한다. 예시로, 현재 사용하고 있는 도메인이 example.com, 서버의 도메인은 api.example.com 이라면, 루트 도메인 값인 .example.com 으로 설정했다.
  이렇게 하면, example.com 및 그 하위 도메인에서 해당 쿠키를 사용할 수 있게 된다.

• secure
  Secure 옵션이 활성화되면, 쿠키는 HTTPS를 통해서만 전송된다.

• sameSite
  sameSite에는 주로 Strict, Lax, None 이렇게 3가지 값이 사용되는데,
  Strict로 설정할 경우 오직 동일한 도메인에서 발생한 요청에 대해서만 전송된다.
  이 설정은 쿠키가 현재 웹사이트의 요청에서만 사용되어야 할 때 유용합니다.

  Lax의 경우 탑 레벨 네비게이션에서 다른 도메인으로의 GET 요청에 대해서는 전송될 수 있다. 예를 들어, 사용자가 다른 사이트의 링크를 클릭하여 현재 사이트로 이동할 때 쿠키가 전송된다.

  None으로 설정할 경우 쿠키는 모든 크로스 사이트의 요청에서 전송된다.

• httpOnly
  이 옵션이 true인 경우 쿠키는 HTTP(S)를 통해서만 접근 가능하고, JavaScript를 통해서는 접근할 수 없다.

  XSS(Cross-Site Scripting) 공격으로부터 쿠키를 보호하기 위해 사용되고, 악의적인 스크립트가 사용자의 쿠키를 읽거나 변경하는 것을 방지할 수 있다.