Mobile JWT Login Module

The app uses mock credentials for testing and includes pre-seeded accounts (user@example.com / Demo@1234 for user role, user@example.com / Admin@5678 for admin). Perfect for developers building authentication systems or learning React Native best practices.

Features

Authentication Flows

• Login Screen: Email + password form with inline validation, password visibility toggle, "Remember Me" checkbox for persistent sessions
• Registration Screen: Name, email, password fields with live password strength indicator (Weak/Fair/Strong/Very Strong) and duplicate email detection
• Forgot Password: Email entry with mock reset link confirmation (mock reset code: 123456)
• Biometric Authentication: Dedicated screen with animated pulse ring; triggers Face ID/Touch ID on real devices, simulates via "Use Mock Credentials" button on web/simulator

Session & Token Management

• Session Expiry: Sessions expire after 15 minutes of inactivity with live countdown timer on dashboard
• Visual Alerts: Progress bar turns red and pulses when < 2 minutes remain
• Token Storage: JWT-like access token (1-hour expiry) + refresh token (7-day expiry) stored in localStorage with authTokens key
• Token Display: Dashboard shows masked tokens with Show/Hide toggle and Copy button
• Extend Session: Button to reset the 15-minute inactivity timer

User Experience

• Remember Me: Restores user session on app restart when checked; clears on logout when unchecked
• Error Handling: Dismissible error banners for invalid credentials, duplicate emails, etc.
• Loading States: Full-screen loading overlay during auth operations
• Dark Mode UI: Deep navy background (#0F0F1A) with violet accents (#6C63FF)

Tech Stack

Project Structure

app/
  index.tsx                    # Auth redirect (splash)
  _layout.tsx                  # Root layout (AuthProvider)
  (auth)/
    _layout.tsx                # Auth stack navigator
    login.tsx                  # Login screen
    register.tsx               # Registration screen
    forgot-password.tsx        # Password reset flow
    biometric.tsx              # Biometric auth screen
  (home)/
    _layout.tsx                # App stack navigator
    index.tsx                  # Dashboard (post-login)

src/
  types/
    auth.ts                    # TypeScript interfaces & types
  services/
    mockAuth.ts                # Mock auth service (login, register, refresh)
  utils/
    storage.ts                 # localStorage wrapper with Platform check
  context/
    AuthContext.tsx            # Auth state, reducer, provider, hooks
  components/
    FormInput.tsx              # Reusable text input with label + error
    PasswordInput.tsx          # Password input with show/hide toggle
    PasswordStrength.tsx       # Strength bar + rule checklist
    ErrorBanner.tsx            # Dismissible error banner
    LoadingOverlay.tsx         # Full-screen loading spinner

Setup & Usage

Installation

npm install
npx expo start

Running on Different Platforms

# Web
npx expo export --platform web

# iOS/Android (via Expo Go or EAS)
npx expo start

Mock Credentials

• Any email not in the list is rejected with "Invalid email or password"
• Wrong password returns "Invalid email or password"
• On web/simulator, the "Use Mock Credentials" button auto-signs in as user@example.com

Design System

• Background: #0F0F1A (deep navy)
• Primary: #6C63FF (violet)
• Success: #22C55E
• Error: #EF4444
• Cards: rgba(255,255,255,0.04) with 1px border at rgba(255,255,255,0.07)
• Typography: System font; hero 32–40px / 700; body 15–16px; labels 11px uppercase

Key Implementation Details

Token Structure

{
  "accessToken": "mock_access_<userId>_<timestamp>",
  "refreshToken": "mock_refresh_<userId>_<timestamp>",
  "expiresAt": <unix ms timestamp>
}

Password Strength Rules

• Length ≥ 8 characters
• At least one uppercase letter
• At least one lowercase letter
• At least one number
• At least one special character

Session Management

• 15-minute inactivity timeout with live countdown
• Auto-logout on expiry
• "Extend Session" button resets timer
• Progress bar visual feedback (red + pulse when < 2 minutes)

Perfect For

• Developers building authentication systems in React Native
• Learning React Context + useReducer patterns
• Understanding token-based auth flows
• Mobile app prototyping with Expo
• Testing biometric integration workflows