React Native Authentication Flow

Build a complete authentication flow for React Native with security best practices.

Screens

1. Login Screen

• Email/password inputs
• Input validation
• "Forgot Password" link
• Loading state during login

2. Sign Up Screen

• Registration form
• Password confirmation field
• Password strength indicator
• Terms acceptance

3. Forgot Password Flow

• Email input for reset
• Confirmation message
• Reset link handling

Security & State Management

4. Secure Token Storage

• Use react-native-keychain or expo-secure-store
• Store access and refresh tokens securely
• Never store in AsyncStorage

5. Auth Context

• Global auth state with useContext
• Provide user data throughout app
• Handle login/logout actions

6. Protected Routes

• Navigation based on auth state
• Redirect unauthenticated users
• Deep link handling

7. Auto-Logout

• Monitor token expiration
• Automatic logout when expired
• Token refresh logic

8. UX Feedback

• Loading states for all async operations
• Error handling and user-friendly messages
• Success confirmations

9. Form Validation

• Use react-hook-form for form management
• zod schemas for validation
• Real-time validation feedback

Requirements

• TypeScript throughout
• Follow React Native best practices
• Secure authentication patterns
• Excellent user experience