fix(clerk-js): Prepare calls would fire only once (#6695)

Author: panteliselef

.changeset/crazy-days-tan.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes issue where "prepare" API request would only fire once, preventing end users from receiving fresh otp codes.

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -82,19 +82,11 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
       .catch(err => handleError(err, [], card.setError));
   };
 
-  useFetch(
-    shouldAvoidPrepare
-      ? undefined
-      : () =>
-          signIn
-            ?.prepareFirstFactor(props.factor)
-            .then(() => props.onFactorPrepare())
-            .catch(err => handleError(err, [], card.setError)),
-    cacheKey,
-    {
-      staleTime: 100,
-    },
-  );
+  useFetch(shouldAvoidPrepare ? undefined : () => signIn?.prepareFirstFactor(props.factor), cacheKey, {
+    staleTime: 100,
+    onSuccess: () => props.onFactorPrepare(),
+    onError: err => handleError(err, [], card.setError),
+  });
 
   const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
     signIn

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -56,9 +56,11 @@ describe('SignInFactorOneCodeForm', () => {
           name: 'signIn.prepareFirstFactor',
           factorKey: 'phone_code_idn_123',
         },
-        {
+        expect.objectContaining({
           staleTime: 100,
-        },
+          onSuccess: expect.any(Function),
+          onError: expect.any(Function),
+        }),
       );
     });
 
@@ -91,9 +93,11 @@ describe('SignInFactorOneCodeForm', () => {
           name: 'signIn.prepareFirstFactor',
           factorKey: 'phone_code_idn_123_whatsapp',
         },
-        {
+        expect.objectContaining({
           staleTime: 100,
-        },
+          onSuccess: expect.any(Function),
+          onError: expect.any(Function),
+        }),
       );
     });
 

packages/clerk-js/src/ui/components/SignUp/SignUpEmailCodeCard.tsx

@@ -24,19 +24,15 @@ export const SignUpEmailCodeCard = () => {
 
   // TODO: Introduce a useMutation to handle mutating requests
   useFetch(
-    shouldAvoidPrepare
-      ? undefined
-      : () =>
-          signUp
-            .prepareEmailAddressVerification({ strategy: 'email_code' })
-            .catch(err => handleError(err, [], card.setError)),
+    shouldAvoidPrepare ? undefined : () => signUp.prepareEmailAddressVerification({ strategy: 'email_code' }),
     {
       name: 'prepare',
       strategy: 'email_code',
       number: signUp.emailAddress,
     },
     {
       staleTime: 100,
+      onError: err => handleError(err, [], card.setError),
     },
   );
 

packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx

@@ -36,17 +36,15 @@ export const SignUpPhoneCodeCard = withCardStateProvider(() => {
     // because the verification is already created on the Start screen
     shouldAvoidPrepare || isAlternativePhoneCodeProvider
       ? undefined
-      : () =>
-          signUp
-            .preparePhoneNumberVerification({ strategy: 'phone_code', channel: undefined })
-            .catch(err => handleError(err, [], card.setError)),
+      : () => signUp.preparePhoneNumberVerification({ strategy: 'phone_code', channel: undefined }),
     {
       name: 'signUp.preparePhoneNumberVerification',
       strategy: 'phone_code',
       number: signUp.phoneNumber,
     },
     {
       staleTime: 100,
+      onError: err => handleError(err, [], card.setError),
     },
   );
 

packages/clerk-js/src/ui/hooks/useFetch.ts

@@ -88,6 +88,7 @@ export const useFetch = <K, T>(
   options?: {
     throttleTime?: number;
     onSuccess?: (data: T) => void;
+    onError?: (error: Error) => void;
     staleTime?: number;
   },
   resourceId?: string,
@@ -166,14 +167,17 @@ export const useFetch = <K, T>(
           }, waitTime);
         }
       })
-      .catch((e: Error) => {
+      .catch((e: Error | null) => {
         setCache({
           data: getCache()?.data ?? null,
           isLoading: false,
           isValidating: false,
           error: e,
           cachedAt: Date.now(),
         });
+        if (e) {
+          options?.onError?.(e);
+        }
       });
   }, [serialize(params), setCache, getCache, revalidateCache]);