FLYNNLABAboutMeCodingActivityStudy 2024초등수학
OAuth Sign In With Redirect, Logout Issue
oauth, issue, frontend, firebase

이슈 발생

  • FirebaseAuth 를 사용하고 GoogleOAuth 로그인을 구현했다.
  • popup 방식 보다 redirect 방식이 여러 장점이 많다고해서 그렇게 구현을 했다.
  • 그런데 로그인을 하고 로그아웃을 하고 다시 로그인을 하면 로그인이 되지 않는다.
  • 새로고침을 해도 로그인이 되지 않고 강제새로고침을 해도 안되었다.
  • 새탭을 띄우면 로그인 되고 또 같은 창도 일정 시간이 지나고 나서는 로그인 되었던거 같다.

원인 찾기

  • 일단 로그인을 하기 위해서는 브라우저에 흔적을 남겨야 한다.
  • 크롬 개발자 도구를 연다
  • Application 탭을 선택한다.
  • Storage 섹션에서 로그인 과정에서 변경된 데이터를 확인한다.
  • OAuth Redirect 방식으로 로그인을 하면 Cookie 영역에 신규 데이터들이 추가 되는걸 확인했다.
  • 로그아웃을 해도 Cookie 영역에 데이터가 남아있었다.
  • 이 Cookie 때문에 로그인이 되지 않았던거 같다.
  • 이 Cookie가 없으면 로그인이 정상적으로 되었다.

해결

  • 원인을 제대로 찾았으니 해결 방법은 Cookie를 지우면 되었다.
  • 도메인이 다르기 때문에 Cookie 를 직접 삭제할수는 없었다.
  • 그리고 나서 제일 중요한 나의 상황을 인지했다.
  • 나의 앱은 SPA로 동작하고 있었다.
  • 로그아웃은 FirebaseAuth 의 signOut() 함수를 호출하고 로그인 페이지로 이동하는게 전부였다.
  • 이게 Cookie를 그대로 두게 하는거 같았다.
  • 로그아웃 성공 직후 새로고침을 하도록 했더니 Cookie가 삭제되었다.
  • 그리고 다시 정상적으로 로그인이 되었다.

결론

  • SPA 에서 redirect 방식의 OAuth 인증을 사용할때에는 로그아웃 후 새로고침을 하도록 하자.