Aller au contenu

Architecture Application Mobile ProbatioVault

Ce document décrit l'architecture spécifique à l'application mobile. Voir la vue d'ensemble globale pour l'architecture complète.

Stack technique

Composant Technologie Version
Framework Expo SDK 52
UI React Native 0.76.x
Language TypeScript 5.x (strict)
State Zustand 4.x
Navigation React Navigation 6.x
Crypto argon2-browser, js-sha3 -
Storage Secure Store Expo

Architecture de l'application

src/
├── components/
│   ├── common/         # Composants réutilisables
│   ├── vault/          # Composants coffre-fort
│   └── security/       # Composants sécurité
├── screens/
│   ├── auth/           # Login, Register
│   ├── vault/          # Liste documents, détail
│   └── settings/       # Paramètres
├── services/
│   ├── crypto/         # Fonctions cryptographiques
│   ├── storage/        # Stockage local
│   ├── api/            # Client API
│   └── sync/           # Synchronisation
├── hooks/              # Custom hooks
├── store/              # Zustand stores
├── navigation/         # Configuration navigation
├── constants/          # Constantes
├── types/              # Types TypeScript
└── utils/              # Utilitaires

Modules principaux

Crypto Services

Responsable de toutes les opérations cryptographiques :

services/crypto/
├── keyDerivation.ts    # Argon2id, HKDF
├── encryption.ts       # AES-256-GCM
├── hashing.ts          # SHA3-256
└── keystore.ts         # Gestion Master Envelope

Store (Zustand)

store/
├── authStore.ts        # État authentification
├── vaultStore.ts       # Documents et dossiers
├── settingsStore.ts    # Préférences utilisateur
└── syncStore.ts        # État synchronisation

┌─────────────┐
│  AuthStack  │ ← Non authentifié
├─────────────┤
│   Login     │
│  Register   │
└──────┬──────┘
       │ Authentifié
       ▼
┌─────────────┐
│  MainStack  │ ← Authentifié
├─────────────┤
│  VaultTab   │ ← Documents
│ SettingsTab │ ← Paramètres
└─────────────┘

Flux de données

State Management

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Screen    │────>│   Store     │────>│   Service   │
└─────────────┘     └─────────────┘     └─────────────┘
       ▲                   │                   │
       │                   │                   │
       └───────────────────┘                   │
           React re-render                     │
                                              ▼
                                        ┌─────────────┐
                                        │  API/Local  │
                                        └─────────────┘

Exemple : Chargement documents

// Screen
const { documents, fetchDocuments } = useVaultStore();

useEffect(() => {
  fetchDocuments();
}, []);

// Store
const useVaultStore = create((set) => ({
  documents: [],
  loading: false,

  fetchDocuments: async () => {
    set({ loading: true });
    const docs = await vaultService.getDocuments();
    set({ documents: docs, loading: false });
  },
}));

// Service
const getDocuments = async () => {
  const response = await api.get('/documents');
  return response.data.map(decryptMetadata);
};

Sécurité

Stockage sensible

Donnée Stockage Méthode
Master Envelope Secure Store Keychain iOS / Keystore Android
JWT Token Secure Store Keychain iOS / Keystore Android
Documents cache Chiffré local AES-256-GCM avec K_doc
Préférences AsyncStorage Non sensible

Protection mémoire

// Zeroize après usage
function zeroize(buffer: Uint8Array): void {
  buffer.fill(0);
}

// Usage
const kDoc = await deriveDocumentKey(kMaster, docId);
try {
  const plaintext = decrypt(ciphertext, kDoc);
  // utiliser plaintext...
} finally {
  zeroize(kDoc);
}

Performance

Optimisations

  • Lazy loading des écrans
  • Memoization des composants lourds
  • Cache documents déchiffrés (mémoire uniquement)
  • Pagination des listes

Métriques cibles

Opération Cible
Dérivation Argon2id < 1s
Déchiffrement document < 100ms
Chargement liste < 500ms
Navigation écran < 300ms

Liens