anchorage_layer_simple/userwallet/features/login-site-iframe.md

Login Site with secp256k1 Authentication for Iframe Integration

Author: Équipe 4NK Date: 2026-01-25 Version: 2.0

État d'avancement

✅ Implémenté

1. Types TypeScript complets selon les spécifications :

   • MessageBase, Hash, Signature, EncryptionKeys, DataJson
   • MessageAValider, Validateurs, MembreRole, SignatureRequirement
   • MsgChiffre, MsgSignature, MsgCle
   • Service, Contrat, Champ, Action, ActionLogin, Membre, Pair
   • LocalIdentity, RelayConfig, PairConfig, ServiceStatus, LoginPath, LoginChallenge, LoginProof

2. Utilitaires cryptographiques :

   • Génération de paires de clés secp256k1
   • Signature et vérification de messages
   • Calcul de hash canonique (sans hash, signatures, clés)
   • Canonisation JSON

3. Utilitaires BIP32 :

   • Conversion UUID ↔ mots BIP32 pour le pairing
   • Génération d'UUID

4. Gestion des identités locales :

   • Création d'identité avec clés secp256k1
   • Import d'identité (structure de base)
   • Stockage LocalStorage
   • Hook useIdentity

5. Gestion des relais :

   • Configuration et stockage des relais
   • Test de connectivité
   • GET messages chiffrés, signatures, clés
   • POST message, signatures, clés

6. Gestion du pairing :

   • Création de pair local avec mots BIP32
   • Ajout de pair distant depuis mots BIP32
   • Vérification du statut de pairing
   • Stockage LocalStorage

7. Écran d'accueil :

   • Affichage du statut de l'identité
   • Affichage du statut de pairing
   • Affichage du statut réseau
   • Navigation vers les autres écrans

8. Structure de navigation :

   • React Router configuré
   • Routes de base pour tous les écrans

✅ Implémenté (suite)

9. Résolution du graphe contractuel :

   • Service GraphResolver pour résoudre Service → Contrat → Champ → Action → Membre → Pair
   • Vérification des contraintes "au moins 1 parent"
   • Calcul des validateurs et signatures requises
   • Cache local du graphe

