4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore automatic WebAuthn authentication without manual button

Browse Source 
**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
This commit is contained in:
NicolasCantu 2025-10-23 22:04:08 +02:00
parent 9b3af0b5ea
commit 535bcf5314
1 changed files with 33 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/home/home.ts
View File

@ -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);