BE - WebAuthn & Passkeys Error messages helper function

Context

Currently we may not show human-friendly error messages when a problem happens while enabling 2FA, which leads to users not knowing what to do next. See example below:

FIGMA: https://www.figma.com/design/h8xsQafKqKr205RSsJU5Wk/Passkeys?node-id=2896-18631&m=dev

image.png

Goal of this issue

  • To pair back-end error messages with appropriate user-friendly messages (Will the user need to refresh the page? Try again? Try another browser? Did they miss a particular step during their authentication?).
  • Get tech writer's review on copy used and check if we can use the same content for different back-end errors.
  • Once tech writer is happy, update relevant Figma warning alerts.
  • Assign issue to relevant engineers and parent epic.

Proposed error messages

Adding WebAuthn

Image of alert layout for reference

image.png

Error Content
Generic errors Failed to add authentication method. Try again.
AuthenticatorDataVerificationError Failed to add authentication method. Try again.
ChallengeVerificationError Failed to verify WebAuthn challenge. Try again.
OriginVerificationError Unable to use this authentication method. Try a different authentication method.
RpIdVerificationError Failed to authenticate due to a configuration issue. Try again later or contact support.
TokenBindingVerificationError Failed to verify connection security. Try adding the authentication method again.
TypeVerificationError This authentication method is not supported. Use a different authentication method.
UserPresenceVerificationError Failed to authenticate. Verify your identity with your security key.
UserVerifiedVerificationError Failed to authenticate. Verify your identity with your device.

Adding a Passkey

Image of alert layout for reference

image.png

Error Content
Generic errors Failed to connect to your device. Try again.
AuthenticatorDataVerificationError Failed to add passkey. Try again.
ChallengeVerificationError Failed to verify WebAuthn challenge. Try again.
OriginVerificationError Unable to use this authentication method. Try a different authentication method.
RpIdVerificationError Failed to authenticate due to a configuration issue. Try again later or contact support.
TokenBindingVerificationError Failed to verify connection security. Try adding the authentication method again.
TypeVerificationError This authentication method is not supported. Use a different authentication method.
UserPresenceVerificationError Failed to authenticate. Verify your identity with your security key.
UserVerifiedVerificationError Failed to authenticate. Verify your identity with your device.
Edited by 🤖 GitLab Bot 🤖