Skip to content

v1.0.1 — 인앱 브라우저 로그인 수정

Choose a tag to compare

@Lunas322 Lunas322 released this 18 Aug 04:07
· 41 commits to main since this release
95d857f

틱톡 등 인앱 브라우저(WebView)에서 구글 로그인이 되지 않던 문제를 수정했다.

유입의 대부분이 틱톡(31/39명), 모바일 95%(안드로이드 74%)인 상황에서 광고로 들어온 사용자 대부분이 가입 자체를 하지 못하는 상태였다.

수정 내용

세 겹의 문제가 순서대로 겹쳐 있었고, 앞의 것을 고쳐야 뒤의 것이 드러났다.

# 증상 원인 수정
1 missing initial state 인증 핸들러가 firebaseapp.com(서드파티 오리진)에서 서빙되어 저장소 격리 정책에 sessionStorage 가 막힘 /__/auth/* 를 프록시해 인증 핸들러를 서비스 도메인과 동일 오리진으로 전환
2 redirect_uri_mismatch 변경된 authDomain 이 OAuth 클라이언트에 등록되지 않음 승인된 리디렉션 URI 및 JavaScript 원본 추가 (콘솔)
3 빈 화면 WebView가 팝업 창을 띄우지 못함 (auth/popup-blocked) signInWithPopup → signInWithRedirect 전환

변경 파일

  • next.config.ts — /__/auth/:path* 프록시 추가
  • src/middleware.ts — matcher 에서 /__/ 경로 제외. 미들웨어는 rewrites 보다 먼저 실행되므로 이 제외가 없으면 핸들러 요청이 /{lang}/__/auth/handler 로 리다이렉트되어 프록시에 도달하지 못한다
  • src/hooks/login.ts — 리다이렉트 로그인으로 전환. browserSessionPersistence 적용, getRedirectResult 복귀 처리 추가, 세션 쿠키 발급 직후 signOut 호출로 브라우저에 인증 상태를 남기지 않는 기존 원칙 유지

함께 필요한 외부 설정

  • NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN = 서비스 도메인
  • Google Cloud OAuth 클라이언트 — 승인된 리디렉션 URI에 https://<도메인>/__/auth/handler

알려진 제약

  • 리다이렉트 복귀 후 getRedirectResult 응답까지 랜딩 화면이 약 0.3초 노출된다
  • Preview 배포는 도메인이 매번 달라 로그인이 동작하지 않는다

Full Changelog: v1.0.0...v1.0.1