Firebase Auth의 signInWithRedirect 를 통해 구글 아이디로 로그인을 구현했는데, chrome에서는 정상적으로 잘 동작하지만 safari에서는 동작하지 않았다. 어디서 blocking이 되었는지 찾아보다가, 개발자도구를 살펴보니 signInWithRedirect를 위한 iframe이 응답을 보내지 않고 있다는 사실을 발견했다.
해당 이유에 대해서 찾아보니 아래와 같은 내용을 발견하였다.
Safari는 서드 파티 스토리지 엑세스를 차단하는 브라우저이기 때문에 따로 연관된 브라우저에 대한 대응책이 필요했다.
Firebase에서 알려준 해결책
아래 링크를 보면 5가지의 해결책을 제공한다. 프로젝트에 적합한 옵션을 사용하면 될 것 같다.
1.
커스텀 도메인을 authDomain으로 사용하도록 Firebase 구성 업데이트
2.
signInWithPopup()으로 전환
3.
firebaseapp.com에 프록시 인증 요청
4.
도메인에서 로그인 도우미 코드 자체 호스팅
5.
공급업체 로그인을 개별적으로 처리
firebaseapp.com에 프록시 인증 요청 옵션 선택!
나는 3번 옵션인 firebaseapp.com에 프록시 인증 요청을 시도하기로 했다.
선택하게된 이유는 아래와 같다.
1.
모바일 브라우저에서도 원활하게 동작해야함(옵션 2 : signInWithPopup()의 경우 모바일 지원이 잘 안됨)
2.
별도의 추가 설정 X(옵션 5 : Google 로그인 SDK 설정 필요, 옵션 1: 호스팅 서비스 변경 필요)
3.
현재 구현된 서버 및 클라이언트로만 진행(옵션 4 : 인증 서버 호스팅 구현 필요)
이미 내부적으로 Nginx를 활용한 reverse proxy설정을 하고 있었기 때문에 3번 옵션이 가장 쉬웠다.
1) reverse proxy 설정
예제를 보면 아래와 같이 location을 지정해주면 된다.
# reverse proxy for signin-helpers for popup/redirect sign in.
location /__/auth {
proxy_pass https://<project>.firebaseapp.com;
}
Shell
복사
2) redirect_uri 업데이트
이 부분이 가장 어려웠는데 이 과정을 진행하지 않으면 아래와 같은 오류와 함께 접근이 차단된다.
redirect_uri을 설정하려면 아래 Google Cloud Console에 들어가서 해당 Firebase Application과 연결된 프로젝트를 설정한다. 라벨을 통해 연결 정보를 간편하게 확인할 수 있다.
이후 프로젝트 → API 및 서비스 → 사용자 인증 정보 → Web client (auto created by Google Service)
위 경로로 들어가서 redirect_uri를 등록해주면 끝이다.
후기
방법을 알고 나면 정말 간단한 이슈였지만, 처음엔 너무 막막했다. 이 이슈를 해결해야 할지 그냥 내버려 둬야 할지 고민만 수십 번 넘게 한 것 같다. 관련 레퍼런스가 많이 없었던 것이 고민의 이유였었다.
결국 해결하려는 노력과 시도가 정말 중요하다는 것을 깨달았다. 앞으로도 잘 모르는 분야의 이슈가 생겼을 때, 한번 부딪혀 봐야겠다.
