Add redirect guards for root sign-in / sign-up AIOs

LauraBeatris · LauraBeatris · commit 011afdd39ee7 · 2025-08-07T21:25:33.000-03:00
This makes it so that it's not possible to access `/sign-in` or `/sign-up` within AIOs if you have a current task. It navigates to the task with the base URL according to the sign-in or sign-up context.
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -1257,8 +1257,6 @@ export class Clerk implements ClerkInterface {
         }
       }
 
-      debugger;
-
       if (newSession?.status === 'pending') {
         await this.#handlePendingSession(newSession, onPendingSession);
         return;
@@ -1331,8 +1329,6 @@ export class Clerk implements ClerkInterface {
   };
 
   #handlePendingSession = async (session: PendingSessionResource, onPendingSession?: OnPendingSessionFn) => {
-    debugger;
-
     if (!this.environment) {
       return;
     }
@@ -1355,12 +1351,12 @@ export class Clerk implements ClerkInterface {
 
     if (currentSession.status === 'pending') {
       const tracker = createBeforeUnloadTracker(this.#options.standardBrowser);
+
       const onPendingSessionHook = this.#options['onPendingSession'] ?? onPendingSession;
       const taskUrls = this.#options['taskUrls'];
 
       await tracker.track(async () => {
         if (onPendingSessionHook) {
-          debugger;
           await onPendingSessionHook({ session: currentSession });
         } else if (taskUrls) {
           await this.navigate(taskUrls[session.currentTask.key]);
diff --git a/packages/clerk-js/src/core/sessionTasks.ts b/packages/clerk-js/src/core/sessionTasks.ts
@@ -12,20 +12,21 @@ interface NavigateToTaskOptions {
   options?: ClerkOptions;
 }
 
+export function buildTaskURL(task: SessionTask, opts: Pick<Parameters<typeof buildURL>[0], 'base'>) {
+  return buildURL(
+    {
+      base: opts.base,
+      hashPath: `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[task.key]}`,
+    },
+    { stringify: true },
+  );
+}
+
 /**
  * @internal
  */
 export function navigateToTask(session: PendingSessionResource, { options, navigate, baseUrl }: NavigateToTaskOptions) {
   const currentTaskKey = session.currentTask.key;
 
-  return navigate(
-    options?.taskUrls?.[currentTaskKey] ??
-      buildURL(
-        {
-          base: baseUrl,
-          hashPath: `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`,
-        },
-        { stringify: true },
-      ),
-  );
+  return navigate(options?.taskUrls?.[currentTaskKey] ?? buildTaskURL(session.currentTask, { base: baseUrl }));
 }
diff --git a/packages/clerk-js/src/ui/common/withRedirect.tsx b/packages/clerk-js/src/ui/common/withRedirect.tsx
@@ -89,3 +89,57 @@ export const withRedirectToAfterSignUp = <P extends AvailableComponentProps>(Com
 
   return HOC;
 };
+
+export const withRedirectToSignInTask = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+
+  const HOC = (props: P) => {
+    const signInCtx = useSignInContext();
+
+    return withRedirect(
+      Component,
+      clerk => !!clerk.session?.currentTask,
+      ({ clerk }) => {
+        const currentTask = clerk.session?.currentTask;
+        if (!currentTask || !signInCtx?.taskUrl) {
+          return '';
+        }
+
+        return signInCtx?.taskUrl;
+      },
+      undefined,
+    )(props);
+  };
+
+  HOC.displayName = `withRedirectToAfterSignIn(${displayName})`;
+
+  return HOC;
+};
+
+export const withRedirectToSignUpTask = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+
+  const HOC = (props: P) => {
+    const signUpCtx = useSignUpContext();
+
+    return withRedirect(
+      Component,
+      clerk => !!clerk.session?.currentTask,
+      ({ clerk }) => {
+        const currentTask = clerk.session?.currentTask;
+        if (!currentTask || !signUpCtx?.taskUrl) {
+          return '';
+        }
+
+        return signUpCtx?.taskUrl;
+      },
+      undefined,
+    )(props);
+  };
+
+  HOC.displayName = `withRedirectToAfterSignIn(${displayName})`;
+
+  return HOC;
+};
diff --git a/packages/clerk-js/src/ui/components/SessionTasks/index.tsx b/packages/clerk-js/src/ui/components/SessionTasks/index.tsx
@@ -24,7 +24,10 @@ const SessionTasksStart = () => {
   useEffect(() => {
     // Simulates additional latency to avoid a abrupt UI transition when navigating to the next task
     const timeoutId = setTimeout(() => {
-      // TODO - call setActive?
+      const currentTaskKey = clerk.session?.currentTask?.key;
+      if (!currentTaskKey) return;
+
+      void navigate(`./${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`);
     }, 500);
     return () => clearTimeout(timeoutId);
   }, [navigate, clerk, redirectUrlComplete]);
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -5,7 +5,7 @@ import { Header } from '@/ui/elements/Header';
 import { PreviewButton } from '@/ui/elements/PreviewButton';
 import { UserPreview } from '@/ui/elements/UserPreview';
 
-import { withRedirectToAfterSignIn } from '../../common';
+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';
 import { useEnvironment, useSignInContext, useSignOutContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import { Add, SwitchArrowRight } from '../../icons';
@@ -125,4 +125,6 @@ const SignInAccountSwitcherInternal = () => {
     </Flow.Part>
   );
 };
-export const SignInAccountSwitcher = withRedirectToAfterSignIn(withCardStateProvider(SignInAccountSwitcherInternal));
+export const SignInAccountSwitcher = withRedirectToSignInTask(
+  withRedirectToAfterSignIn(withCardStateProvider(SignInAccountSwitcherInternal)),
+);
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
@@ -6,7 +6,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { ErrorCard } from '@/ui/elements/ErrorCard';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 
-import { withRedirectToAfterSignIn } from '../../common';
+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';
 import { useCoreSignIn, useEnvironment } from '../../contexts';
 import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';
 import { localizationKeys } from '../../localization';
@@ -251,4 +251,6 @@ function SignInFactorOneInternal(): JSX.Element {
   }
 }
 
-export const SignInFactorOne = withRedirectToAfterSignIn(withCardStateProvider(SignInFactorOneInternal));
+export const SignInFactorOne = withRedirectToSignInTask(
+  withRedirectToAfterSignIn(withCardStateProvider(SignInFactorOneInternal)),
+);
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { withCardStateProvider } from '@/ui/elements/contexts';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 
-import { withRedirectToAfterSignIn } from '../../common';
+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';
 import { useCoreSignIn } from '../../contexts';
 import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';
 import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';
@@ -82,4 +82,6 @@ function SignInFactorTwoInternal(): JSX.Element {
   }
 }
 
-export const SignInFactorTwo = withRedirectToAfterSignIn(withCardStateProvider(SignInFactorTwoInternal));
+export const SignInFactorTwo = withRedirectToSignInTask(
+  withRedirectToAfterSignIn(withCardStateProvider(SignInFactorTwoInternal)),
+);
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInSSOCallback.tsx
@@ -1,3 +1,3 @@
-import { SSOCallback, withRedirectToAfterSignIn } from '../../common';
+import { SSOCallback, withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';
 
-export const SignInSSOCallback = withRedirectToAfterSignIn(SSOCallback);
+export const SignInSSOCallback = withRedirectToSignInTask(withRedirectToAfterSignIn(SSOCallback));
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -30,6 +30,7 @@ import {
   getIdentifierControlDisplayValues,
   groupIdentifiers,
   withRedirectToAfterSignIn,
+  withRedirectToSignInTask,
 } from '../../common';
 import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
@@ -678,4 +679,6 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
   );
 };
 
-export const SignInStart = withRedirectToAfterSignIn(withCardStateProvider(SignInStartInternal));
+export const SignInStart = withRedirectToSignInTask(
+  withRedirectToAfterSignIn(withCardStateProvider(SignInStartInternal)),
+);
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpSSOCallback.tsx
@@ -1,3 +1,8 @@
-import { SSOCallback, withRedirectToAfterSignUp } from '../../common';
+import {
+  SSOCallback,
+  withRedirectToAfterSignUp,
+  withRedirectToSignUpTask,
+  withRedirectToSignUpTask,
+} from '../../common';
 
-export const SignUpSSOCallback = withRedirectToAfterSignUp(SSOCallback);
+export const SignUpSSOCallback = withRedirectToSignUpTask(withRedirectToAfterSignUp(SSOCallback));
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -16,7 +16,7 @@ import { createUsernameError } from '@/ui/utils/usernameUtils';
 
 import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants';
 import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils/getClerkQueryParam';
-import { withRedirectToAfterSignUp } from '../../common';
+import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '../../common';
 import { SignInContext, useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
 import { descriptors, Flex, Flow, localizationKeys, useAppearance, useLocalizations } from '../../customizables';
 import { CaptchaElement } from '../../elements/CaptchaElement';
@@ -449,4 +449,6 @@ function SignUpStartInternal(): JSX.Element {
   );
 }
 
-export const SignUpStart = withRedirectToAfterSignUp(withCardStateProvider(SignUpStartInternal));
+export const SignUpStart = withRedirectToSignUpTask(
+  withRedirectToAfterSignUp(withCardStateProvider(SignUpStartInternal)),
+);
diff --git a/packages/clerk-js/src/ui/components/SignUp/index.tsx b/packages/clerk-js/src/ui/components/SignUp/index.tsx
@@ -2,6 +2,8 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
+import { usePreloadTasks } from '@/ui/hooks/usePreloadTasks';
+
 import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components';
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
@@ -22,6 +24,8 @@ function RedirectToSignUp() {
 }
 
 function SignUpRoutes(): JSX.Element {
+  usePreloadTasks();
+
   const signUpContext = useSignUpContext();
 
   return (
diff --git a/packages/clerk-js/src/ui/contexts/components/SignIn.ts b/packages/clerk-js/src/ui/contexts/components/SignIn.ts
@@ -3,6 +3,8 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { OnPendingSessionFn } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
+import { buildTaskURL } from '@/core/sessionTasks';
+
 import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants';
 import { buildURL } from '../../../utils';
 import { RedirectUrls } from '../../../utils/redirectUrls';
@@ -28,6 +30,7 @@ export type SignInContextType = Omit<SignInCtx, 'fallbackRedirectUrl' | 'forceRe
   ssoCallbackUrl: string;
   isCombinedFlow: boolean;
   onPendingSession: OnPendingSessionFn;
+  taskUrl: string | null;
 };
 
 export const SignInContext = createContext<SignInCtx | null>(null);
@@ -127,6 +130,11 @@ export const useSignInContext = (): SignInContextType => {
     }
   };
 
+  const taskUrl = clerk.session?.currentTask
+    ? (clerk.__internal_getOption('taskUrls')?.[clerk.session?.currentTask.key] ??
+      buildTaskURL(clerk.session?.currentTask, { base: signInUrl }))
+    : null;
+
   return {
     ...(ctx as SignInCtx),
     transferable: ctx.transferable ?? true,
@@ -146,5 +154,6 @@ export const useSignInContext = (): SignInContextType => {
     authQueryString,
     isCombinedFlow,
     onPendingSession,
+    taskUrl,
   };
 };
diff --git a/packages/clerk-js/src/ui/contexts/components/SignUp.ts b/packages/clerk-js/src/ui/contexts/components/SignUp.ts
@@ -3,6 +3,8 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { OnPendingSessionFn } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
+import { buildTaskURL } from '@/core/sessionTasks';
+
 import { SIGN_UP_INITIAL_VALUE_KEYS } from '../../../core/constants';
 import { buildURL } from '../../../utils';
 import { RedirectUrls } from '../../../utils/redirectUrls';
@@ -27,6 +29,7 @@ export type SignUpContextType = Omit<SignUpCtx, 'fallbackRedirectUrl' | 'forceRe
   emailLinkRedirectUrl: string;
   ssoCallbackUrl: string;
   onPendingSession: OnPendingSessionFn;
+  taskUrl: string | null;
 };
 
 export const SignUpContext = createContext<SignUpCtx | null>(null);
@@ -122,6 +125,11 @@ export const useSignUpContext = (): SignUpContextType => {
     }
   };
 
+  const taskUrl = clerk.session?.currentTask
+    ? (clerk.__internal_getOption('taskUrls')?.[clerk.session?.currentTask.key] ??
+      buildTaskURL(clerk.session?.currentTask, { base: signUpUrl }))
+    : null;
+
   return {
     ...ctx,
     oauthFlow: ctx.oauthFlow || 'auto',
@@ -140,5 +148,6 @@ export const useSignUpContext = (): SignUpContextType => {
     authQueryString,
     isCombinedFlow,
     onPendingSession,
+    taskUrl,
   };
 };

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';`
`6`	`6`	`import { ErrorCard } from '@/ui/elements/ErrorCard';`
`7`	`7`	`import { LoadingCard } from '@/ui/elements/LoadingCard';`
`8`	`8`
`9`		`-import { withRedirectToAfterSignIn } from '../../common';`
	`9`	`+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';`
`10`	`10`	`import { useCoreSignIn, useEnvironment } from '../../contexts';`
`11`	`11`	`import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';`
`12`	`12`	`import { localizationKeys } from '../../localization';`
`@@ -251,4 +251,6 @@ function SignInFactorOneInternal(): JSX.Element {`
`251`	`251`	`}`
`252`	`252`	`}`
`253`	`253`
`254`		`-export const SignInFactorOne = withRedirectToAfterSignIn(withCardStateProvider(SignInFactorOneInternal));`
	`254`	`+export const SignInFactorOne = withRedirectToSignInTask(`
	`255`	`+ withRedirectToAfterSignIn(withCardStateProvider(SignInFactorOneInternal)),`
	`256`	`+);`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import React from 'react';`
`4`	`4`	`import { withCardStateProvider } from '@/ui/elements/contexts';`
`5`	`5`	`import { LoadingCard } from '@/ui/elements/LoadingCard';`
`6`	`6`
`7`		`-import { withRedirectToAfterSignIn } from '../../common';`
	`7`	`+import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '../../common';`
`8`	`8`	`import { useCoreSignIn } from '../../contexts';`
`9`	`9`	`import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';`
`10`	`10`	`import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard';`
`@@ -82,4 +82,6 @@ function SignInFactorTwoInternal(): JSX.Element {`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`
`85`		`-export const SignInFactorTwo = withRedirectToAfterSignIn(withCardStateProvider(SignInFactorTwoInternal));`
	`85`	`+export const SignInFactorTwo = withRedirectToSignInTask(`
	`86`	`+ withRedirectToAfterSignIn(withCardStateProvider(SignInFactorTwoInternal)),`
	`87`	`+);`