Auth SDK와 브라우저·네트워크 안정성

문제

사내 서비스마다 인증·토큰 관리 코드가 제각각 개발되어 유지보수가 어려웠고, 기존 SDK는 특정 HTTP 클라이언트와 React Context에 종속돼 있었습니다. 실제 사용 환경에서는 멀티탭 세션 불일치, Edge Sleeping Tabs에서 멈추는 타이머, 일시적인 네트워크 오류가 인증 만료로 오인되어 사용자가 작업 중 갑자기 로그아웃되는 문제가 있었습니다.

무엇을 했나

auth-core · auth-react 분리 재설계

인증 로직을 프레임워크 독립적인 auth-core와 React 바인딩인 auth-react로 분리한 타입 안전 라이브러리로 재설계했습니다. TDD 방식으로 리팩토링해 12개 앱이 단일 버전을 공유하게 됐습니다.

브라우저 제약을 고려한 IdleTracker

멀티탭 세션 동기화(storage 이벤트), localStorage 사용 불가 환경의 메모리 폴백, Edge Sleeping Tabs에서 중단되는 타이머까지 고려한 IdleTracker를 구현했습니다. 단순 타이머가 아니라 탭 비활성화·focus 이벤트·멀티탭 환경을 전제로 설계했습니다.

네트워크 오류와 인증 만료 분리

일시적인 네트워크 오류를 인증 만료와 분리해 불필요한 자동 로그아웃·리다이렉트를 막았습니다. Event-driven 알림 구조로 React Context 밖의 순수 JavaScript 모듈에서도 다국어 오류 메시지와 다음 행동을 안내할 수 있게 했습니다.

성과

• 12개 앱이 단일 버전의 인증 라이브러리 공유
• 핵심 로직 테스트 커버리지 0% → 80%
• 네트워크 불안정 환경에서의 갑작스러운 로그아웃·빈 화면 문제 해소