use return values instead of callback

Author: panteliselef

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

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

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

@@ -24,15 +24,20 @@ export const SignUpEmailCodeCard = () => {
 
   // TODO: Introduce a useMutation to handle mutating requests
   useFetch(
-    shouldAvoidPrepare ? undefined : () => signUp.prepareEmailAddressVerification({ strategy: 'email_code' }),
+    shouldAvoidPrepare
+      ? undefined
+      : () =>
+          signUp.prepareEmailAddressVerification({ strategy: 'email_code' }).catch(err => {
+            handleError(err, [], card.setError);
+            return err;
+          }),
     {
       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,15 +36,18 @@ export const SignUpPhoneCodeCard = withCardStateProvider(() => {
     // because the verification is already created on the Start screen
     shouldAvoidPrepare || isAlternativePhoneCodeProvider
       ? undefined
-      : () => signUp.preparePhoneNumberVerification({ strategy: 'phone_code', channel: undefined }),
+      : () =>
+          signUp.preparePhoneNumberVerification({ strategy: 'phone_code', channel: undefined }).catch(err => {
+            handleError(err, [], card.setError);
+            return err;
+          }),
     {
       name: 'signUp.preparePhoneNumberVerification',
       strategy: 'phone_code',
       number: signUp.phoneNumber,
     },
     {
       staleTime: 100,
-      onError: err => handleError(err, [], card.setError),
     },
   );