fix(clerk-js): reuse pending passkey challenge across autofill calls

.changeset/passkey-pending-challenge.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reuse a pending passkey challenge when `authenticateWithPasskey` runs again with the `autofill` or `discoverable` flow, instead of creating a new sign-in attempt on every call. A sign-in form that mounts several times in a row no longer issues one `POST /v1/client/sign_ins` per mount.

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

@@ -110,6 +110,22 @@ import { BaseResource, UserData, Verification } from './internal';
 const isTerminalEmailLinkVerificationStatus = (status: string | null) =>
   status === 'verified' || status === 'expired' || status === 'transferable';
 
+/**
+ * True when `signIn` already holds a passkey challenge that no attempt has consumed and that has
+ * not expired. The sign-in form issues one passkey challenge per mount, so a remount would
+ * otherwise create a fresh sign-in attempt each time and trip the sign-in creation rate limit.
+ */
+function hasPendingPasskeyChallenge(signIn: SignIn): boolean {
+  const { strategy, nonce, status, expireAt } = signIn.firstFactorVerification;
+  return (
+    strategy === 'passkey' &&
+    !!nonce &&
+    (status === null || status === 'unverified') &&
+    !!expireAt &&
+    expireAt.getTime() > Date.now()
+  );
+}
+
 export class SignIn extends BaseResource implements SignInResource {
   pathRoot = '/client/sign_ins';
 
@@ -573,8 +589,10 @@ export class SignIn extends BaseResource implements SignInResource {
     }
 
     if (flow === 'autofill' || flow === 'discoverable') {
-      // @ts-ignore As this is experimental we want to support it at runtime, but not at the type level
-      await this.create({ strategy: 'passkey' });
+      if (!hasPendingPasskeyChallenge(this)) {
+        // @ts-ignore As this is experimental we want to support it at runtime, but not at the type level
+        await this.create({ strategy: 'passkey' });
+      }
     } else {
       // @ts-ignore As this is experimental we want to support it at runtime, but not at the type level
       const passKeyFactor = this.supportedFirstFactors.find(
@@ -1397,7 +1415,9 @@ class SignInFuture implements SignInFutureResource {
 
     return runAsyncResourceTask(this.#resource, async () => {
       if (flow === 'autofill' || flow === 'discoverable') {
-        await this._create({ strategy: 'passkey' });
+        if (!hasPendingPasskeyChallenge(this.#resource)) {
+          await this._create({ strategy: 'passkey' });
+        }
       } else {
         const passKeyFactor = this.supportedFirstFactors.find(f => f.strategy === 'passkey') as PasskeyFactor;
 

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

@@ -1855,6 +1855,90 @@ describe('SignIn', () => {
         expect(mockWebAuthnGetCredential).toHaveBeenCalled();
       });
 
+      describe('pending passkey challenge', () => {
+        const credential = {
+          id: 'credential_123',
+          rawId: new ArrayBuffer(32),
+          response: {
+            authenticatorData: new ArrayBuffer(37),
+            clientDataJSON: new ArrayBuffer(121),
+            signature: new ArrayBuffer(64),
+            userHandle: null,
+          },
+          type: 'public-key',
+        };
+
+        const createResponse = (expireAt: number) => ({
+          client: null,
+          response: {
+            id: 'signin_123',
+            first_factor_verification: {
+              strategy: 'passkey',
+              status: 'unverified',
+              nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }),
+              expire_at: expireAt,
+            },
+          },
+        });
+
+        const isCreate = (call: any[]) =>
+          call[0].path === '/client/sign_ins' && !('publicKeyCredential' in call[0].body);
+
+        const setup = (expireAt: number) => {
+          const mockWebAuthnGetCredential = vi
+            .fn()
+            .mockResolvedValueOnce({ publicKeyCredential: null, error: new Error('aborted') })
+            .mockResolvedValueOnce({ publicKeyCredential: credential, error: null });
+
+          SignIn.clerk = {
+            __internal_isWebAuthnSupported: vi.fn().mockReturnValue(true),
+            __internal_isWebAuthnAutofillSupported: vi.fn().mockResolvedValue(true),
+            __internal_getPublicCredentials: mockWebAuthnGetCredential,
+            __internal_environment: { displayConfig: { captchaOauthBypass: [] } },
+          } as any;
+
+          const mockFetch = vi
+            .fn()
+            .mockResolvedValueOnce(createResponse(expireAt))
+            .mockResolvedValueOnce(createResponse(expireAt))
+            .mockResolvedValueOnce({ client: null, response: { id: 'signin_123', status: 'complete' } });
+          BaseResource._fetch = mockFetch;
+          return mockFetch;
+        };
+
+        it('reuses the challenge when autofill runs again', async () => {
+          const mockFetch = setup(Date.now() + 60_000);
+          const signIn = new SignIn();
+
+          const first = await signIn.__internal_future.passkey({ flow: 'autofill' });
+          expect(first.error).not.toBeNull();
+          const second = await signIn.__internal_future.passkey({ flow: 'autofill' });
+          expect(second.error).toBeNull();
+
+          expect(mockFetch.mock.calls.filter(isCreate)).toHaveLength(1);
+        });
+
+        it('creates a new sign-in when the challenge expired', async () => {
+          const mockFetch = setup(Date.now() - 1_000);
+          const signIn = new SignIn();
+
+          await signIn.__internal_future.passkey({ flow: 'autofill' });
+          await signIn.__internal_future.passkey({ flow: 'autofill' });
+
+          expect(mockFetch.mock.calls.filter(isCreate)).toHaveLength(2);
+        });
+
+        it('reuses the challenge in authenticateWithPasskey', async () => {
+          const mockFetch = setup(Date.now() + 60_000);
+          const signIn = new SignIn();
+
+          await expect(signIn.authenticateWithPasskey({ flow: 'autofill' })).rejects.toThrow('aborted');
+          await signIn.authenticateWithPasskey({ flow: 'autofill' });
+
+          expect(mockFetch.mock.calls.filter(isCreate)).toHaveLength(1);
+        });
+      });
+
       it('creates signIn with passkey for discoverable flow', async () => {
         const mockIsWebAuthnSupported = vi.fn().mockReturnValue(true);
         const mockWebAuthnGetCredential = vi.fn().mockResolvedValue({