v1.0.3 — 인앱 브라우저 로그인 유도

X 인앱 브라우저에서 구글 로그인이 실패하던 문제를, 인앱 브라우저를 감지해 외부 브라우저로 유도하는 방식으로 처리했다.

배경

v1.0.1 에서 같은 missing initial state 에러를 고쳤으나, 이번 건은 원인이 다르다.

	v1.0.1	이번
원인	인증 핸들러가 firebaseapp.com 이라 서드파티 저장소가 차단됨	구글로 갔다 돌아오는 사이 인앱 브라우저가 sessionStorage 를 비움
성격	도메인 문제	저장소 수명 문제
해결	동일 오리진 프록시	코드로 우회 불가 → 사전 차단

동일 오리진으로 옮겨도 저장소 자체가 사라지면 복구할 방법이 없다.

왜 사전 차단인가

실패는 우리 화면이 아니라 인증 핸들러 페이지(/__/auth/handler)에서 발생한다. 사용자는 앱으로 돌아오지 못하고 그 에러 페이지에 갇힌다.

try/catch 로 잡아 안내하는 방식이 성립하지 않으므로, 리다이렉트를 시작하기 전에 분기해야 한다.

동작

• 인앱 브라우저 — 구글 로그인 버튼 대신 외부 브라우저 안내를 노출
  • 안드로이드: intent:// 로 크롬을 직접 연다
  • iOS: 주소 복사 + 안내 (직접 여는 방법이 없다)
• TikTok — 기존 로그인 버튼 그대로. 정상 동작이 확인된 유일한 인앱 브라우저다
• 일반 브라우저 / 서버 렌더 — 변화 없음

하이드레이션 불일치를 피하기 위해 useSyncExternalStore 로 UA를 읽는다. 서버에서는 UA가 비어 있어 인앱이 아닌 것으로 보고 기본 버튼을 렌더한다.

판정 정책

오판	결과
정상 동작하는 앱을 인앱으로 판정	사용자가 한 단계를 더 밟는다. 불편
막히는 앱을 정상으로 판정	빠져나올 수 없는 에러 페이지에 갇힌다. 이탈

위험이 비대칭이므로 확인된 TikTok만 통과시키고 나머지 인앱 브라우저는 모두 안내 대상으로 둔다. 다른 앱에서 정상 동작이 확인되면 WORKING 패턴에 추가한다.

검증

실제 UA 12종으로 판정 결과를 확인했다.

X iOS            인앱=true     Chrome Android   인앱=false
X Android (wv)   인앱=true     Safari iOS       인앱=false
TikTok Android   인앱=false    Chrome iOS       인앱=false
TikTok iOS       인앱=false    Chrome 데스크톱   인앱=false
Instagram iOS    인앱=true     Firefox Android  인앱=false
KakaoTalk iOS    인앱=true     UA 없음(서버)     인앱=false

TikTok 안드로이드 UA에는 안드로이드 WebView 표식인 wv 가 포함된다. 확인된 앱을 먼저 걸러낸 뒤 일반 WebView 판정을 하는 순서로 처리했다.

남은 한계

iOS는 외부 브라우저를 직접 열 수 있는 방법이 없어 주소 복사 + 안내가 최선이며, 이 단계에서 이탈이 발생한다.

근본적으로는 로그인 없이 볼 수 있는 범위를 넓히는 것이 인앱 브라우저 문제 자체를 우회하는 방법이다.

Full Changelog: v1.0.2...v1.0.3