feat(account): show specific error when passkey already registered (#8149)

Handle WebAuthn error codes in passkey binding flow to show more
specific error messages instead of generic "Failed to create" message.

- Show "passkey already registered" error when authenticator is
  already registered to the account
- Silently handle user cancellation (ERROR_CEREMONY_ABORTED)

Author: wangsijie

packages/account/src/pages/PasskeyBinding/index.tsx

@@ -1,7 +1,7 @@
 import Button from '@experience/shared/components/Button';
 import { AccountCenterControlValue, MfaFactor, type Mfa } from '@logto/schemas';
 import { trySafe } from '@silverhand/essentials';
-import { browserSupportsWebAuthn, startRegistration } from '@simplewebauthn/browser';
+import { browserSupportsWebAuthn, startRegistration, WebAuthnError } from '@simplewebauthn/browser';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -84,6 +84,23 @@ const PasskeyBinding = () => {
       async () => startRegistration(registrationOptions),
       (error) => {
         console.error('WebAuthn registration failed:', error);
+
+        if (error instanceof WebAuthnError) {
+          switch (error.code) {
+            case 'ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED': {
+              setToast(t('account_center.mfa.passkey_already_registered'));
+              return;
+            }
+            case 'ERROR_CEREMONY_ABORTED': {
+              // User cancelled the operation, no need to show error
+              return;
+            }
+            default: {
+              break;
+            }
+          }
+        }
+
         setToast(t('mfa.webauthn_failed_to_create'));
       }
     );

packages/phrases-experience/src/locales/ar/account-center.ts

@@ -100,6 +100,8 @@ const account_center = {
     backup_code_not_enabled: 'رمز النسخ الاحتياطي غير ممكّن. يرجى الاتصال بالمسؤول لتمكينه.',
     backup_code_requires_other_mfa: 'تتطلب رموز النسخ الاحتياطي إعداد طريقة MFA أخرى أولاً.',
     passkey_not_enabled: 'مفتاح المرور غير مفعّل. يرجى التواصل مع المسؤول لتفعيله.',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/de/account-center.ts

@@ -117,6 +117,8 @@ const account_center = {
       'Für Backup-Codes muss zuerst eine andere MFA-Methode eingerichtet werden.',
     passkey_not_enabled:
       'Passkey ist nicht aktiviert. Bitte kontaktieren Sie Ihren Administrator, um es zu aktivieren.',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/en/account-center.ts

@@ -108,6 +108,8 @@ const account_center = {
       'Backup code is not enabled. Please contact your administrator to enable it.',
     backup_code_requires_other_mfa: 'Backup codes require another MFA method to be set up first.',
     passkey_not_enabled: 'Passkey is not enabled. Please contact your administrator to enable it.',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/es/account-center.ts

@@ -113,6 +113,8 @@ const account_center = {
       'Los códigos de respaldo requieren que se configure otro método MFA primero.',
     passkey_not_enabled:
       'Passkey no está habilitado. Por favor, contacta a tu administrador para habilitarlo.',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/fr/account-center.ts

@@ -114,6 +114,8 @@ const account_center = {
       "Les codes de secours nécessitent qu'une autre méthode MFA soit d'abord configurée.",
     passkey_not_enabled:
       "Passkey n'est pas activé. Veuillez contacter votre administrateur pour l'activer.",
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/it/account-center.ts

@@ -112,6 +112,8 @@ const account_center = {
     backup_code_requires_other_mfa:
       'I codici di backup richiedono che venga prima configurato un altro metodo MFA.',
     passkey_not_enabled: "Passkey non è abilitato. Contatta l'amministratore per abilitarlo.",
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/ja/account-center.ts

@@ -105,6 +105,8 @@ const account_center = {
     backup_code_requires_other_mfa:
       'バックアップコードを使用するには、まず他の MFA メソッドを設定する必要があります。',
     passkey_not_enabled: 'パスキーが有効になっていません。管理者に連絡して有効にしてください。',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/ko/account-center.ts

@@ -102,6 +102,8 @@ const account_center = {
       '백업 코드가 활성화되지 않았습니다. 관리자에게 문의하여 활성화하십시오.',
     backup_code_requires_other_mfa: '백업 코드를 사용하려면 다른 MFA 방법을 먼저 설정해야 합니다.',
     passkey_not_enabled: '패스키가 활성화되지 않았습니다. 관리자에게 문의하여 활성화하세요.',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {

packages/phrases-experience/src/locales/pl-pl/account-center.ts

@@ -108,6 +108,8 @@ const account_center = {
       'Kody zapasowe wymagają wcześniejszego skonfigurowania innej metody MFA.',
     passkey_not_enabled:
       'Passkey nie jest włączony. Skontaktuj się z administratorem, aby go włączyć.',
+    passkey_already_registered:
+      'This passkey is already registered to your account. Please use a different authenticator.',
   },
   update_success: {
     default: {