anchorage_layer_simple/features/login-bout-en-bout-implémentations.md

Login fonctionnel de bout en bout - Implémentations réalisées

Author: Équipe 4NK
Date: 2026-01-28

Vue d'ensemble

Ce document décrit les implémentations réalisées pour compléter le login fonctionnel de bout en bout sur PC et mobile.

---

1. userwallet - Notifications relais pour mobile

Note importante : Le modèle est pull-only (HTTP REST uniquement). Les WebSockets ne sont pas souhaités selon la documentation (userwallet/features/userwallet-notifications-relais.md).

1.1 Modèle pull-only (HTTP REST)

Fichier modifié : userwallet/src/services/relayNotificationService.ts

Implémentations :

1. Polling HTTP REST uniquement

   • Modèle pull-only : uniquement des appels GET HTTP REST
   • Pas de WebSocket (non souhaité selon la documentation)
   • Polling périodique des relais pour détecter nouveaux hashes
   • Détection via GET /keys?start=&end= pour scanner les nouveaux messages

2. Gestion du polling

   • startPolling(intervalMs) : démarre le polling périodique
   • stopPolling() : arrête le polling
   • Fenêtre temporelle configurable pour le scan des clés
   • Émission d'événements RelayHashEvent avec source: 'polling'

1.2 Optimisations mobile (backoff, reconnexions)

Fichier modifié : userwallet/src/services/relayNotificationService.ts

Implémentations :

1. Stratégie de backoff exponentiel

   • Interface BackoffState pour gérer l'état de retry par relais
   • getBackoffDelay(endpoint) : calcul du délai avec exponentiel (max 60s)
   • recordFailure(endpoint) : enregistre un échec et incrémente les tentatives
   • recordSuccess(endpoint) : réinitialise le backoff après succès
   • shouldRetry(endpoint) : vérifie si un retry est autorisé (max 5 tentatives)

2. Gestion réseau mobile

   • setupNetworkListeners() : écoute des événements online/offline
   • resumeOperations() : reprend les opérations après reconnexion
   • pauseOperations() : pause les opérations en mode offline
   • Vérification isOnline avant chaque opération réseau

3. Optimisation des appels réseau

   • Retry avec backoff pour getMessageByHash, getSignatures, getKeys
   • Skip des relais en échec répétés
   • Réduction des appels inutiles en mode offline

1.3 Fetch automatique des données

Fichier modifié : userwallet/src/services/relayNotificationService.ts

Implémentations :

1. ProcessHash amélioré

   • Fetch automatique de message, signatures, clés quand un hash est connu
   • Déchiffrement et mise à jour du graphe automatiques
   • Gestion des erreurs avec backoff par relais

2. ProcessHashByType optimisé

   • Optimisation selon le type d'objet (signature, contrat, membre, pair, action, champ)
   • Fetch sélectif selon le type (ex: pas besoin de clés pour une signature seule)

3. Intégration avec useRelayNotifications

   • Auto-processing des hashes détectés via polling
   • Démarrage automatique du polling avec startPolling()
   • Arrêt propre avec stopPolling() et cleanup()

Fichier modifié : userwallet/src/hooks/useRelayNotifications.ts

Implémentations :

1. Polling HTTP REST
   • startPolling() démarre le polling périodique
   • stopPolling() arrête le polling
   • Gestion du cycle de vie du polling

---

2. userwallet - Responsive design mobile

2.1 CSS responsive

Fichier modifié : userwallet/src/index.css

Implémentations :

1. Media queries

   • @media (max-width: 768px) : tablettes et petits écrans
   • @media (max-width: 480px) : smartphones
   • Adaptation des paddings, marges, tailles de police

2. Tailles tactiles

   • min-height: 44px pour tous les boutons (recommandation Apple/Google)
   • min-width: 44px pour les éléments interactifs
   • Boutons en width: 100% sur mobile

3. Gestion du clavier virtuel

   • font-size: 16px pour les inputs (évite le zoom automatique iOS)
   • scroll-margin-top: 100px pour le focus des inputs
   • Adaptation des hauteurs d'iframe selon la taille d'écran

4. Optimisations tactiles

   • @media (hover: none) and (pointer: coarse) : détection tactile
   • Feedback visuel avec opacity et transform sur :active
   • Espacement suffisant entre les éléments interactifs

---

3. service-login-verify - Persistance NonceCache

3.1 Amélioration PersistentNonceCache

Fichier modifié : service-login-verify/src/persistentNonceCache.ts

Implémentations :

1. Persistance IndexedDB en arrière-plan

   • persistToIndexedDB(nonce, timestamp) : persiste en IndexedDB de manière asynchrone
   • Utilisation de localStorage comme stockage principal (synchrone, requis par l'interface)
   • IndexedDB utilisé comme backup persistant

2. Nettoyage IndexedDB

   • cleanupIndexedDB(now) : supprime les entrées expirées depuis IndexedDB
   • Utilisation de l'index timestamp pour les requêtes efficaces
   • Nettoyage asynchrone non-bloquant

3. Double persistance

   • localStorage : accès synchrone (requis par NonceCacheLike)
   • IndexedDB : persistance entre sessions (backup)
   • Les deux sont maintenus en synchronisation

Note : PersistentNonceCache est déjà disponible et peut être utilisé à la place de NonceCache dans website-skeleton si persistance entre redémarrages nécessaire.

---

Synthèse des modifications

Fichiers modifiés

1. userwallet/src/services/relayNotificationService.ts :

   • Modèle pull-only (HTTP REST)
   • Optimisations mobile (backoff, reconnexions)
   • Gestion réseau online/offline

2. userwallet/src/hooks/useRelayNotifications.ts :

   • Polling HTTP REST automatique
   • Gestion du cycle de vie

3. userwallet/src/index.css :

   • Media queries responsive
   • Tailles tactiles
   • Gestion clavier virtuel

4. service-login-verify/src/persistentNonceCache.ts :

   • Persistance IndexedDB améliorée

---

Utilisation

userwallet - Activer les notifications

Le hook useRelayNotifications active le polling HTTP REST :

const { startPolling, stopPolling } = useRelayNotifications(graphResolver, true);
// Démarrer polling HTTP REST (pull-only)
startPolling(60000); // 60 secondes

service-login-verify - Utiliser PersistentNonceCache

Dans website-skeleton/src/main.ts :

import { PersistentNonceCache } from 'service-login-verify';

const nonceCache = new PersistentNonceCache(3600000);
await nonceCache.init(); // Initialiser IndexedDB

---

Notes importantes

• Modèle pull-only : Le système utilise uniquement des appels HTTP REST (GET). Les WebSockets ne sont pas souhaités selon la documentation (userwallet/features/userwallet-notifications-relais.md).
• Persistance NonceCache : PersistentNonceCache utilise localStorage comme stockage principal (synchrone) et IndexedDB en arrière-plan (asynchrone).
• Backoff : Limité à 5 tentatives maximum avec délai exponentiel jusqu'à 60 secondes.
• Mobile : Les optimisations réduisent les appels réseau et gèrent les reconnexions automatiquement.

---

Références

• features/login-bout-en-bout-reste-a-faire.md : Liste initiale des éléments à implémenter
• userwallet/src/services/relayNotificationService.ts : Service de notifications
• service-login-verify/src/persistentNonceCache.ts : Cache persistant