항공 프론트엔드 인증 구축: 웹·앱 웹뷰의 토큰 유입 경로 통합 및 httpOnly 쿠키 처리 전략

항공 프론트엔드 인증 시스템은 웹(Cookie)과 앱 웹뷰(Bridge)라는 두 가지 상이한 토큰 유입 경로를 단일 처리 경로로 통합하는 데 초점을 맞췄다. 기존 화면별 개별 처리 방식은 보안 위험과 렌더링 타이밍 불일치를 유발했으나, 최종 전략은 앱에서 획득한 토큰도 웹과 동일하게 httpOnly 쿠키로 설정하여 추상화를 달성했다.

토큰 유입 경로 및 이중 요청 로직 토큰은 웹의 쿠키, 앱 세션 읽기(Bridge), 앱 직접 요청의 3가지 경로로 유입된다. 앱 저장소 갱신 지연으로 로그인 직후 토큰이 부재한 타이밍 이슈를 해결하기 위해, 앱 세션 읽기 실패 시 requestToken()으로 직접 요청하는 2차 확인 로직을 도입했다. 이는 앱 측 수정 없이 웹에서 상태를 확정 짓는 확실한 방법이다.

SSR 지원 및 라이브러리 의존성 분리 쿠키 방식 채택으로 서버 렌더링(SSR) 시 첫 HTML 생성부터 로그인 상태를 반영할 수 있게 되었다. 인증 훅(useAuthCore)은 Next.js 서버 액션에 의존하지 않도록 설계되었으며, 회원 조회 및 토큰 관리 함수를 인자로 주입받아 라이브러리 의존성을 최소화했다. 또한 isAppByNative와 isAppByWeb으로 환경을 분기하여 디버깅과 인증 로직의 정확성을 높였다.

React 외부 상태 동기화 및 좀비 토큰 처리 브릿지 함수는 React 트리 밖에서 동작하므로, 보이지 않는 DOM 요소 속성(data-logged-in)과 window.syncAppSession 전역 함수를 통해 로그인 상태를 동기화한다. 만료된 '좀비 토큰'은 SSR 중 쿠키 삭제가 불가능하므로 서버는 실패만 알리고, 클라이언트 도착 후 clearToken()으로 삭제한다. 단, 앱 환경에서는 재수신 경로 차단을 방지하기 위해 쿠키를 즉시 삭제하지 않는다.

아키텍처 원칙 차이를 제거하는 것이 아니라 차이가 존재하는 자리를 지정하는 원칙을 따랐다. 화면 코드는 useAuth() 훅을 통해 isLoggedIn과 myInfo만 참조하며, 복잡한 토큰 출처 판단 로직은 훅 내부로 캡슐화했다. 이를 통해 화면 코드는 얇아지고 유지보수성이 향상되었으나, 관련 로직이 한곳으로 집중되는 트레이드오프가 발생했다.