fix: Déclencher WebAuthn directement lors du clic utilisateur

- Déplacer l'appel WebAuthn dans le gestionnaire de clic direct
- Ajouter logs de debugging pour WebAuthn availability
- Éviter les appels WebAuthn asynchrones qui ne sont pas considérés comme user gesture
- Améliorer les messages d'interface pour l'authentification
- Supprimer l'appel WebAuthn dupliqué dans prepareAndSendPairingTx

src/services/secure-credentials.service.ts

@@ -108,11 +108,25 @@ export class SecureCredentialsService {
       const isSecureContext = window.isSecureContext;
       const hasWebAuthn = navigator.credentials && navigator.credentials.create;
       
+      secureLogger.info('WebAuthn availability check', {
+        component: 'SecureCredentialsService',
+        operation: 'webauthn_check',
+        isSecureContext,
+        hasWebAuthn,
+        userAgent: navigator.userAgent,
+        protocol: window.location.protocol
+      });
+      
       let credential = null;
       
       if (isSecureContext && hasWebAuthn) {
         // Stocker dans les credentials du navigateur (HTTPS requis)
         try {
+          secureLogger.info('Attempting to create WebAuthn credential', {
+            component: 'SecureCredentialsService',
+            operation: 'webauthn_create_attempt'
+          });
+          
           credential = await navigator.credentials.create({
             publicKey: {
               challenge: new Uint8Array(32),
@@ -134,7 +148,7 @@ export class SecureCredentialsService {
               attestation: 'direct'
             }
           });
-          
+
           secureLogger.info('WebAuthn credential created successfully', {
             component: 'SecureCredentialsService',
             operation: 'webauthn_create'

src/utils/sp-address.utils.ts

@@ -2533,6 +2533,20 @@ async function onCreateButtonClick() {
       console.log(`🔍 Creator flow detected`);
       updateCreatorStatus('Creating pairing process...');
 
+      // Initialize WebAuthn credentials immediately on user click
+      try {
+        const { secureCredentialsService } = await import('../services/secure-credentials.service');
+        updateCreatorStatus('🔐 Requesting browser authentication...');
+        
+        // This should trigger the browser popup immediately
+        const credentials = await secureCredentialsService.generateSecureCredentials('4nk-pairing-password');
+        console.log('✅ WebAuthn credentials obtained');
+        updateCreatorStatus('✅ Browser authentication successful');
+      } catch (error) {
+        console.warn('⚠️ WebAuthn failed, continuing with fallback:', error);
+        updateCreatorStatus('⚠️ Using fallback authentication');
+      }
+
       await prepareAndSendPairingTx();
       updateCreatorStatus('Pairing process created! Generating 4 words...');
 
@@ -2700,30 +2714,7 @@ export async function prepareAndSendPairingTx(): Promise<void> {
     // Update UI with creator address
     updateCreatorStatus(`Creator address: ${creatorAddress}`);
 
-    // Initialize secure credentials with PBKDF2 and browser credentials
-    try {
-      const { secureCredentialsService } = await import('../services/secure-credentials.service');
-      
-      // Check if we're in a secure context (HTTPS)
-      if (window.isSecureContext) {
-        updateCreatorStatus('🔐 Initializing secure credentials with browser...');
-      } else {
-        updateCreatorStatus('🔐 Initializing secure credentials (HTTP mode - WebAuthn not available)...');
-      }
-      
-      // This will trigger the browser popup for WebAuthn (only in HTTPS)
-      const credentials = await secureCredentialsService.generateSecureCredentials('4nk-pairing-password');
-      console.log('✅ Secure credentials initialized with PBKDF2 and WebAuthn');
-      
-      if (window.isSecureContext) {
-        updateCreatorStatus('✅ Secure credentials ready (WebAuthn enabled)');
-      } else {
-        updateCreatorStatus('✅ Secure credentials ready (fallback mode - use HTTPS for WebAuthn)');
-      }
-    } catch (error) {
-      console.warn('⚠️ Secure credentials initialization failed:', error);
-      updateCreatorStatus('⚠️ Using fallback credentials');
-    }
+    // Secure credentials already initialized in the click handler
 
     // Create pairing process with creator's address
     const createPairingProcessReturn = await service.createPairingProcess(