Mobile App Package

The Mobile Package is a comprehensive React Native application built with Expo, providing complete authentication and user management features for iOS and Android platforms.

Tech Stack

Category	Technology
Framework	React Native 0.81.5
Platform	Expo 54.0.31
Language	TypeScript 5.9.2
Styling	NativeWind 4.2.1
Navigation	React Navigation 7.x
State	React Context API
HTTP	Axios 1.13.2
Storage	AsyncStorage 2.2.0
Forms	React Hook Form 7.70 + Zod 4.3

Key Features

Authentication

// Example: Login with MFA support
async function login(email: string, password: string) {
  const response = await authApi.login({ email, password });
  
  if (response.requiresMfa) {
    return navigate('MFAScreen', { tempToken: response.tempToken });
  }
  
  await authContext.setTokens(response.token, response.refreshToken);
}

Features:

User registration with email verification
Secure login with JWT tokens
Multi-Factor Authentication (MFA/TOTP)
Password reset via email
Account lockout protection
Automatic token refresh

User Management

Profile viewing and editing
Password change
Email change with verification
Audit log viewing
Security settings

Security Features

JWT-based authentication with tokens
TOTP authenticator app support
Rate limiting protection
SSL certificate pinning
Audit logging

Project Structure

mobile/
├── src/
│   ├── components/            # Reusable UI components
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   └── InternalLayout.tsx
│   ├── contexts/              # React contexts
│   │   └── AuthContext.tsx
│   ├── navigation/            # Navigation configuration
│   │   └── AppNavigator.tsx
│   ├── screens/               # App screens
│   │   ├── LoginScreen.tsx
│   │   ├── RegisterScreen.tsx
│   │   ├── MFAScreen.tsx
│   │   ├── ProfileScreen.tsx
│   │   ├── SecurityScreen.tsx
│   │   ├── AuditLogsScreen.tsx
│   │   ├── ForgotPasswordScreen.tsx
│   │   └── ResetPasswordScreen.tsx
│   ├── services/              # API services
│   │   └── authApi.ts
│   ├── styles/                # Global styles
│   ├── types/                 # TypeScript types
│   └── utils/                 # Utility functions
│       ├── certificatePinning.ts
│       └── securityUtils.ts
├── android/                   # Android project
├── ios/                       # iOS project
├── build.sh                   # Build script
└── app.json                   # Expo configuration

Available Screens

Screen	Description
LoginScreen	User login with email/password
RegisterScreen	New user registration
MFAScreen	MFA verification (TOTP)
MainScreen	Main dashboard after login
ProfileScreen	User profile viewing
EditProfileScreen	Edit profile information
SecurityScreen	Security settings
MFASettingsScreen	MFA setup and management
AuditLogsScreen	View personal audit logs
ForgotPasswordScreen	Request password reset
ResetPasswordScreen	Complete password reset

Quick Start

Prerequisites

Node.js 18+
Expo CLI: npm install -g @expo/cli
Xcode (macOS) for iOS development
Android Studio for Android development

Installation

# Navigate to mobile directory
cd projects/fss/mobile

# Install dependencies
npm install

# Configure API endpoint
# Edit src/services/authApi.ts with your backend URL

# Start development server
npx expo start

Running on Platforms

# Run on iOS simulator
npx expo start --ios

# Run on Android emulator
npx expo start --android

# Run on physical device (requires Expo Go app)
npx expo start

Building for Production

# Build for iOS App Store
npx expo build:ios

# Build for Google Play Store
npx expo build:android

# Or use EAS Build
npx eas build --platform ios
npx eas build --platform android

Configuration

API Configuration

// src/services/authApi.ts
const API_BASE_URL = 'https://your-backend-api.com';

const authApi = axios.create({
  baseURL: API_BASE_URL,
  timeout: 10000,
});

// Certificate pinning for production
if (__DEV__) {
  // Disable pinning in development
} else {
  // Enable certificate pinning for production
}

Environment Setup

# .env file
API_BASE_URL=https://your-backend-api.com
ENABLE_CERTIFICATE_PINS=true
ENABLE_OFFLINE_MODE=true

Authentication Flow

Security Best Practices

✅ Enable certificate pinning for production ✅ Use secure storage for tokens ✅ Implement automatic token refresh ✅ Enable biometric authentication ✅ Implement session timeout ✅ Log all security events ✅ Use HTTPS for all API calls

Offline Support

// Enable offline mode with caching
const cache = await AsyncStorage.getItem('cached_data');
if (cache) {
  setOfflineData(JSON.parse(cache));
}

Push Notifications

// Configure push notifications
async function registerForPushNotifications() {
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  
  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    return status === 'granted';
  }
  
  return true;
}

AI Integration

The mobile app includes src/services/aiService.ts, which connects to the backend /ai/* endpoints using the same SSL-pinning-aware API client.

Note: The mobile app supports full (non-streaming) AI responses only. SSE streaming is not available in the React Native environment.

AI Request Flow (Mobile)

Streaming is not available on mobile — only full responses via aiAPI.chat().

Usage

import { aiAPI, AIMessage } from '../services/aiService';

// List configured providers
const providers = await aiAPI.getProviders();
// [{ provider: 'anthropic', defaultModel: 'claude-sonnet-4-6', configured: true }, ...]

// Send a chat message
const result = await aiAPI.chat({
  provider: 'anthropic',
  messages: [{ role: 'user', content: 'What is the capital of France?' }],
  model: 'claude-sonnet-4-6',  // optional
  maxTokens: 512,               // optional
  temperature: 0.7,             // optional
  systemPrompt: 'Be concise.', // optional
});
console.log(result.content); // "Paris."

Building a Chat Screen

The template in .context/AI-INTEGRATIONS.md shows a complete AIChatScreen example with message list, text input, loading indicator, and error handling. Copy it as a starting point.

See AI Integrations Guide for full documentation.

Vibe Templates

The mobile package includes a vibe template for scaffolding new screens quickly:

# Copy template files
cp vibe-templates/new-screen/screens/NotesScreen.tsx  src/screens/NotesScreen.tsx
cp vibe-templates/new-screen/services/notesService.ts src/services/notesService.ts
cp vibe-templates/new-screen/types/notes.ts           src/types/notes.ts

# Rename: Notes → YourFeature, notes → yourFeature, Note → YourType, note → yourType

# Register route in src/types/navigation.ts and src/navigation/AppNavigator.tsx

See Vibe Templates Guide for full instructions.

.context Directory

The mobile package includes a .context/ folder for AI coding agents:

File	Contents
`OVERVIEW.md`	Tech stack, how to run
`ARCHITECTURE.md`	Screen map, navigation, auth flow, API client
`SCREENS.md`	Every screen — purpose, logic, patterns
`AI-INTEGRATIONS.md`	AI service functions and full chat screen example
`CONVENTIONS.md`	File naming, navigation, API calls, styling rules

Next Steps

Authentication Guide - Detailed auth documentation
AI Integrations - AI service setup and usage
Vibe Templates - Scaffold new screens quickly
Backend Package - Backend API setup
Security Features - Mobile security best practices
Deployment Guide - Mobile app deployment

Tech Stack​

Key Features​

Authentication​

User Management​

Security Features​

Project Structure​

Available Screens​

Quick Start​

Prerequisites​

Installation​

Running on Platforms​

Building for Production​

Configuration​

API Configuration​

Environment Setup​

Authentication Flow​

Security Best Practices​

Offline Support​

Push Notifications​

App Navigation Structure​

AI Integration​

AI Request Flow (Mobile)​

Usage​

Building a Chat Screen​

Vibe Templates​

.context Directory​

Next Steps​