From 45ff39451d4a64cb4e137e22af28a6e0e9915be0 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 30 Jul 2024 15:56:22 -0400
Subject: [PATCH 1/5] fix(elements): Update supported factors based on status

---
 packages/elements/src/react/sign-in/choose-strategy.tsx | 7 +++++--
 packages/ui/src/components/sign-in/sign-in.tsx          | 7 ++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/elements/src/react/sign-in/choose-strategy.tsx b/packages/elements/src/react/sign-in/choose-strategy.tsx
index d55e235e91d..384c91890ab 100644
--- a/packages/elements/src/react/sign-in/choose-strategy.tsx
+++ b/packages/elements/src/react/sign-in/choose-strategy.tsx
@@ -108,8 +108,11 @@ export const SignInSupportedStrategy = React.forwardRef<SignInSupportedStrategyE
     const routerRef = SignInRouterCtx.useActorRef();
     const snapshot = routerRef.getSnapshot();
 
-    const supportedFirstFactors = snapshot.context.clerk.client.signIn.supportedFirstFactors || [];
-    const supportedSecondFactors = snapshot.context.clerk.client.signIn.supportedSecondFactors || [];
+    const status = snapshot.context.clerk.client.signIn.status;
+    const supportedFirstFactors =
+      status === 'needs_first_factor' ? snapshot.context.clerk.client.signIn.supportedFirstFactors || [] : [];
+    const supportedSecondFactors =
+      status === 'needs_second_factor' ? snapshot.context.clerk.client.signIn.supportedSecondFactors || [] : [];
     const factor = [...supportedFirstFactors, ...supportedSecondFactors].find(factor => name === factor.strategy);
 
     const currentFactor = useSelector(
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index d102da59f9c..61519685ec8 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -887,9 +887,10 @@ export function SignInComponentLoaded() {
                       }}
                     </Common.GlobalError>
                     <div className='flex flex-col gap-6'>
