refactor: apply vercel domain

설명

[x] 배포 환경에서 브라우저 새로 고침 시 로그인이 풀리는 문제를 해결합니다.
[x] 로컬 환경에서 로그아웃을 해도 제대로 처리되지 않는 문제가 발생합니다.

문제 상황 설명 및 해결 방법

1. 브라우저 새로 고침 시 로그인이 풀리는 문제

현재 JWT를 이용하여 인증을 하고 있습니다. 최대한 토큰 탈취를 어렵게 하기 위해 accessToken은 메모리에, refreshToken은 cookie를 통해 저장하고 있습니다.

새로고침을 하게 되면, _app에 있는 getInitialProps 메소드에서 request를 뽑아낼 수 있습니다. request에 refreshToken 쿠키가 있다면, 해당 내용을 백엔드 서버로 보내 유효성을 검증한 후 새로운 accessToken을 발급받는 방식을 적용 중이었습니다.

문제는 로그인을 성공적으로 하더라도 cookie가 설정되지 않는 것입니다.

현재 url은 다음과 같습니다.

프론트엔드	백엔드
staging-mobae.vercel.app	staging-mobae.xyz

서로 다른 도메인에서 쿠키를 공유하기 위해 domain / sameSite / secure 옵션 등을 적용해보았지만 효과는 없었습니다.

문제를 해결한 방법은 결국 subdomain을 만들고, 최상위 도메인을 같게 하여 쿠키를 전달하는 방식을 선택했습니다.

바뀐 url	프론트엔드	백엔드
staging-mobae.xyz	api.staging-mobae.xyz

2. 로그아웃이 제대로 되지 않는 문제

로컬에서도 간헐적으로 로그아웃이 제대로 되지 않는 문제가 발생했습니다. 로그아웃을 하면 cookie에서 refreshToken 항목이 사라지게 됩니다. 브라우저 상에서는 사라지는 것이 보였지만, 왜인지 백엔드에서는 계속 refreshToken이 전달되고 있었습니다.

request에 refreshToken이 없음에도 불구하고 전달되는 것을 보면 캐시 쪽에 문제가 있을 것이라 판단했습니다. 따라서 현재 비동기처리를 위해 사용하는 react-query의 데이터를 살펴봐도 별 이상이 없었습니다.

알고보니 다음 코드에서 문제가 있었습니다.

export const silentLogin = async (
  cookie: string | undefined,
): Promise<null | ILoginResponse> => {
  // 아래의 조건문
  if (cookie) {
    axios.defaults.headers.Cookie = cookie;
  }

  try {
    const { data } = await axios.get("/auth/validate-token", {
      withCredentials: true,
    });
    return data;
  } catch (e: unknown) {
    if (e instanceof AxiosError && e.response?.status === 401) {
      /* eslint-disable no-console */
      console.error("Token is not validated");
    }
    return null;
  }
};

  if (cookie) {
    axios.defaults.headers.Cookie = cookie;
  }

위의 조건문에서 쿠키가 있으면 axios 헤더에 cookie를 등록하고, 쿠키가 없는 경우는 해당 과정을 지나치게 됩니다. 문제는 서버 사이드에서 사용되는 코드라, 브라우저에서 새로고침을 하더라도 axios의 헤더 데이터가 날아가지 않는다는 문제점이 있었습니다.

그래서, 로그아웃을 통해 브라우저의 refreshToken 쿠키를 삭제하더라도 기존에 axios 객체에 남아있던 데이터로 요청을 하니 백엔드에서는 refreshToken이 있다고 간주한 것입니다.

위 조건문을 제거하고 null 병합 연산자를 사용하여 문제를 해결하였습니다.

axios.defaults.headers.Cookie = cookie ?? "";

inkyu0103 / badminton-app