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. 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 name === factor.strategy); const currentFactor = useSelector( 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 ( + <> + + {hasConnection ? {t('dividerText')} : 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 d102da59f9c..1a7e1909671 100644 --- a/packages/ui/src/components/sign-in/sign-in.tsx +++ b/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() { }}
- - - {hasConnection ? {t('dividerText')} : null} - +