-                      <Connections disabled={isGlobalLoading} />
-
-                      {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
+                      <SignIn.FirstFactor>
+                        <Connections disabled={isGlobalLoading} />
+                        {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
+                      </SignIn.FirstFactor>
 
                       <div className='flex flex-col gap-3'>
                         <div className='flex flex-col gap-2'>

From 0760b99d58e14574ed8182fdb73cefdde89965fe Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 30 Jul 2024 15:57:50 -0400
Subject: [PATCH 2/5] add changeset

---
 .changeset/funny-berries-jam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/funny-berries-jam.md

diff --git a/.changeset/funny-berries-jam.md b/.changeset/funny-berries-jam.md
new file mode 100644
index 00000000000..82923849944
--- /dev/null
+++ b/.changeset/funny-berries-jam.md
@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Ensure correct supported strategies are rendered based on first or second factor needs.

From 0f84132f8af9e0672d96fd3342ee0c0124bd88d5 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 30 Jul 2024 16:17:53 -0400
Subject: [PATCH 3/5] remove first factor component

---
 packages/ui/src/components/sign-in/sign-in.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index 61519685ec8..d102da59f9c 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -887,10 +887,9 @@ export function SignInComponentLoaded() {
                       }}
                     </Common.GlobalError>
                     <div className='flex flex-col gap-6'>
-                      <SignIn.FirstFactor>
-                        <Connections disabled={isGlobalLoading} />
-                        {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
-                      </SignIn.FirstFactor>
+                      <Connections disabled={isGlobalLoading} />
+
+                      {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
 
                       <div className='flex flex-col gap-3'>
                         <div className='flex flex-col gap-2'>

From 7c6c548c2f4c73c4248dcad69c5fbf3a9c33cdb6 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 30 Jul 2024 17:25:41 -0400
Subject: [PATCH 4/5] add custom component for loading connections for first
 factor

---
 .../ui/src/components/sign-in/sign-in.tsx     | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index d102da59f9c..517e40e2594 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -1,3 +1,4 @@
+import { useSignIn } from '@clerk/clerk-react';
 import * as Common from '@clerk/elements/common';
 import * as SignIn from '@clerk/elements/sign-in';
 import * as React from 'react';
@@ -108,6 +109,26 @@ function SignInGetHelp() {
   );
 }
 
+function FirstFactorConnections({
+  isGlobalLoading,
+  hasConnection,
+}: {
+  isGlobalLoading: boolean;
+  hasConnection: boolean;
+}) {
+  const { t } = useLocalizations();
+  const { signIn } = useSignIn();
+  if (signIn?.status === 'needs_first_factor') {
+    return (
+      <>
+        <Connections disabled={isGlobalLoading} />
+        {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
+      </>
+    );
+  }
+  return null;
+}
+
 export function SignInComponentLoaded() {
   const enabledConnections = useEnabledConnections();
   const { isDevelopmentOrStaging } = useEnvironment();
@@ -887,10 +908,10 @@ export function SignInComponentLoaded() {
                       }}
                     </Common.GlobalError>
                     <div className='flex flex-col gap-6'>
-                      <Connections disabled={isGlobalLoading} />
-
-                      {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
-
+                      <FirstFactorConnections
+                        isGlobalLoading={isGlobalLoading}
+                        hasConnection={hasConnection}
+                      />
                       <div className='flex flex-col gap-3'>
                         <div className='flex flex-col gap-2'>
                           <SignIn.SupportedStrategy

From 8907598f7c8d4ecee53bb576246bc8a202274f36 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Tue, 30 Jul 2024 17:38:56 -0400
Subject: [PATCH 5/5] extract FirstFactorConnections

---
 .../sign-in/first-factor-connections.tsx      | 27 +++++++++++++++++++
 .../ui/src/components/sign-in/sign-in.tsx     | 23 ++--------------
 2 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 packages/ui/src/components/sign-in/first-factor-connections.tsx

diff --git a/packages/ui/src/components/sign-in/first-factor-connections.tsx b/packages/ui/src/components/sign-in/first-factor-connections.tsx
new file mode 100644
index 00000000000..6e7a75c1d18
--- /dev/null
+++ b/packages/ui/src/components/sign-in/first-factor-connections.tsx
@@ -0,0 +1,27 @@
+import { useSignIn } from '@clerk/clerk-react';
+
+import { Connections } from '~/common/connections';
+import { useLocalizations } from '~/hooks/use-localizations';
+import { Separator } from '~/primitives/separator';
+
+export function FirstFactorConnections({
+  isGlobalLoading,
+  hasConnection,
+}: {
+  isGlobalLoading: boolean;
+  hasConnection: boolean;
+}) {
+  const { t } = useLocalizations();
+  const { signIn } = useSignIn();
+  const isFirstFactor = signIn?.status === 'needs_first_factor';
+
+  if (isFirstFactor) {
+    return (
+      <>
+        <Connections disabled={isGlobalLoading} />
+        {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
+      </>
+    );
+  }
+  return null;
+}
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index 517e40e2594..1a7e1909671 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -1,4 +1,3 @@
-import { useSignIn } from '@clerk/clerk-react';
 import * as Common from '@clerk/elements/common';
 import * as SignIn from '@clerk/elements/sign-in';
 import * as React from 'react';
@@ -30,6 +29,8 @@ import { LinkButton } from '~/primitives/link';
 import { Separator } from '~/primitives/separator';
 import { formatSafeIdentifier } from '~/utils/format-safe-identifier';
 
+import { FirstFactorConnections } from './first-factor-connections';
+
 /**
  * Implementation Details:
  *
@@ -109,26 +110,6 @@ function SignInGetHelp() {
   );
 }
 
-function FirstFactorConnections({
-  isGlobalLoading,
-  hasConnection,
-}: {
-  isGlobalLoading: boolean;
-  hasConnection: boolean;
-}) {
-  const { t } = useLocalizations();
-  const { signIn } = useSignIn();
-  if (signIn?.status === 'needs_first_factor') {
-    return (
-      <>
-        <Connections disabled={isGlobalLoading} />
-        {hasConnection ? <Separator>{t('dividerText')}</Separator> : null}
-      </>
-    );
-  }
-  return null;
-}
-
 export function SignInComponentLoaded() {
   const enabledConnections = useEnabledConnections();
   const { isDevelopmentOrStaging } = useEnvironment();