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>
This commit is contained in:
Dan Milne
2026-03-05 23:11:43 +11:00
parent c5898bd9a4
commit f65df76d99
2 changed files with 3 additions and 2 deletions

View File

@@ -316,7 +316,7 @@ export default class extends Controller {
return "This authenticator has already been registered."; return "This authenticator has already been registered.";
} }
// Fallback to error message // Fallback to a user-friendly message
return error.message || "An unexpected error occurred"; return "Passkey authentication failed. A browser extension may be interfering — try using your password instead.";
} }
} }

View File

@@ -38,6 +38,7 @@
</svg> </svg>
Continue with Passkey Continue with Passkey
</button> </button>
<div data-webauthn-target="error" class="mt-2 text-sm text-red-600" style="display: none;"></div>
</div> </div>
<!-- Password section - shown by default, hidden if WebAuthn is required --> <!-- Password section - shown by default, hidden if WebAuthn is required -->