10. Construction et publication des messages de login :

    • Service LoginBuilder pour construire les challenges
    • Génération du nonce
    • Construction MessageBase avec datajson
    • Chiffrement du message (base64 pour l'instant)
    • Calcul du hash canonique
    • Publication en ordre strict : message → signatures → clés

11. Synchronisation :

    • Service SyncService pour synchroniser depuis les relais
    • Déduplication par hash
    • Fetch séparé des signatures et clés
    • Mise à jour du graphe local
    • Compteurs de statistiques

12. Écrans complets :

    • Écran d'accueil avec statuts
    • Création d'identité locale
    • Import d'identité
    • Gestion des relais (liste, ajout, test, activation/désactivation)
    • Gestion des pairs (liste, ajout local avec mots BIP32, ajout distant)
    • Synchronisation globale
    • Écran de login (construction du chemin, challenge, publication)

✅ Améliorations récentes

13. Chiffrement réel :

    • Remplacement du base64 par AES-GCM
    • Support ECDH pour le partage de clés
    • Fonctions encryptWithECDH / decryptWithECDH pour chiffrement point-à-point
    • Fonctions encryptForAll / decryptForAll pour publication "pour tous"

14. Vérification locale avancée :

    • Service verification.ts avec vérification du hash canonique
    • Vérification des signatures secp256k1
    • Cache de nonces pour anti-rejeu (NonceCache)
    • Vérification des timestamps dans une fenêtre acceptable
    • Intégration dans SyncService pour validation automatique

15. Gestion des erreurs :

    • Hook useErrorHandler pour gestion centralisée
    • Composant ErrorDisplay pour affichage utilisateur
    • Messages d'erreur contextuels avec codes
    • Détails techniques disponibles en mode développeur
    • Intégration dans tous les écrans principaux

✅ Nouvelles fonctionnalités

16. Communication iframe Channel Messages :

    • Utilitaires iframeChannel.ts pour communication bidirectionnelle
    • Hook useChannel pour écouter et envoyer des messages
    • Support des messages : auth-request, auth-response, login-proof, service-status, error
    • Intégration automatique dans l'application principale
    • Envoi automatique de la preuve de login au parent

17. Cache persistant des hash :

    • Classe HashCache pour éviter le rescan des messages déjà vus
    • Persistance dans LocalStorage
    • Pruning automatique si le cache devient trop volumineux (>10000 entrées)
    • Intégration dans SyncService pour optimisation

18. Écran de liste des services :

    • Affichage des services découverts via synchronisation
    • Statut de contrat (complet/incomplet, valide/invalide)
    • Sélection directe d'un service pour login
    • Navigation depuis l'écran d'accueil

19. Améliorations UX :

    • Support des paramètres URL pour pré-remplir le service dans le login
    • Meilleure intégration entre écrans
    • Feedback visuel amélioré

🚧 À améliorer/optimiser

1. Optimisations avancées :

   • Bloom filter pour éviter le rescan à grande échelle
   • Arbres de Merkle (optionnel) pour synchronisation efficace
   • Compression des données en cache

2. Fonctionnalités iframe :

   • Support de l'activation/désactivation de services depuis l'iframe
   • Gestion des événements de login depuis le parent

3. Gestion des erreurs avancée :

   • Retry automatique pour les publications
   • Gestion des timeouts réseau avec backoff exponentiel
   • Queue de publication pour gérer les échecs

4. UI/UX supplémentaires :

   • Indicateurs de progression pour les opérations longues
   • Animations de transition
   • Mode sombre/clair
   • Internationalisation (i18n)

Objectif

Créer un site de login avec authentification basée sur des clés secp256k1, conçu pour être intégré en iframe par Channel Messages. Le site permet d'activer ou désactiver le login sur des services depuis une identité numérique à base de clé secp256k1.

Impacts

Fonctionnels

• Authentification sécurisée via signature de challenges avec clés secp256k1
• Communication bidirectionnelle avec le parent via postMessage
• Gestion de l'activation/désactivation du login par service
• Génération et stockage sécurisé des paires de clés
• Interface utilisateur accessible et responsive

Techniques

• Nouveau projet React + TypeScript avec Vite
• Utilisation de @noble/secp256k1 pour la cryptographie
• Stockage local des clés et configuration via LocalStorage
• Architecture modulaire avec séparation des responsabilités
• Support iframe avec détection automatique du contexte

Sécurité

• Clés privées stockées localement (LocalStorage)
• Signature de challenges pour l'authentification
• Communication iframe sécurisée via postMessage
• Pas de transmission de clés privées

Modifications

Structure du projet

userwallet/
├── src/
│   ├── components/
│   │   ├── LoginForm.tsx          # Formulaire de connexion
│   │   └── ServiceList.tsx        # Liste des services avec toggles
│   ├── hooks/
│   │   ├── useAuth.ts             # Hook d'authentification
│   │   └── useServices.ts          # Hook de gestion des services
│   ├── types/
│   │   └── auth.ts                 # Types TypeScript pour l'auth
│   ├── utils/
│   │   ├── crypto.ts              # Fonctions cryptographiques secp256k1
│   │   ├── iframe.ts              # Communication iframe
│   │   └── storage.ts             # Gestion LocalStorage
│   ├── App.tsx                    # Composant principal
│   ├── main.tsx                   # Point d'entrée
│   └── index.css                  # Styles globaux
├── package.json
├── tsconfig.json
├── vite.config.ts
└── eslint.config.mjs

Fonctionnalités implémentées

1. Authentification secp256k1

   • Génération de paires de clés au premier chargement
   • Signature de challenges pour l'authentification
   • Vérification de signatures (pour usage futur)

2. Communication iframe

   • Détection automatique du contexte iframe
   • Messages postMessage vers le parent
   • Support des messages : auth-request, auth-response, service-toggle, service-status

3. Gestion des services

   • Stockage de la configuration des services
   • Activation/désactivation par service
   • Synchronisation avec le parent via messages

4. Interface utilisateur

   • Formulaire de connexion
   • Liste des services avec toggles
   • Affichage de la clé publique (tronquée)
   • Design responsive avec support dark mode

Types de messages iframe

auth-request

Demande d'authentification depuis le parent.

{
  type: 'auth-request',
  payload: {
    serviceId: string
  }
}

auth-response

Réponse avec signature.

{
  type: 'auth-response',
  payload: {
    signature: string,
    publicKey: string,
    message: string
  }
}

service-toggle

Activation/désactivation d'un service.

{
  type: 'service-toggle',
  payload: {
    serviceId: string,
    enabled: boolean
  }
}

service-status

Envoi du statut des services.

{
  type: 'service-status',
  payload: {
    services: ServiceConfig[]
  }
}

Modalités de déploiement

Prérequis

• Node.js 18+
• npm ou yarn

Installation

npm install

Développement

npm run dev

Le site sera accessible sur http://localhost:3007

Build de production

npm run build

Les fichiers de production seront générés dans dist/

Déploiement

Le site doit être déployé sur un serveur web accessible via HTTPS pour être utilisé en iframe. Le port configuré est 3007 (configurable dans vite.config.ts).

Configuration

• Port : Modifiable dans vite.config.ts (défaut: 3007)
• Stockage : LocalStorage (clés: userwallet_keypair, userwallet_services)
• Origine iframe : Le site accepte les messages de n'importe quelle origine (*). Pour la production, restreindre à l'origine du parent.

Modalités d'analyse

Vérification du fonctionnement

1. Test en standalone

   • Ouvrir http://localhost:3007
   • Vérifier la génération automatique d'une paire de clés
   • Tester le formulaire de connexion
   • Vérifier l'affichage de la clé publique

2. Test en iframe

   • Intégrer dans une page parent avec <iframe src="http://localhost:3007"></iframe>
   • Envoyer un message auth-request depuis le parent
   • Vérifier la réception du message auth-response
   • Tester l'activation/désactivation de services

3. Vérification des messages

   • Ouvrir la console du navigateur
   • Vérifier l'absence d'erreurs
   • Vérifier l'envoi des messages postMessage

Logs et debugging

• Les erreurs sont loggées dans la console avec console.error
• Les avertissements (ex: pas en iframe) utilisent console.warn
• Utiliser les DevTools pour inspecter les messages postMessage

Tests de sécurité

• Vérifier que les clés privées ne sont jamais transmises
• Vérifier que les signatures sont valides
• Tester la vérification de signatures avec verifySignature()

Évolutions futures possibles

• Restriction de l'origine du parent pour la sécurité
• Support de plusieurs identités/utilisateurs
• Export/import de clés
• Chiffrement des clés privées avec mot de passe
• Intégration avec un backend pour la validation
• Support de protocoles d'authentification supplémentaires