app-host - Host Application

The main host application of the 54VIE Super App, managing authentication, navigation, and bridge handlers.

Overview

app-host is the main React Native application, responsible for:

• Authentication: Login, SSO, biometric, token management
• Mini-program loading: Dynamic loading from backend
• Bridge handlers: 17 service handlers for mini-apps
• Navigation: Tab navigation, stack navigation

Authentication

Auth Module

app-host/src/auth/
├── AuthProvider.tsx      # Context provider
├── services/
│   ├── AuthService.ts    # Login, register, logout
│   ├── SSOService.ts     # Google, Apple, Facebook
│   └── BiometricService.ts
├── hooks/
│   ├── useAuth.ts        # Main auth hook
│   ├── useSSO.ts         # SSO hooks
│   └── useBiometric.ts   # Biometric hooks
└── utils/
    ├── TokenManager.ts   # JWT management
    └── SessionManager.ts # Session tracking

Usage

import { useAuth, useSSO, useBiometric } from '../auth';

function LoginScreen() {
  const { login, isLoading } = useAuth();
  const { signInWithGoogle, signInWithApple } = useSSO();
  const { authenticate: biometricAuth, isSupported } = useBiometric();

  // Email login
  const handleLogin = async () => {
    await login({ email, password });
  };

  // SSO
  const handleGoogleLogin = async () => {
    await signInWithGoogle();
  };

  // Biometric
  const handleBiometric = async () => {
    if (isSupported) {
      const success = await biometricAuth('Login with Face ID');
      if (success) {
        // Auto-login with stored credentials
      }
    }
  };
}

Bridge Handlers

17 service handlers are registered in AppProviders.tsx:

Service	Methods
storage	get, set, remove, clear
api	request, registerApi, unregisterApi
auth	getUser, isAuthenticated, getAccessToken, requestLogin
analytics	track, screen
biometric	isSupported, isEnabled, authenticate
push	getToken, requestPermission, scheduleNotification
device	getInfo, getDeviceId, isEmulator
network	isOnline, getConnectionType
haptics	impact, notification, selection
clipboard	getString, setString
location	getCurrentPosition, geocode
media	takePhoto, pickImage, cropImage
ui	showToast, showAlert, showActionSheet
share	text, image
host	getInfo
navigation	navigate, goBack

Mini-Program Registry

import { MiniProgramRegistry } from '../services/MiniProgramRegistry';

// Fetch available mini-programs
const programs = await MiniProgramRegistry.getMiniPrograms();

// Get specific program
const program = await MiniProgramRegistry.getMiniProgram('dashboard');

// Track launch
await MiniProgramRegistry.trackLaunch('dashboard');

Bundle Manager

import { BundleManager } from '../services/BundleManager';

// Check if needs update
const needsUpdate = await BundleManager.needsUpdate(programInfo);

// Install bundle
await BundleManager.installBundle(programInfo, (progress) => {
  console.log(`Download: ${progress * 100}%`);
});

// Get local manifest URL
const manifestUrl = await BundleManager.getLocalManifestUrl('dashboard');

Navigation Structure

MainNavigator
├── AuthStack (if not authenticated)
│   └── SignInScreen
│
└── TabsNavigator (if authenticated)
    ├── HomeTab
    │   └── HomeScreen
    ├── ServicesTab
    │   ├── ServicesScreen (mini-app grid)
    │   └── MiniProgramScreen (dynamic)
    └── AccountTab
        └── AccountScreen