From 732df8797d7277a579350132beed3572219a1390 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 6 Feb 2025 15:20:49 -0300
Subject: [PATCH 1/3] Apply caching for executing prepare on mount

---
 .changeset/witty-cougars-tickle.md            |  5 ++++
 .../SignIn/SignInFactorOneCodeForm.tsx        | 26 ++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/witty-cougars-tickle.md

diff --git a/.changeset/witty-cougars-tickle.md b/.changeset/witty-cougars-tickle.md
new file mode 100644
index 00000000000..fcdf2054f0d
--- /dev/null
+++ b/.changeset/witty-cougars-tickle.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Avoid triggering email code verification twice on React strict mode
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
index 455633fa264..db9bef82ed4 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -1,12 +1,12 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
-import React from 'react';
 
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
 import { useCoreSignIn, useSignInContext } from '../../contexts';
 import type { VerificationCodeCardProps } from '../../elements';
 import { useCardState, VerificationCodeCard } from '../../elements';
+import { useFetch } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
 import type { LocalizationKey } from '../../localization';
 import { useRouter } from '../../router';
@@ -37,23 +37,37 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
   const supportEmail = useSupportEmail();
   const clerk = useClerk();
 
+  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
+
   const goBack = () => {
     return navigate('../');
   };
 
-  React.useEffect(() => {
-    if (!props.factorAlreadyPrepared) {
-      prepare();
+  const prepare = () => {
+    if (shouldAvoidPrepare) {
+      return;
     }
-  }, []);
 
-  const prepare = () => {
     void signIn
       .prepareFirstFactor(props.factor)
       .then(() => props.onFactorPrepare())
       .catch(err => handleError(err, [], card.setError));
   };
 
+  useFetch(
+    shouldAvoidPrepare
+      ? undefined
+      : () =>
+          signIn
+            ?.prepareFirstFactor(props.factor)
+            .then(() => props.onFactorPrepare())
+            .catch(err => handleError(err, [], card.setError)),
+    {
+      name: 'prepare',
+      strategy: props.factor.strategy,
+    },
+  );
+
   const action: VerificationCodeCardProps['onCodeEntryFinishedAction'] = (code, resolve, reject) => {
     signIn
       .attemptFirstFactor({ strategy: props.factor.strategy, code })

From 4c9858e58de884f83541d2c3982124afcb11a87c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 7 Feb 2025 10:50:26 -0300
Subject: [PATCH 2/3] Update cache key to serialize factor object

---
 .../src/ui/components/SignIn/SignInFactorOneCodeForm.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
index db9bef82ed4..550c1fb6d1a 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -54,6 +54,8 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
       .catch(err => handleError(err, [], card.setError));
   };
 
+  console.log(props.factor, shouldAvoidPrepare);
+
   useFetch(
     shouldAvoidPrepare
       ? undefined
@@ -63,8 +65,11 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
             .then(() => props.onFactorPrepare())
             .catch(err => handleError(err, [], card.setError)),
     {
-      name: 'prepare',
-      strategy: props.factor.strategy,
+      name: 'signIn.prepareFirstFactor',
+      factor: props.factor,
+    },
+    {
+      staleTime: 100,
     },
   );
 

From c35b8ee55cb9f09c5e4a45664937e1169c7355d4 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 7 Feb 2025 11:23:40 -0300
Subject: [PATCH 3/3] Rollback `console.log`

---
 .../src/ui/components/SignIn/SignInFactorOneCodeForm.tsx        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
index 550c1fb6d1a..b0c4b5f988c 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -54,8 +54,6 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
       .catch(err => handleError(err, [], card.setError));
   };
 
-  console.log(props.factor, shouldAvoidPrepare);
-
   useFetch(
     shouldAvoidPrepare
       ? undefined