firebase auth 사파리 브라우저에서 안되는 문제

Question

간단한 웹사이트를 도전해보고 있는데요. firebase authentication을 써서 구글 아이디로 로그인이 되도록 사용 중입니다.

문서는 https://firebase.google.com/docs/auth/web/google-signin 요거 참고해서 작업했습니다.

최종적으로 코드는 아래와 유사하구요. 이상하게 크롬은 되는데 사파리에서 안됩니다. 구글 로그인 창까지는 가지는데 막상 로그인하면 로그인이 되지 않습니다.

혹시 유사한 문제 풀어보신분 계실까요?

손정현 · Accepted Answer

안녕하세요!

우선 getRedirectedResult를 useEffect에만 넣으면 안될 것 같습니다. firebase.auth에 onAuthChanged라는 함수가 있는데, 거기 안에서 getRedirectedResult 사용해야 의도하신대로 작동할 것 같아요. (사실 이건 별로 중요하지 않습니다)

최근에 사이드 프로젝트를 진행하면서 firebase authentication을 웹에서 사용했을때 저도 동일한 이슈를 직면했습니다. 원인은 safari 브라우저에서 아직 지원이 되지 않는 기능으로 signInWithRedirect가 구현되기 때문으로 추정합니다. (참고로 ios 모바일은 크롬 브라우저를 열어도 내부에서 사파리 브라우저를 사용합니다)
- https://github.com/firebase/firebase-js-sdk/issues/6831
- https://caniuse.com/?search=require-trusted-types-for

그래서 파이어베이스에서 추천하는 방법으로 진행했습니다. (5번째 방법)
- https://firebase.google.com/docs/auth/web/redirect-best-practices

결국 지저분해지긴 했지만, 현재 로그인 상태는:
1. google로 auth 요청 보낸 뒤 정보 얻음
2. google에서 얻은 정보로 firebase auth 요청 보냄
이렇게 되고 있어요.

아직 파이어베이스 팀이 해결 방안을 모색 중인 것 같아요 :)