fix(elements): Update supported factors based on status

.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.

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(

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;
+}

packages/ui/src/components/sign-in/sign-in.tsx

@@ -29,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:
  *
@@ -887,10 +889,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