From f65df76d99dbc8a9a1a53894c46cbb191db73866 Mon Sep 17 00:00:00 2001
From: Dan Milne <d@nmilne.com>
Date: Thu, 5 Mar 2026 23:11:43 +1100
Subject: [PATCH] Show user-friendly error when passkey authentication fails

Add error target to login page so WebAuthn errors are visible instead
of only appearing in the console. Use a helpful fallback message that
suggests a browser extension may be interfering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/javascript/controllers/webauthn_controller.js | 4 ++--
 app/views/sessions/new.html.erb                   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/webauthn_controller.js b/app/javascript/controllers/webauthn_controller.js
index 41b29bd..26fd7a0 100644
--- a/app/javascript/controllers/webauthn_controller.js
+++ b/app/javascript/controllers/webauthn_controller.js
@@ -316,7 +316,7 @@ export default class extends Controller {
       return "This authenticator has already been registered.";
     }
 
-    // Fallback to error message
-    return error.message || "An unexpected error occurred";
+    // Fallback to a user-friendly message
+    return "Passkey authentication failed. A browser extension may be interfering — try using your password instead.";
   }
 }
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index f345ce4..124780f 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -38,6 +38,7 @@
         </svg>
         Continue with Passkey
       </button>
+      <div data-webauthn-target="error" class="mt-2 text-sm text-red-600" style="display: none;"></div>
     </div>
 
     <!-- Password section - shown by default, hidden if WebAuthn is required -->