배포 시 serverSide 쿠키가 사라지는 오류

[punchdrunkard]

문제

localhost 와 다르게 배포 시, serverSide 의 쿠키가 저장되지 않아 새로 고침 시 토큰 데이터가 날아가는 문제가 있습니다.

원인 파악

원인은 react-cookies 라이브러리와 Reocil 에서 상태를 변경하는 곳의 위치 였습니다.

해결

이 라이브러리를 react-cookie 라이브러리로 변경하면 배포 시에도 쿠키가 정상적으로 애플리케이션 탭에서 확인되며,
이 쿠키 정보를 통하여 app.tsx에서 getInitialProps 를 통하여 pre-fetching 한 후,
RecoilRoot의 initialState의 set으로 해당 상태로 userAtom을 초기화 합니다.

[punchdrunkard]

요거 배포시 도메인이 달라서 그렇다는 말이 있네요.
내일 샤크와 이야기 해보겠습니다. (그래도 된다는 보장은 X)

참고자료)
https://2ham-s.tistory.com/355
https://m.post.naver.com/viewer/postView.naver?volumeNo=27355311&memberNo=10070839

[punchdrunkard]

앗 애초에 인증 방식이 달라야하는군요

[punchdrunkard]

• hotfix: 서버사이드 인증 관련 문제 해결 #301

[punchdrunkard]

• 모든 페이지에 대해서 쿠키를 조작할 때 #309

[punchdrunkard]

해당 에러의 원인은 전역 상태의 초기화가 제대로 일어나지 않아서로 밝혀졌습니다.
app.tsx에서 서버 사이드에서 내 정보를 받아온 후,
RecoilRoot의 initialState에서 직접 userAtom을 초기화하여 해결할 수 있습니다.

• hotfix: 서버사이드 인증 관련 문제 해결 #301

서버 사이드에서 서버사이드 쿠키를 이용하여 데이터 받아오기

ArtZip.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext);
  // 서버 사이드 쿠키 얻어오기
  const { ctx } = appContext;
  const allCookies = cookies(ctx);

  const accessToken = allCookies['ACCESS_TOKEN'];
  const refreshToken = allCookies['REFRESH_TOKEN'];

  let userState = SIGNOUT_USER_STATE;

  if (refreshToken && accessToken) {
    try {
      const { isAuth, data } = await authorizeFetch({
        accessToken,
        refreshToken,
        apiURL: `${process.env.NEXT_PUBLIC_API_END_POINT}api/v1/users/me/info`,
      });

      userState = isAuth ? { ...data, isLoggedIn: true } : SIGNOUT_USER_STATE;
    } catch (e) {
  // 인증되지 않은 사용자일 경우, 서버 사이드 쿠키 삭제
      ctx.res &&
        ctx.res.setHeader('Set-Cookie', [
          `ACCESS_TOKEN=deleted; Max-Age=0`,
          `REFRESH_TOKEN=deleted; Max-Age=0`,
        ]);

      userState = SIGNOUT_USER_STATE;
    }
  }
  return { ...appProps, userData: userState };
};

function ArtZip({ Component, pageProps, userData }: AppProps | any) {
  const { pathname } = useRouter();

  // Recoil 의 initialState를 set 하는 함수, 서버사이드에서 받아온 props로 set 한다.
  const initialState = ({ set }: MutableSnapshot) => {
    const { userId, email, nickname, profileImage } = userData;
    const isLoggedIn = userId !== null;
    set(userAtom, { userId, email, nickname, profileImage, isLoggedIn });
  };

// 중략

  return (
    <RecoilRoot initializeState={initialState}>
     // 중략
    </RecoilRoot>
  );
}