Stop leaking raw WebAuthn error messages to users in passkey flows

[KaveeshaPiumini]

Problem

Passkey sign-in and registration surfaced the underlying browser WebAuthn error message directly to end users. For example, a cancelled or timed-out ceremony displayed:

Passkey authentication failed: The operation either timed out or was not allowed. See: https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client.

The ThunderIDRuntimeError user-facing message interpolated error.message from the raw DOMException, so raw browser/spec text (including a W3C spec URL) leaked into the UI.

Fix

Replace the interpolated user-facing message with a clean, stable message, and move the raw browser detail into the developer-info argument (4th param), where it stays available for logging/debugging without being shown to users.

Applied to every passkey ceremony that surfaced the raw message:

Package	Location
@thunderid/browser	handleWebAuthnAuthentication — default error branch
@thunderid/react	passkey.ts — registration and authentication
@thunderid/vue	passkey.ts — registration and authentication

Example (auth, @thunderid/browser):

- `Passkey authentication failed: ${error.message}`,
+ 'Passkey authentication failed. Please try again.',
  'browser-webauthn-general-error',
  'browser',
- `WebAuthn authentication failed with error: ${error.name}`,
+ `WebAuthn authentication failed with error: ${error.name}: ${error.message}`,

Verification

Before Fix

After Fix

Related Issues

• Wrap WebAuthn Library Errors into Internal System Error Codes thunderid#1647

Notes

This is the root cause of the raw passkey error observed in the ThunderID gate app (which consumes @thunderid/react).

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Improved passkey registration and authentication error messages with clearer, standardized guidance.
  • Error details now include both the error type and message, making failures easier to understand and troubleshoot.
  • Applied consistent error reporting across browser, React, and Vue integrations.

[coderabbitai]

📝 Walkthrough

Walkthrough

Generic WebAuthn and passkey error handling now reports standardized context together with both the error name and message across browser, React, and Vue utilities.

Changes

Error message handling

Layer / File(s)	Summary
Browser authentication fallback errors packages/browser/src/utils/handleWebAuthnAuthentication.ts	Unrecognized authentication errors now include both error.name and error.message in the runtime error detail.
React and Vue passkey error mappings packages/react/src/utils/passkey.ts, packages/vue/src/utils/passkey.ts	Generic registration and authentication failures use updated contextual messages and include both error fields while preserving existing codes and categories.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: brionmario

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the problem, fix, and verification, but it omits required template sections like Approach, Checklist, and Security checks.	Reformat the PR description to match the template and add the missing Approach, Related PRs, Checklist, and Security checks sections.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change: preventing raw WebAuthn errors from reaching users in passkey flows.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}