로그인

로그인 구조 소개

리액트 네이티브에서 로그인 기능은 모바일 앱에서 인증을 처리하는 중요한 부분입니다. 로그인은 사용자 인증을 통해 accessToken과 refreshToken을 관리하는 방식으로 구현됩니다. 이 두 토큰은 사용자 인증을 위한 핵심 요소입니다.

• AccessToken: 서버에 요청할 때마다 함께 보내는 짧은 유효 기간의 토큰입니다. 인증된 사용자만 접근할 수 있는 보호된 리소스를 요청할 때 사용됩니다.
• RefreshToken: 긴 유효 기간을 가진 토큰으로, accessToken이 만료되었을 때 새로운 accessToken을 얻기 위해 사용됩니다.

모바일에서 로그인 구조의 흐름

로그인 시스템의 구조는 모바일과 웹에서 비슷하지만, 저장 위치나 보안 측면에서 차이가 있습니다. 리액트 네이티브에서는 다음과 같은 방식으로 두 가지 토큰을 관리합니다.

AccessToken: 웹뷰 내 글로벌 상태

AccessToken은 짧은 유효 기간을 가진 인증 토큰으로, 사용자가 로그인할 때 서버에서 발급받고, 이후 모바일 애플리케이션의 각 API 요청에 첨부하여 사용자의 인증 상태를 유지합니다.

• 웹뷰 내 글로벌 상태: 모바일 앱에서는 AccessToken을 웹뷰 내에서 글로벌 상태로 관리할 수 있습니다. 이때 중요한 점은, 웹뷰 내에서 관리되는 상태를 앱의 다른 컴포넌트에서 참조하여 로그인 상태를 추적하고 인증된 사용자의 정보를 유지하는 것입니다.
• 매번 API 요청 시마다 AccessToken을 보낼 수 있어, 사용자가 인증된 상태로 빠르게 요청을 처리할 수 있습니다.
• 웹과 앱 간의 상태 공유가 간편해지며, 웹 기반의 인증 시스템을 활용할 수 있습니다.

RefreshToken: 모바일 스토리지 (AsyncStorage는 탈취 위험)

RefreshToken은 긴 유효 기간을 가지고 있으며, AccessToken이 만료되었을 때 서버에 새로운 AccessToken을 요청할 수 있도록 도와주는 역할을 합니다.

저장 위치

RefreshToken은 보통 모바일 스토리지에 안전하게 저장됩니다.

• AsyncStorage: 리액트 네이티브에서 간단한 데이터를 저장하는 데 사용됩니다. 그러나 탈취 위험이 존재하기 때문에 보안 측면에서 민감한 데이터를 저장하기에는 적합하지 않습니다.
• Secure Storage (추천): SecureStorage는 암호화된 저장소로, 보안이 중요한 데이터(예: RefreshToken)를 안전하게 저장할 수 있습니다.