From 535bcf5314fb97fe62ba9095a76723a195fb220a Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Thu, 23 Oct 2025 22:04:08 +0200
Subject: [PATCH] fix: restore automatic WebAuthn authentication without manual
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Motivations :**
- Remove manual authentication button as requested by user
- Restore automatic WebAuthn triggering like before
- Maintain seamless user experience without manual intervention
- Keep WebAuthn security while ensuring automatic flow

**Modifications :**
- Removed manual authentication button and click handler
- Restored automatic WebAuthn triggering in handleMainPairing()
- Simplified authentication flow to be automatic on page load
- Maintained proper error handling and user feedback
- Kept spinner and status messages for user feedback

**Pages affectées :**
- src/pages/home/home.ts: Restored automatic WebAuthn authentication flow
---
 src/pages/home/home.ts | 119 ++++++++++++-----------------------------
 1 file changed, 33 insertions(+), 86 deletions(-)

diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index 151e500..d7ebf43 100755
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -547,101 +547,48 @@ async function handleMainPairing(): Promise<void> {
   const mainStatus = container.querySelector('#main-status') as HTMLElement;
 
   try {
-    // Show authentication button that requires user interaction
-    console.log('🔍 DEBUG: mainStatus element:', mainStatus);
+    // Update UI to show authentication in progress
     if (mainStatus) {
-      console.log('🔍 DEBUG: Setting up authentication button...');
-      mainStatus.innerHTML = `
-        <div class="auth-container" style="text-align: center; padding: 20px;">
-          <p style="font-size: 18px; margin-bottom: 20px; color: #333;">🔐 Secure authentication required</p>
-          <button id="authButton" class="auth-button" style="
-            background: linear-gradient(135deg, #007bff, #0056b3);
-            color: white;
-            border: none;
-            padding: 16px 32px;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 16px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
-            margin: 20px 0;
-            min-width: 250px;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-          ">🔐 Authenticate with Browser</button>
-          <p class="auth-hint" style="color: #6c757d; font-size: 14px; margin-top: 10px; font-style: italic;">Click the button above to authenticate with your browser</p>
-        </div>
-      `;
-      console.log('🔍 DEBUG: Authentication button HTML set');
-    } else {
-      console.error('❌ mainStatus element not found!');
-      throw new Error('Main status element not found');
+      mainStatus.innerHTML = '<div class="spinner"></div><span>Authenticating with browser...</span>';
     }
 
-    // Wait for user to click the authentication button
-    await new Promise<void>((resolve, reject) => {
-      console.log('🔍 DEBUG: Looking for authButton...');
-      const authButton = document.getElementById('authButton') as HTMLButtonElement;
-      console.log('🔍 DEBUG: authButton found:', authButton);
-      if (!authButton) {
-        console.error('❌ Authentication button not found in DOM');
-        reject(new Error('Authentication button not found'));
-        return;
+    // Always trigger WebAuthn flow for authentication
+    console.log('🔐 Triggering WebAuthn authentication...');
+
+    // Import and trigger WebAuthn directly
+    const { secureCredentialsService } = await import('../../services/secure-credentials.service');
+
+    // Check if we have existing credentials
+    const hasCredentials = await secureCredentialsService.hasCredentials();
+
+    if (hasCredentials) {
+      console.log('🔓 Existing credentials found, decrypting...');
+      if (mainStatus) {
+        mainStatus.innerHTML = '<div class="spinner"></div><span>Decrypting existing credentials...</span>';
       }
 
-      authButton.addEventListener('click', async () => {
-        try {
-          // Update UI to show authentication in progress
-          if (mainStatus) {
-            mainStatus.innerHTML = '<div class="spinner"></div><span>Authenticating with browser...</span>';
-          }
+      // This will trigger WebAuthn for decryption
+      await secureCredentialsService.retrieveCredentials('');
 
-          // Import and trigger WebAuthn directly
-          const { secureCredentialsService } = await import('../../services/secure-credentials.service');
+      if (mainStatus) {
+        mainStatus.innerHTML = '<span style="color: var(--success-color)">✅ Credentials decrypted successfully</span>';
+      }
+    } else {
+      console.log('🔐 No existing credentials, creating new ones...');
+      if (mainStatus) {
+        mainStatus.innerHTML = '<div class="spinner"></div><span>Creating new credentials...</span>';
+      }
 
-          // Check if we have existing credentials
-          const hasCredentials = await secureCredentialsService.hasCredentials();
+      // This will trigger WebAuthn for creation
+      await secureCredentialsService.generateSecureCredentials('');
 
-          if (hasCredentials) {
-            console.log('🔓 Existing credentials found, decrypting...');
-            if (mainStatus) {
-              mainStatus.innerHTML = '<div class="spinner"></div><span>Decrypting existing credentials...</span>';
-            }
+      if (mainStatus) {
+        mainStatus.innerHTML = '<span style="color: var(--success-color)">✅ New credentials created successfully</span>';
+      }
+    }
 
-            // This will trigger WebAuthn for decryption
-            await secureCredentialsService.retrieveCredentials('');
-
-            if (mainStatus) {
-              mainStatus.innerHTML = '<span style="color: var(--success-color)">✅ Credentials decrypted successfully</span>';
-            }
-          } else {
-            console.log('🔐 No existing credentials, creating new ones...');
-            if (mainStatus) {
-              mainStatus.innerHTML = '<div class="spinner"></div><span>Creating new credentials...</span>';
-            }
-
-            // This will trigger WebAuthn for creation
-            await secureCredentialsService.generateSecureCredentials('');
-
-            if (mainStatus) {
-              mainStatus.innerHTML = '<span style="color: var(--success-color)">✅ New credentials created successfully</span>';
-            }
-          }
-
-          // Now proceed with pairing process
-          await prepareAndSendPairingTx();
-          resolve();
-        } catch (error) {
-          console.error('Authentication failed:', error);
-          if (mainStatus) {
-            mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Authentication failed. Please try again.</span>';
-          }
-          reject(error);
-        }
-      });
-    });
+    // Now proceed with pairing process
+    await prepareAndSendPairingTx();
 
   } catch (error) {
     console.error('Pairing failed:', error);