diff --git a/.changeset/eager-cats-attend.md b/.changeset/eager-cats-attend.md
new file mode 100644
index 00000000000..40b8c35d430
--- /dev/null
+++ b/.changeset/eager-cats-attend.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Guard against navigation to root sign-in route during `setActive` in `SignInFactorOne`
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
index 343b879cfd1..716390610ec 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
@@ -1,3 +1,4 @@
+import { useClerk } from '@clerk/shared/react';
import type { SignInFactor } from '@clerk/types';
import React from 'react';
@@ -39,6 +40,7 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
};
function SignInFactorOneInternal(): JSX.Element {
+ const { __internal_setActiveInProgress } = useClerk();
const signIn = useCoreSignIn();
const { preferredSignInStrategy } = useEnvironment().displayConfig;
const availableFactors = signIn.supportedFirstFactors;
@@ -83,21 +85,27 @@ function SignInFactorOneInternal(): JSX.Element {
const [isPasswordPwned, setIsPasswordPwned] = React.useState(false);
React.useEffect(() => {
+ if (__internal_setActiveInProgress) {
+ return;
+ }
+
// Handle the case where a user lands on alternative methods screen,
// clicks a social button but then navigates back to sign in.
// SignIn status resets to 'needs_identifier'
if (signIn.status === 'needs_identifier' || signIn.status === null) {
void router.navigate('../');
}
- }, []);
+ }, [__internal_setActiveInProgress]);
- if (!currentFactor && signIn.status) {
- return (
+ if (!currentFactor) {
+ return signIn.status ? (
+ ) : (
+
);
}