[트러블슈팅] Firebase Authentication 리다이렉트 로그인 시 로그인되지 않고 초기 화면으로 돌아가는 문제 해결

문제 상황

Firebase Authentication 팝업 로그인 시 Cross-Origin-Opener-Policy(COOP) 오류 문제 해결 및 사이트 특성상 모바일 접속 비중이 높아 팝업 차단으로 인한 사용자 경험 저하가 우려되어 로그인 방식을 고민함.
이에 따라 Firebase Authentication의 팝업 로그인 방식(signInWithPopup) 대신 리다이렉트 로그인(signInWithRedirect) 방식으로 변경
하지만 구현 이후 아래와 같은 문제가 발생

• 로그인 버튼 클릭 → Google 로그인 화면 정상 이동
• 계정 선택 및 로그인 완료
• 다시 서비스 페이지로 돌아오지만 로그인 상태가 유지되지 않음
• 결과적으로 항상 첫 화면으로 돌아오는 현상 발생

---

발생 환경

• Firebase Authentication
• Google 로그인 (Redirect 방식)
• 모바일/데스크톱 공통 발생

---

원인 추적

1. localhost에서 즉, 개발 환경에서는 리다이렉트로 로그인 불가!
2. signInWithPopup을 signInWithRedirect로 수정만 했었는데, 조사 결과, 리다이렉트 로그인 방식은 팝업 로그인과 달리 로그인 결과를 자동으로 처리해주지 않는다는 점을 놓치고 있었다.리다이렉트 방식에서는 인증이 완료된 후, 명시적으로 로그인 결과를 처리하는 단계가 필요하다.

---

해결 방법

1. 원활한 개발을 위해 개발 모드, 배포 모드 분기처리하여 개발 모드에서는 팝업 로그인, 배포 모드에서는 리다이렉트 로그인 처리 설정
   참고: 트러블슈팅 - import.meta.env.MODE
   
2. getRedirectResult를 통해 로그인 결과 처리

• Firebase 공식 문서에서 방식은, 리다이렉트 이후 아래 메서드를 통해 인증 결과를 받아오는 것이다.

import { getRedirectResult } from "firebase/auth";

getRedirectResult(auth)
  .then((result) => {
    if (result?.user) {
      // 로그인 성공 처리
    }
  })
  .catch((error) => {
    console.error(error);
  });

• 리다이렉트 로그인은 페이지 새로고침과 동일한 흐름으로 동작
• 따라서 앱 시작 시점(예: 최초 렌더링 또는 auth 초기화 시점)에
  getRedirectResult를 호출해주어야 한다

이 처리가 없을 경우:

• 로그인은 성공했지만
• 앱에서는 로그인 결과를 인지하지 못하고
• 비로그인 상태로 판단해 초기 화면으로 리다이렉트하게 된다

---

정리

• signInWithRedirect는 signInWithPopup과 동작 방식이 다르다
• 리다이렉트 로그인은 로그인 결과를 직접 처리해야 한다

---

참고 자료

• Firebase 공식 문서: 서드 파티 스토리지 액세스를 차단하는 브라우저에서 signInWithRedirect를 사용하기 위한 권장사항
• Reddit: signInWithRedirect 로그인 실패 사례 정리
• Velog: Firebase: signInWithRedirect 사용 시 로그인이 되지 않는 문제

느낀 점

사용자 경험을 개선하려는 선택이 오히려 새로운 문제를 만들 수도 있다.
로그인 방식 변경 시, 인증 흐름의 차이를 정확히 이해하는 것이 중요하다는 것을 느꼈다.