Fix navigation for SSO to maintain path and hash routing

LauraBeatris · LauraBeatris · commit 6b17d9888187 · 2025-08-11T19:27:21.000-03:00
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -151,11 +151,7 @@ import {
   Organization,
   Waitlist,
 } from './resources/internal';
-import {
-  INTERNAL_SESSION_TASK_ROUTE_BY_KEY,
-  navigateIfTaskExists,
-  warnMissingPendingTaskHandlers,
-} from './sessionTasks';
+import { buildTaskUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY, warnMissingPendingTaskHandlers } from './sessionTasks';
 import { State } from './state';
 import { warnings } from './warnings';
 
@@ -1795,6 +1791,9 @@ export class Clerk implements ClerkInterface {
       sessionId: signIn.createdSessionId,
     };
 
+    const signInUrl = params.signInUrl || displayConfig.signInUrl;
+    const signUpUrl = params.signUpUrl || displayConfig.signUpUrl;
+
     const makeNavigate = (to: string) => () => navigate(to);
 
     const navigateToSignIn = makeNavigate(params.signInUrl || displayConfig.signInUrl);
@@ -1852,23 +1851,28 @@ export class Clerk implements ClerkInterface {
       });
     };
 
-    const setActiveNavigate = async ({ session, redirectUrl }: { session: SessionResource; redirectUrl: string }) => {
+    const setActiveNavigate = async ({
+      session,
+      baseUrl,
+      redirectUrl,
+    }: {
+      session: SessionResource;
+      baseUrl: string;
+      redirectUrl: string;
+    }) => {
       if (!session.currentTask) {
         await this.navigate(redirectUrl);
         return;
       }
 
-      await navigateIfTaskExists(session, {
-        baseUrl: params.signInUrl ?? displayConfig.signInUrl,
-        navigate: this.navigate,
-      });
+      await navigate(params.taskUrl ?? buildTaskUrl(session.currentTask, { baseUrl }));
     };
 
     if (si.status === 'complete') {
       return this.setActive({
         session: si.sessionId,
         navigate: async ({ session }) => {
-          await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignInUrl() });
+          await setActiveNavigate({ session, baseUrl: signInUrl, redirectUrl: redirectUrls.getAfterSignInUrl() });
         },
       });
     }
@@ -1883,7 +1887,7 @@ export class Clerk implements ClerkInterface {
           return this.setActive({
             session: res.createdSessionId,
             navigate: async ({ session }) => {
-              await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignInUrl() });
+              await setActiveNavigate({ session, baseUrl: signInUrl, redirectUrl: redirectUrls.getAfterSignInUrl() });
             },
           });
         case 'needs_first_factor':
@@ -1934,7 +1938,7 @@ export class Clerk implements ClerkInterface {
           return this.setActive({
             session: res.createdSessionId,
             navigate: async ({ session }) => {
-              await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignUpUrl() });
+              await setActiveNavigate({ session, baseUrl: signUpUrl, redirectUrl: redirectUrls.getAfterSignUpUrl() });
             },
           });
         case 'missing_requirements':
@@ -1948,7 +1952,7 @@ export class Clerk implements ClerkInterface {
       return this.setActive({
         session: su.sessionId,
         navigate: async ({ session }) => {
-          await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignUpUrl() });
+          await setActiveNavigate({ session, baseUrl: signUpUrl, redirectUrl: redirectUrls.getAfterSignUpUrl() });
         },
       });
     }
@@ -1974,7 +1978,7 @@ export class Clerk implements ClerkInterface {
         return this.setActive({
           session: sessionId,
           navigate: async ({ session }) => {
-            await setActiveNavigate({ session, redirectUrl: redirectUrls.getAfterSignInUrl() });
+            await setActiveNavigate({ session, baseUrl: signInUrl, redirectUrl: redirectUrls.getAfterSignInUrl() });
           },
         });
       }
@@ -1989,11 +1993,7 @@ export class Clerk implements ClerkInterface {
     }
 
     if (this.session?.currentTask) {
-      await navigateIfTaskExists(this.session, {
-        baseUrl: params.signInUrl ?? displayConfig.signInUrl,
-        navigate: this.navigate,
-      });
-      return;
+      return this.navigate(params.taskUrl ?? this.buildTasksUrl());
     }
 
     return navigateToSignIn();
@@ -2170,10 +2170,11 @@ export class Clerk implements ClerkInterface {
         return;
       }
 
