데브허브 | DEVHUB | Build a Full Stack Chat App using Socket.io & Expo Router #5 - AuthenticationBuild a Full Stack Chat App using Socket.io & Expo Router #5 - Authentication
- Axios, React Native Async Storage, JWT Decode 등 핵심 라이브러리를 활용하여 인증 기능을 구현합니다. 📦
- API URL은 Android와 iOS 환경에 따라 다르게 설정하여 개발 환경의 유연성을 확보합니다. 🌐
AuthService를 통해 로그인 및 회원가입 API 호출을 중앙에서 관리하고 에러 처리를 추상화합니다. 🔒
AuthContext는 signIn, signUp, signOut, updateToken과 같은 함수와 사용자 인증 상태를 전역적으로 관리합니다. 🔑
- 사용자 토큰은
AsyncStorage에 저장하여 지속성을 확보하고, JWT Decode를 사용하여 토큰에서 사용자 정보를 추출합니다. 💾
- 인증 성공 시 홈 화면으로, 로그아웃 시 환영 화면으로 자동 이동하여 사용자 경험을 향상시킵니다. ➡️
AuthProvider가 앱의 전체 레이아웃을 감싸 모든 컴포넌트에서 useAuth 훅을 통해 인증 상태와 함수에 접근할 수 있도록 합니다. 🌍
- API 호출 시 try-catch 블록을 사용하여 에러를 처리하고, '사용자 이미 존재' 또는 '잘못된 자격 증명'과 같은 사용자 친화적인 알림을 제공합니다. ⚠️
- 앱 시작 시
loadToken 함수를 통해 AsyncStorage에 저장된 토큰을 확인하고, 유효한 토큰이 있을 경우 자동으로 로그인 상태를 유지하여 세션 연속성을 보장합니다. 🔄