fix(webauthn): harden WebAuthn JS and add production config

Address code review findings across the WebAuthn/Passkey implementation:

- Add WebAuthn production config override in application-prd.yml with
  env-var-driven rpId, rpName, and allowedOrigins
- Cache Bootstrap Modal instance instead of creating per renamePasskey call
- Replace raw error.message with user-friendly messages in all user-facing
  error handlers (login.js, webauthn-manage.js)
- Improve error response parsing in authenticate/register to try JSON
  first with text fallback
- Add safe formatDate() helper to handle null/invalid date values
- Replace global window.renamePasskey/deletePasskey with event delegation
  on the credential list container using data attributes

Author: devondragon

src/main/resources/application-prd.yml

@@ -37,5 +37,9 @@ management:
       show-details: never # Don't expose detailed health info in production
 
 user:
+  webauthn:
+    rpId: ${WEBAUTHN_RP_ID:example.com}
+    rpName: ${WEBAUTHN_RP_NAME:Spring User Framework Demo}
+    allowedOrigins: ${WEBAUTHN_ALLOWED_ORIGINS:https://example.com}
   security:
     disableCSRFdURIs: # No CSRF disabled URIs in production for better security

src/main/resources/static/js/user/login.js

@@ -27,7 +27,7 @@ document.addEventListener("DOMContentLoaded", () => {
 				window.location.href = redirectUrl;
 			} catch (error) {
 				console.error("Passkey authentication failed:", error);
-				showMessage(null, "Passkey authentication failed: " + error.message, "alert-danger");
+				showMessage(null, "Passkey authentication failed. Please try again.", "alert-danger");
 				passkeyBtn.disabled = false;
 				passkeyBtn.innerHTML = '<i class="bi bi-key me-2"></i> Sign in with Passkey';
 			}

src/main/resources/static/js/user/webauthn-authenticate.js

@@ -73,8 +73,15 @@ export async function authenticateWithPasskey() {
     });
 
     if (!finishResponse.ok) {
-        const error = await finishResponse.text();
-        throw new Error(error || 'Authentication failed');
+        let msg = 'Authentication failed';
+        try {
+            const data = await finishResponse.json();
+            msg = data.message || msg;
+        } catch {
+            const text = await finishResponse.text();
+            if (text) msg = text;
+        }
+        throw new Error(msg);
     }
 
     // Spring Security returns { authenticated: true, redirectUrl: "..." }

src/main/resources/static/js/user/webauthn-manage.js

@@ -7,6 +7,7 @@ import { showMessage } from '/js/shared.js';
 
 const csrfHeader = getCsrfHeaderName();
 const csrfToken = getCsrfToken();
+let renameModalInstance;
 
 /**
  * Load and display user's passkeys.
@@ -35,6 +36,15 @@ export async function loadPasskeys() {
     }
 }
 
+/**
+ * Format a date string safely, returning 'Unknown' for invalid values.
+ */
+function formatDate(dateStr) {
+    if (!dateStr) return 'Unknown';
+    const date = new Date(dateStr);
+    return isNaN(date) ? 'Unknown' : date.toLocaleDateString();
+}
+
 /**
  * Display credentials in UI.
  */
@@ -51,19 +61,19 @@ function displayCredentials(container, credentials) {
                     <strong class="d-inline-block text-truncate" style="max-width: 100%;">${escapeHtml(cred.label || 'Unnamed Passkey')}</strong>
                     <br>
                     <small class="text-muted">
-                        Created: ${new Date(cred.created).toLocaleDateString()}
-                        ${cred.lastUsed ? ' | Last used: ' + new Date(cred.lastUsed).toLocaleDateString() : ' | Never used'}
+                        Created: ${formatDate(cred.created)}
+                        ${cred.lastUsed ? ' | Last used: ' + formatDate(cred.lastUsed) : ' | Never used'}
                     </small>
                     <br>
                     ${cred.backupEligible
                         ? '<span class="badge bg-success">Synced</span>'
                         : '<span class="badge bg-warning text-dark">Device-bound</span>'}
                 </div>
                 <div class="flex-shrink-0">
-                    <button class="btn btn-sm btn-outline-secondary me-1" onclick="window.renamePasskey('${escapeHtml(cred.id)}', '${escapeHtml(cred.label || '')}')">
+                    <button class="btn btn-sm btn-outline-secondary me-1" data-action="rename" data-id="${escapeHtml(cred.id)}" data-label="${escapeHtml(cred.label || '')}">
                         <i class="bi bi-pencil"></i> Rename
                     </button>
-                    <button class="btn btn-sm btn-outline-danger" onclick="window.deletePasskey('${escapeHtml(cred.id)}')">
+                    <button class="btn btn-sm btn-outline-danger" data-action="delete" data-id="${escapeHtml(cred.id)}">
                         <i class="bi bi-trash"></i> Delete
                     </button>
                 </div>
@@ -87,9 +97,11 @@ function renamePasskey(credentialId, currentLabel) {
     errorEl.classList.add('d-none');
     input.classList.remove('is-invalid');
 
-    // Show modal
-    const modal = new bootstrap.Modal(document.getElementById('renamePasskeyModal'));
-    modal.show();
+    // Show modal (reuse cached instance)
+    if (!renameModalInstance) {
+        renameModalInstance = new bootstrap.Modal(document.getElementById('renamePasskeyModal'));
+    }
+    renameModalInstance.show();
 
     // Focus input when modal is shown
     document.getElementById('renamePasskeyModal').addEventListener('shown.bs.modal', () => {
@@ -145,7 +157,7 @@ function renamePasskey(credentialId, currentLabel) {
                 throw new Error(data.message || 'Failed to rename passkey');
             }
 
-            modal.hide();
+            renameModalInstance.hide();
             if (globalMessage) {
                 showMessage(globalMessage, 'Passkey renamed successfully.', 'alert-success');
             }
@@ -198,7 +210,7 @@ async function deletePasskey(credentialId) {
     } catch (error) {
         console.error('Failed to delete passkey:', error);
         if (globalMessage) {
-            showMessage(globalMessage, error.message, 'alert-danger');
+            showMessage(globalMessage, 'Failed to delete passkey. Please try again.', 'alert-danger');
         }
     }
 }
@@ -221,15 +233,11 @@ async function handleRegisterPasskey() {
     } catch (error) {
         console.error('Registration error:', error);
         if (globalMessage) {
-            showMessage(globalMessage, 'Failed to register passkey: ' + error.message, 'alert-danger');
+            showMessage(globalMessage, 'Failed to register passkey. Please try again.', 'alert-danger');
         }
     }
 }
 
-// Expose to global scope for onclick handlers in the credential list
-window.renamePasskey = renamePasskey;
-window.deletePasskey = deletePasskey;
-
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', async () => {
     const passkeySection = document.getElementById('passkey-section');
@@ -240,6 +248,22 @@ document.addEventListener('DOMContentLoaded', async () => {
         return;
     }
 
+    // Event delegation for credential list actions
+    const passkeysList = document.getElementById('passkeys-list');
+    if (passkeysList) {
+        passkeysList.addEventListener('click', (event) => {
+            const button = event.target.closest('button[data-action]');
+            if (!button) return;
+
+            const { action, id, label } = button.dataset;
+            if (action === 'rename') {
+                renamePasskey(id, label);
+            } else if (action === 'delete') {
+                deletePasskey(id);
+            }
+        });
+    }
+
     // Wire up register button
     const registerBtn = document.getElementById('registerPasskeyBtn');
     if (registerBtn) {

src/main/resources/static/js/user/webauthn-register.js

@@ -78,8 +78,15 @@ export async function registerPasskey(labelInput) {
     });
 
     if (!finishResponse.ok) {
-        const error = await finishResponse.text();
-        throw new Error(error || 'Registration failed');
+        let msg = 'Registration failed';
+        try {
+            const data = await finishResponse.json();
+            msg = data.message || msg;
+        } catch {
+            const text = await finishResponse.text();
+            if (text) msg = text;
+        }
+        throw new Error(msg);
     }
 
     return credential;