-      await navigateIfTaskExists(session, {
-        baseUrl: displayConfig.signInUrl,
-        navigate: this.navigate,
-      });
+      await this.navigate(
+        buildTaskUrl(session.currentTask, {
+          baseUrl: displayConfig.signInUrl,
+        }),
+      );
     };
 
     switch (signInOrSignUp.status) {
diff --git a/packages/clerk-js/src/core/sessionTasks.ts b/packages/clerk-js/src/core/sessionTasks.ts
@@ -1,7 +1,8 @@
 import { logger } from '@clerk/shared/logger';
-import type { ClerkOptions, SessionResource, SessionTask, SetActiveParams } from '@clerk/types';
+import type { ClerkOptions, SessionTask, SetActiveParams } from '@clerk/types';
 
-import { buildURL, forwardClerkQueryParams } from '../utils';
+import { buildRedirectUrl } from '@/ui/common';
+import { buildURL } from '@/utils';
 
 /**
  * @internal
@@ -10,41 +11,39 @@ export const INTERNAL_SESSION_TASK_ROUTE_BY_KEY: Record<SessionTask['key'], stri
   'choose-organization': 'choose-organization',
 } as const;
 
+const getTaskEndpoint = (task: SessionTask) => `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[task.key]}`;
+
 /**
  * @internal
  */
-export function buildTaskUrl(task: SessionTask, opts: Pick<Parameters<typeof buildURL>[0], 'base'>) {
-  const params = forwardClerkQueryParams();
+export function buildTaskRedirectUrl(
+  task: SessionTask,
+  opts: Omit<Parameters<typeof buildRedirectUrl>[0], 'endpoint'>,
+) {
+  const { path, routing, baseUrl, authQueryString } = opts;
+  const endpoint = getTaskEndpoint(task);
 
-  return buildURL(
-    {
-      base: opts.base,
-      hashPath: `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[task.key]}`,
-      searchParams: params,
-    },
-    { stringify: true },
-  );
+  return buildRedirectUrl({
+    baseUrl,
+    path,
+    routing,
+    endpoint,
+    authQueryString,
+  });
 }
 
 /**
  * @internal
  */
-export function navigateIfTaskExists(
-  session: SessionResource,
+export function buildTaskUrl(
+  task: SessionTask,
   {
-    navigate,
     baseUrl,
   }: {
-    navigate: (to: string) => Promise<unknown>;
     baseUrl: string;
   },
 ) {
-  const currentTask = session.currentTask;
-  if (!currentTask) {
-    return;
-  }
-
-  return navigate(buildTaskUrl(currentTask, { base: baseUrl }));
+  return buildURL({ base: baseUrl, hashPath: getTaskEndpoint(task) }, { stringify: true });
 }
 
 export function warnMissingPendingTaskHandlers(options: Record<string, unknown>) {
diff --git a/packages/clerk-js/src/ui/components/SignIn/index.tsx b/packages/clerk-js/src/ui/components/SignIn/index.tsx
@@ -63,6 +63,7 @@ function SignInRoutes(): JSX.Element {
         </Route>
         <Route path='sso-callback'>
           <SignInSSOCallback
+            taskUrl={signInContext.taskUrl}
             signUpUrl={signInContext.signUpUrl}
             signInUrl={signInContext.signInUrl}
             signInForceRedirectUrl={signInContext.afterSignInUrl}
diff --git a/packages/clerk-js/src/ui/components/SignUp/index.tsx b/packages/clerk-js/src/ui/components/SignUp/index.tsx
@@ -45,6 +45,7 @@ function SignUpRoutes(): JSX.Element {
         </Route>
         <Route path='sso-callback'>
           <SignUpSSOCallback
+            taskUrl={signUpContext.taskUrl}
             signUpUrl={signUpContext.signUpUrl}
             signInUrl={signUpContext.signInUrl}
             signUpForceRedirectUrl={signUpContext.afterSignUpUrl}
diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
@@ -1,7 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import type { SignedInSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
-import { navigateIfTaskExists } from '@/core/sessionTasks';
+import { buildTaskUrl } from '@/core/sessionTasks';
 import { useEnvironment } from '@/ui/contexts';
 import { useCardState } from '@/ui/elements/contexts';
 import { sleep } from '@/ui/utils/sleep';
@@ -81,10 +81,13 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
           return;
         }
 
-        await navigateIfTaskExists(session, {
-          baseUrl: opts.signInUrl ?? displayConfig.signInUrl,
-          navigate,
-        });
+        if (session.currentTask) {
+          await navigate(
+            buildTaskUrl(session.currentTask, {
+              baseUrl: opts.signInUrl ?? displayConfig.signInUrl,
+            }),
+          );
+        }
       },
     }).finally(() => {
       card.setIdle();
diff --git a/packages/clerk-js/src/ui/contexts/components/SignIn.ts b/packages/clerk-js/src/ui/contexts/components/SignIn.ts
@@ -3,7 +3,7 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { SessionResource } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
-import { buildTaskUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks';
+import { buildTaskRedirectUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks';
 
 import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants';
 import { buildURL } from '../../../utils';
@@ -131,7 +131,12 @@ export const useSignInContext = (): SignInContextType => {
 
   const taskUrl = clerk.session?.currentTask
     ? (clerk.__internal_getOption('taskUrls')?.[clerk.session?.currentTask.key] ??
-      buildTaskUrl(clerk.session?.currentTask, { base: signInUrl }))
+      buildTaskRedirectUrl(clerk.session?.currentTask, {
+        routing: ctx.routing,
+        baseUrl: signInUrl,
+        authQueryString,
+        path: ctx.path,
+      }))
     : null;
 
   return {
diff --git a/packages/clerk-js/src/ui/contexts/components/SignUp.ts b/packages/clerk-js/src/ui/contexts/components/SignUp.ts
@@ -3,7 +3,7 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { SessionResource } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
-import { buildTaskUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks';
+import { buildTaskRedirectUrl, INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '@/core/sessionTasks';
 
 import { SIGN_UP_INITIAL_VALUE_KEYS } from '../../../core/constants';
 import { buildURL } from '../../../utils';
@@ -126,7 +126,12 @@ export const useSignUpContext = (): SignUpContextType => {
 
   const taskUrl = clerk.session?.currentTask
     ? (clerk.__internal_getOption('taskUrls')?.[clerk.session?.currentTask.key] ??
-      buildTaskUrl(clerk.session?.currentTask, { base: signUpUrl }))
+      buildTaskRedirectUrl(clerk.session?.currentTask, {
+        routing: ctx.routing,
+        baseUrl: signUpUrl,
+        authQueryString,
+        path: ctx.path,
+      }))
     : null;
 
   return {
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
@@ -926,6 +926,10 @@ export type HandleOAuthCallbackParams = TransferableOption &
      * Full URL or path to navigate to after requesting phone verification.
      */
     verifyPhoneNumberUrl?: string | null;
+    /**
+     * Full URL or path where to navigate for the current task.
+     */
+    taskUrl?: string | null;
     /**
      * The underlying resource to optionally reload before processing an OAuth callback.
      */
