9월 19일

오늘 배운 것 (TIL)

NextAuth v5 + Next.js 15 Universal 인증 시스템

웹 브라우저와 React Native WebView에서 동일한 로그인 컴포넌트를 사용하는 통합 인증 시스템을 구현하면서 배운 내용들을 정리했다.

NextAuth v5의 새로운 패턴

기존 v4와 달리 authorized 콜백을 미들웨어에서 직접 사용할 수 있다는 점이 인상적이었다. 이를 통해 서버 레벨에서 인증 상태를 확인하고 리다이렉트를 처리할 수 있어 성능상 이점이 크다는 것을 알게 되었다.

환경 감지의 중요성

웹과 모바일 앱에서 동일한 컴포넌트를 사용하려면 런타임에 환경을 정확히 감지하는 것이 핵심이라는 것을 깨달았다. URL 파라미터와 User Agent를 조합해서 사용하는 방법이 가장 안정적이었다.

미들웨어 기반 인증의 장점

각 페이지마다 인증 로직을 반복하지 않고 미들웨어 레벨에서 한 번에 처리할 수 있다는 점이 코드 중복을 크게 줄여준다는 것을 경험했다. 특히 환경별로 다른 리다이렉트 처리가 필요할 때 미들웨어에서 분기 처리하는 것이 효율적이었다.

Universal 컴포넌트 설계

웹과 앱에서 동일한 UI 컴포넌트를 사용하되 환경에 따라 스타일과 동작을 조건부로 처리하는 패턴을 익혔다. React Context를 통해 환경 정보를 전역으로 관리하는 것이 컴포넌트 재사용성을 높이는 핵심이었다.

WebView 통신의 복잡성

React Native WebView와 웹 앱 간의 데이터 전달이 생각보다 복잡하다는 것을 알게 되었다. postMessage를 통한 JSON 통신과 injectedJavaScript를 활용한 초기화가 필요하며, 메시지 타입별로 명확한 프로토콜을 정의하는 것이 중요했다.

타입 안전성의 가치

NextAuth의 Session과 JWT 인터페이스를 확장하고, Window 객체에 WebView 관련 속성을 추가하는 과정에서 TypeScript의 타입 시스템이 런타임 오류를 사전에 방지해주는 것을 실감했다.

환경 변수 관리

NextAuth v5에서 AUTH_ 프리픽스가 필수라는 점과 각 OAuth 제공자별로 콜백 URL을 정확히 설정해야 한다는 것을 배웠다. 개발과 프로덕션 환경에서 다른 설정이 필요하다는 점도 중요한 학습 포인트였다.