fix(clerk-js,ui): clean up abandoned passkey registrations

.changeset/localize-too-many-unverified-identifications.md

@@ -0,0 +1,6 @@
+---
+'@clerk/localizations': patch
+'@clerk/shared': patch
+---
+
+Add a localized message for the `too_many_unverified_identifications` error, shown when adding an email address or phone number is blocked by pending verifications or an incomplete passkey setup.

.changeset/passkey-abandoned-registration-cleanup.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Fix abandoned passkey registrations counting toward the limit on unverified identifications. Cancelling or failing the browser passkey prompt left a pending registration on the account that is hidden from the user's passkey list, so it could silently block adding an email address or phone number until it expired. The pending registration is now removed as soon as the prompt is abandoned. In `<UserProfile />`, the "Add a passkey" button also shows a loading state while a registration is in progress, and a failed attempt no longer leaves its error banner on screen after a later attempt succeeds.

packages/clerk-js/src/core/resources/Passkey.ts

@@ -13,6 +13,7 @@ import type {
   PublicKeyCredentialWithAuthenticatorAttestationResponse,
   UpdatePasskeyParams,
 } from '@clerk/shared/types';
+import { noop } from '@clerk/shared/utils';
 import {
   isWebAuthnPlatformAuthenticatorSupported as isWebAuthnPlatformAuthenticatorSupportedOnWindow,
   isWebAuthnSupported as isWebAuthnSupportedOnWindow,
@@ -78,32 +79,43 @@ export class Passkey extends BaseResource implements PasskeyResource {
 
     const passkey = await this.create();
 
-    const { verification } = passkey;
+    let publicKeyCredential: PublicKeyCredentialWithAuthenticatorAttestationResponse;
+    try {
+      const { verification } = passkey;
 
-    const publicKey = verification?.publicKey;
+      const publicKey = verification?.publicKey;
 
-    // This should never occur, just a fail-safe
-    if (!publicKey) {
-      clerkMissingWebAuthnPublicKeyOptions('create');
-    }
+      // This should never occur, just a fail-safe
+      if (!publicKey) {
+        clerkMissingWebAuthnPublicKeyOptions('create');
+      }
 
-    if (publicKey.authenticatorSelection?.authenticatorAttachment === 'platform') {
-      if (!(await isWebAuthnPlatformAuthenticatorSupported())) {
-        throw new ClerkWebAuthnError(
-          'Registration requires a platform authenticator but the device does not support it.',
-          {
-            code: 'passkey_pa_not_supported',
-          },
-        );
+      if (publicKey.authenticatorSelection?.authenticatorAttachment === 'platform') {
+        if (!(await isWebAuthnPlatformAuthenticatorSupported())) {
+          throw new ClerkWebAuthnError(
+            'Registration requires a platform authenticator but the device does not support it.',
+            {
+              code: 'passkey_pa_not_supported',
+            },
+          );
+        }
       }
-    }
 
-    // Invoke the WebAuthn create() method.
-    const { publicKeyCredential, error } = await webAuthnCreateCredential(publicKey);
+      // Invoke the WebAuthn create() method.
+      const credential = await webAuthnCreateCredential(publicKey);
 
-    if (!publicKeyCredential) {
+      if (!credential.publicKeyCredential) {
+        throw credential.error;
+      }
+
+      publicKeyCredential = credential.publicKeyCredential;
+    } catch (error) {
+      if (passkey.id) {
+        await passkey.delete().catch(noop);
+      }
       throw error;
     }
+
     return this.attemptVerification(passkey.id, publicKeyCredential);
   }
 

packages/clerk-js/src/core/resources/__tests__/Passkey.test.ts

@@ -0,0 +1,130 @@
+import { ClerkWebAuthnError } from '@clerk/shared/error';
+import type { PasskeyJSON } from '@clerk/shared/types';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { clerkMock } from '../../../test/core-fixtures';
+import { BaseResource, Passkey } from '../internal';
+
+const publicKeyOptions = (authenticatorAttachment?: 'platform' | 'cross-platform') => ({
+  rp: { id: 'clerk.com', name: 'Clerk' },
+  user: { id: 'dXNlcl8x', name: 'user@clerk.com', displayName: 'user' },
+  challenge: 'Y2hhbGxlbmdl',
+  pubKeyCredParams: [{ type: 'public-key', alg: -7 }],
+  ...(authenticatorAttachment ? { authenticatorSelection: { authenticatorAttachment } } : {}),
+});
+
+const passkeyJSON = (authenticatorAttachment?: 'platform' | 'cross-platform') =>
+  ({
+    object: 'passkey',
+    id: 'idn_passkey',
+    name: 'Chrome on macOS',
+    last_used_at: null,
+    created_at: 1717430400000,
+    updated_at: 1717430400000,
+    verification: {
+      object: 'verification',
+      id: 'ver_1',
+      status: 'unverified',
+      strategy: 'passkey',
+      nonce: JSON.stringify(publicKeyOptions(authenticatorAttachment)),
+      attempts: 0,
+      expire_at: 1717431000000,
+    },
+  }) as unknown as PasskeyJSON;
+
+const cancelledError = new ClerkWebAuthnError('Passkey registration was cancelled or timed out.', {
+  code: 'passkey_registration_cancelled',
+});
+
+const successfulCredential = {
+  type: 'public-key',
+  id: 'credential',
+  rawId: new ArrayBuffer(1),
+  authenticatorAttachment: 'platform',
+  response: {
+    clientDataJSON: new ArrayBuffer(1),
+    attestationObject: new ArrayBuffer(1),
+    getTransports: () => ['internal'],
+  },
+  getClientExtensionResults: () => ({}),
+};
+
+const setupClerk = (createPublicCredentials: () => Promise<any>, platformAuthenticatorSupported = true) => {
+  BaseResource.clerk = clerkMock({
+    __internal_isWebAuthnSupported: () => true,
+    __internal_isWebAuthnPlatformAuthenticatorSupported: () => Promise.resolve(platformAuthenticatorSupported),
+    __internal_createPublicCredentials: createPublicCredentials,
+  } as any) as any;
+};
+
+const deleteCall = { method: 'DELETE', path: '/me/passkeys/idn_passkey' };
+
+describe('Passkey', () => {
+  afterEach(() => {
+    BaseResource.clerk = null as any;
+    vi.restoreAllMocks();
+  });
+
+  describe('registerPasskey', () => {
+    it('deletes the pending passkey when the browser prompt is cancelled', async () => {
+      setupClerk(() => Promise.resolve({ publicKeyCredential: null, error: cancelledError }));
+      const fetchMock = vi.fn().mockResolvedValue({ response: passkeyJSON() });
+      (BaseResource as any)._fetch = fetchMock;
+
+      await expect(Passkey.registerPasskey()).rejects.toBe(cancelledError);
+
+      expect(fetchMock).toHaveBeenCalledWith(deleteCall);
+      expect(fetchMock).not.toHaveBeenCalledWith(
+        expect.objectContaining({ path: '/me/passkeys/idn_passkey/attempt_verification' }),
+      );
+    });
+
+    it('surfaces the original error when the cleanup itself fails', async () => {
+      setupClerk(() => Promise.resolve({ publicKeyCredential: null, error: cancelledError }));
+      const fetchMock = vi.fn().mockImplementation(({ method }) => {
+        if (method === 'DELETE') {
+          return Promise.reject(new Error('session_reverification_required'));
+        }
+        return Promise.resolve({ response: passkeyJSON() });
+      });
+      (BaseResource as any)._fetch = fetchMock;
+
+      await expect(Passkey.registerPasskey()).rejects.toBe(cancelledError);
+    });
+
+    it('deletes the pending passkey when the device lacks a platform authenticator', async () => {
+      const createPublicCredentials = vi.fn();
+      setupClerk(createPublicCredentials as any, false);
+      const fetchMock = vi.fn().mockResolvedValue({ response: passkeyJSON('platform') });
+      (BaseResource as any)._fetch = fetchMock;
+
+      await expect(Passkey.registerPasskey()).rejects.toMatchObject({ code: 'passkey_pa_not_supported' });
+
+      expect(createPublicCredentials).not.toHaveBeenCalled();
+      expect(fetchMock).toHaveBeenCalledWith(deleteCall);
+    });
+
+    it('does not attempt a delete when the created passkey has no id', async () => {
+      setupClerk(() => Promise.resolve({ publicKeyCredential: null, error: cancelledError }));
+      const fetchMock = vi.fn().mockResolvedValue(null);
+      (BaseResource as any)._fetch = fetchMock;
+
+      await expect(Passkey.registerPasskey()).rejects.toThrow();
+
+      expect(fetchMock).not.toHaveBeenCalledWith(expect.objectContaining({ method: 'DELETE' }));
+    });
+
+    it('does not delete anything when registration succeeds', async () => {
+      setupClerk(() => Promise.resolve({ publicKeyCredential: successfulCredential, error: null }));
+      const fetchMock = vi.fn().mockResolvedValue({ response: passkeyJSON() });
+      (BaseResource as any)._fetch = fetchMock;
+
+      await Passkey.registerPasskey();
+
+      expect(fetchMock).toHaveBeenCalledWith(
+        expect.objectContaining({ method: 'POST', path: '/me/passkeys/idn_passkey/attempt_verification' }),
+      );
+      expect(fetchMock).not.toHaveBeenCalledWith(expect.objectContaining({ method: 'DELETE' }));
+    });
+  });
+});

packages/localizations/src/ar-SA.ts

@@ -2100,6 +2100,7 @@ export const arSA: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'لقد رفضت طلب التوقيع. يرجى المحاولة مرة أخرى للمتابعة.',
     web3_solana_signature_generation_failed: 'حدث خطأ أثناء إنشاء التوقيع. يرجى المحاولة مرة أخرى للمتابعة.',

packages/localizations/src/be-BY.ts

@@ -2111,6 +2111,7 @@ export const beBY: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'Вы адхілілі запыт на подпіс. Калі ласка, паспрабуйце яшчэ раз, каб працягнуць.',
     web3_solana_signature_generation_failed:

packages/localizations/src/bg-BG.ts

@@ -2104,6 +2104,7 @@ export const bgBG: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'Отхвърлихте заявката за подпис. Моля, опитайте отново, за да продължите.',
     web3_solana_signature_generation_failed:

packages/localizations/src/bn-IN.ts

@@ -2129,6 +2129,7 @@ export const bnIN: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'একটি Web3 ওয়ালেট এক্সটেনশন পাওয়া যায়নি। চালিয়ে যেতে দয়া করে একটি ইনস্টল করুন।',
     web3_signature_request_rejected:
       'আপনি সিগনেচার অনুরোধটি প্রত্যাখ্যান করেছেন। চালিয়ে যেতে অনুগ্রহ করে আবার চেষ্টা করুন।',

packages/localizations/src/ca-ES.ts

@@ -2117,6 +2117,7 @@ export const caES: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'Has rebutjat la sol·licitud de signatura. Torna-ho a provar per continuar.',
     web3_solana_signature_generation_failed:

packages/localizations/src/cs-CZ.ts

@@ -2116,6 +2116,7 @@ export const csCZ: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'Rozšíření peněženky Web3 nebylo nalezeno. Pro pokračování prosím nainstalujte jednu.',
     web3_signature_request_rejected: 'Odmítli jste žádost o podpis. Chcete-li pokračovat, zkuste to prosím znovu.',
     web3_solana_signature_generation_failed:

packages/localizations/src/da-DK.ts

@@ -2101,6 +2101,7 @@ export const daDK: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'Du har afvist signaturanmodningen. Prøv igen for at fortsætte.',
     web3_solana_signature_generation_failed:

packages/localizations/src/de-DE.ts

@@ -2134,6 +2134,7 @@ export const deDE: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier:
       'Eine Web3 Wallet-Erweiterung wurde nicht gefunden. Bitte installieren Sie eine, um fortzufahren.',
     web3_signature_request_rejected:

packages/localizations/src/el-GR.ts

@@ -2125,6 +2125,7 @@ export const elGR: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'Δεν εντοπίστηκε αναγνωριστικό Web3. Παρακαλώ δοκιμάστε ξανά.',
     web3_signature_request_rejected: 'Απορρίψατε το αίτημα υπογραφής. Δοκιμάστε ξανά για να συνεχίσετε.',
     web3_solana_signature_generation_failed:

packages/localizations/src/en-GB.ts

@@ -2108,6 +2108,7 @@ export const enGB: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'You have rejected the signature request. Please try again to continue.',
     web3_solana_signature_generation_failed:

packages/localizations/src/en-US.ts

@@ -2166,6 +2166,8 @@ export const enUS: LocalizationResource = {
     ticket_expired_code: 'This link has expired. Please start again or request a new link.',
     ticket_invalid_code:
       'This link is no longer valid or has already been used. Please start again or request a new link.',
+    too_many_unverified_identifications:
+      'Too many verifications are pending on this account. Remove an unverified email address, phone number, or wallet you no longer need, or wait a few minutes for an incomplete passkey setup to expire, then try again.',
     web3_missing_identifier: 'A Web3 Wallet extension cannot be found. Please install one to continue.',
     web3_signature_request_rejected: 'You have rejected the signature request. Please try again to continue.',
     web3_solana_signature_generation_failed:

packages/localizations/src/es-CR.ts

@@ -2116,6 +2116,7 @@ export const esCR: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'No se puede encontrar la extension de la billetera Web3. Instala una para continuar',
     web3_signature_request_rejected: 'Has rechazado la solicitud de firma. Inténtalo de nuevo para continuar.',
     web3_solana_signature_generation_failed:

packages/localizations/src/es-ES.ts

@@ -2117,6 +2117,7 @@ export const esES: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'Has rechazado la solicitud de firma. Inténtalo de nuevo para continuar.',
     web3_solana_signature_generation_failed:

packages/localizations/src/es-MX.ts

@@ -2117,6 +2117,7 @@ export const esMX: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'No se puede encontrar la extension de la billetera Web3. Instala una para continuar',
     web3_signature_request_rejected: 'Has rechazado la solicitud de firma. Inténtalo de nuevo para continuar.',
     web3_solana_signature_generation_failed:

packages/localizations/src/es-UY.ts

@@ -2118,6 +2118,7 @@ export const esUY: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'No se encontró una extensión de cartera Web3. Por favor, instalá una para continuar.',
     web3_signature_request_rejected: 'Has rechazado la solicitud de firma. Inténtalo de nuevo para continuar.',
     web3_solana_signature_generation_failed:

packages/localizations/src/fa-IR.ts

@@ -2115,6 +2115,7 @@ export const faIR: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'افزونه‌ی کیف پول وب۳ پیدا نشد. برای ادامه، لطفاً یکی نصب کنید.',
     web3_signature_request_rejected: 'درخواست امضا را رد کرده‌اید. برای ادامه دوباره تلاش کنید.',
     web3_solana_signature_generation_failed: 'هنگام ایجاد امضا خطایی رخ داد. برای ادامه دوباره تلاش کنید.',

packages/localizations/src/fi-FI.ts

@@ -2133,6 +2133,7 @@ export const fiFI: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'Web3-lompakkoa ei löytynyt. Asenna sellainen jatkaaksesi.',
     web3_signature_request_rejected: 'Hylkäsit allekirjoituspyynnön. Yritä uudelleen jatkaaksesi.',
     web3_solana_signature_generation_failed: 'Allekirjoitusta luotaessa tapahtui virhe. Yritä uudelleen jatkaaksesi.',

packages/localizations/src/fr-FR.ts

@@ -2126,6 +2126,7 @@ export const frFR: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'Aucune extension de portefeuille Web3 trouvée. Veuillez en installer une pour continuer.',
     web3_signature_request_rejected: 'Vous avez refusé la demande de signature. Veuillez réessayer pour continuer.',
     web3_solana_signature_generation_failed:

packages/localizations/src/he-IL.ts

@@ -2092,6 +2092,7 @@ export const heIL: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: undefined,
     web3_signature_request_rejected: 'דחית את בקשת החתימה. נסה/י שוב כדי להמשיך.',
     web3_solana_signature_generation_failed: 'אירעה שגיאה בעת יצירת החתימה. נסה/י שוב כדי להמשיך.',

packages/localizations/src/hi-IN.ts

@@ -2130,6 +2130,7 @@ export const hiIN: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'Web3 वॉलेट एक्सटेंशन नहीं मिल सका। जारी रखने के लिए कृपया एक इंस्टॉल करें।',
     web3_signature_request_rejected:
       'आपने सिग्नेचर अनुरोध अस्वीकार कर दिया है। जारी रखने के लिए कृपया फिर से प्रयास करें।',

packages/localizations/src/hr-HR.ts

@@ -2135,6 +2135,7 @@ export const hrHR: LocalizationResource = {
     sso_bypass_domain_not_served: undefined,
     ticket_expired_code: undefined,
     ticket_invalid_code: undefined,
+    too_many_unverified_identifications: undefined,
     web3_missing_identifier: 'Nije pronađeno proširenje za Web3 novčanik. Molimo instalirajte jedno za nastavak.',
     web3_signature_request_rejected: 'Odbili ste zahtjev za potpis. Pokušajte ponovno za nastavak.',
     web3_solana_signature_generation_failed: