Login 문제 해결

문제

구글 로그인을 시도하면, 바로 로그인 상태로 적용되는 것이 아니라 새로고침 후에 로그인 상태가 적용되는 문제가 발생했다.

원인 파악하기

Global Navigation은 store의 user 데이터 여부로 로그인 상태를 관리한다. user 데이터는 App을 렌더링할 때, 초기화 함수를 통해 user 정보를 서버로부터 요청한다.

이 때, 구글 로그인 후 유저 정보를 요청할 때, 토큰 값이 undefined로 할당되어 요청되었다.

로컬 스토리지에 저장된 토큰 값을 확인해보니 undefined 문자열로 저장되어 있었다.

알고보니, Access token이 만료되었을 때, 로그인 후 쿠키에 저장된 Access token과 비교해 저장하는 로직이 있었는데, 여기서 로컬스토리지에 있는 Access token을 undefined로 저장하게 되었다.

if ((!savedToken && !!cookieToken) || savedToken !== cookieToken) {
  localStorage.setItem("access-token", cookieToken);
}

이 경우 쿠키의 토큰이 undefined인 경우 로컬스토리지에 그대로 undefined로 덮어써지는 상황이 있던 것.

해결하기

일단, 해당 로직은 정확히 언제 어떻게 오류를 발생시킬지 예측할 수 없기 때문에 지웠다.

if (!savedToken && !!cookieToken) {
  localStorage.setItem("access-token", cookieToken);
}

해당 로직만 삭제하고도 구글 로그인 후에 로그인 상태가 유지되는 것을 확인할 수 있었다.

또 다른 문제

해당 로직이 존재했던 이유는 Access-token이 만료되어 다시 로그인 했을 때, 토큰을 비교해 로컬스토리지에 새로운 토큰을 덮어쓰기 위한 로직이었다.

이 문제는 Refresh-token을 사용해 Access-token을 갱신하도록 하여 해결하였다. (다음 포스팅에서 어떻게 구현해 해결했는지 확인)