fix(clerk-js): redirect signed-in users forward from factor-two

When a signed-in user lands on factor-two without a pending 2FA
(e.g. page reload after successful verification in a multi-session app),
redirect to afterSignInUrl instead of back to sign-in start.

Author: nikosdouvlis

.changeset/fix-factor-two-infinite-spinner.md

@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Fix infinite loading spinner when navigating to factor-two sign-in route without an active 2FA session
+Fix infinite loading spinner when navigating to factor-two sign-in route without an active 2FA session. When the user is already signed in (e.g. multi-session app page reload after successful verification), redirects forward to afterSignInUrl instead of back to sign-in start.

packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx

@@ -6,7 +6,7 @@ import { withCardStateProvider } from '@/ui/elements/contexts';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 
 import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';
-import { useCoreSignIn } from '../../contexts';
+import { useCoreSignIn, useSignInContext } from '../../contexts';
 import { useRouter } from '../../router';
 import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';
 import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';
@@ -28,9 +28,10 @@ const factorKey = (factor: SignInFactor | null | undefined) => {
 };
 
 function SignInFactorTwoInternal(): JSX.Element {
-  const { __internal_setActiveInProgress } = useClerk();
+  const clerk = useClerk();
   const signIn = useCoreSignIn();
   const router = useRouter();
+  const { afterSignInUrl } = useSignInContext();
   const availableFactors = signIn.supportedSecondFactors;
 
   const lastPreparedFactorKeyRef = React.useRef('');
@@ -50,17 +51,24 @@ function SignInFactorTwoInternal(): JSX.Element {
   };
 
   React.useEffect(() => {
-    if (__internal_setActiveInProgress) {
+    if (clerk.__internal_setActiveInProgress) {
       return;
     }
 
-    // If the sign-in was reset or doesn't exist, redirect back to the start.
+    // If the sign-in doesn't need second factor verification, redirect away.
     // Don't redirect for 'complete' status - setActive will handle navigation.
     if (signIn.status === null || signIn.status === 'needs_identifier' || signIn.status === 'needs_first_factor') {
-      void router.navigate('../');
+      // If the user is already signed in (e.g. multi-session app, page reload after
+      // successful verification), redirect forward to afterSignInUrl instead of
+      // back to sign-in start.
+      if (clerk.isSignedIn) {
+        void router.navigate(afterSignInUrl);
+      } else {
+        void router.navigate('../');
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- Match SignInFactorOne pattern: only run on mount and when setActiveInProgress changes
-  }, [__internal_setActiveInProgress]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run on mount and when setActiveInProgress changes
+  }, [clerk.__internal_setActiveInProgress]);
 
   if (!currentFactor) {
     return <LoadingCard />;