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.

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

#### `auth-response`
Réponse avec signature.

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

#### `service-toggle`
Activation/désactivation d'un service.

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

#### `service-status`
Envoi du statut des services.

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

## Modalités de déploiement

### Prérequis

- Node.js 18+
- npm ou yarn

### Installation

```bash
npm install
```

### Développement

```bash
npm run dev
```

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

### Build de production

```bash
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