Fix navigation for SSO to maintain path and hash routing

Author: LauraBeatris

integration/tests/session-tasks-sign-in.test.ts

@@ -83,7 +83,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       await u.po.signIn.enterTestOtpCode();
 
       // Resolves task
-      await u.po.signIn.waitForMounted();
+      await u.po.signUp.waitForMounted();
       const fakeOrganization = Object.assign(u.services.organizations.createFakeOrganization(), {
         slug: u.services.organizations.createFakeOrganization().slug + '-with-sign-in-sso',
       });

integration/tests/session-tasks-sign-up.test.ts

@@ -41,8 +41,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       });
       const users = createUserService(client);
       await users.deleteIfExists({ email: fakeUserForOAuth.email });
-      // Delete OAuth user from `with-session-tasks` instance
-      await u.services.users.deleteIfExists({ email: fakeUserForOAuth.email });
 
       await app.teardown();
     });

packages/clerk-js/src/core/__tests__/clerk.test.ts

@@ -1033,7 +1033,7 @@ describe('Clerk singleton', () => {
         await sut.handleRedirectCallback();
 
         await waitFor(() => {
-          expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/tasks/choose-organization');
+          expect(mockNavigate.mock.calls[0][0]).toBe('/sign-up#/tasks/choose-organization');
         });
       });
     });

packages/clerk-js/src/core/clerk.ts

@@ -28,9 +28,9 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
+  Clerk as ClerkInterface,
   ClerkAPIError,
   ClerkAuthenticateWithWeb3Params,
-  Clerk as ClerkInterface,
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
@@ -1755,8 +1755,6 @@ export class Clerk implements ClerkInterface {
       navigate: (to: string) => Promise<unknown>;
     },
   ): Promise<unknown> => {
-    debugger;
-
     if (!this.loaded || !this.environment || !this.client) {
       return;
     }
@@ -2006,10 +2004,7 @@ export class Clerk implements ClerkInterface {
     }
 
     if (this.session?.currentTask) {
-      await navigateIfTaskExists(this.session, {
-        baseUrl: params.signInUrl ?? displayConfig.signInUrl,
-        navigate: this.navigate,
-      });
+      await this.redirectToTasks();
       return;
     }
 

packages/clerk-js/src/core/sessionTasks.ts

@@ -10,6 +10,11 @@ export const INTERNAL_SESSION_TASK_ROUTE_BY_KEY: Record<SessionTask['key'], stri
   'choose-organization': 'choose-organization',
 } as const;
 
+/**
+ * @internal
+ */
+export const getTaskEndpoint = (task: SessionTask) => `/tasks/${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[task.key]}`;
+
 /**
  * @internal
  */

packages/clerk-js/src/ui/components/SessionTasks/tasks/withTaskGuard.ts

@@ -2,15 +2,15 @@ import type { ComponentType } from 'react';
 
 import { warnings } from '@/core/warnings';
 import { withRedirect } from '@/ui/common';
-import { useSessionTasksContext } from '@/ui/contexts/components/SessionTasks';
+import { useTaskChooseOrganizationContext } from '@/ui/contexts/components/SessionTasks';
 import type { AvailableComponentProps } from '@/ui/types';
 
 export const withTaskGuard = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
   const displayName = Component.displayName || Component.name || 'Component';
   Component.displayName = displayName;
 
   const HOC = (props: P) => {
-    const ctx = useSessionTasksContext();
+    const ctx = useTaskChooseOrganizationContext();
     return withRedirect(
       Component,
       clerk => !clerk.session?.currentTask,

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 { getTaskEndpoint, 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,13 @@ export const useSignInContext = (): SignInContextType => {
 
   const taskUrl = clerk.session?.currentTask
     ? (clerk.__internal_getOption('taskUrls')?.[clerk.session?.currentTask.key] ??
-      buildTaskUrl(clerk.session?.currentTask, { base: signInUrl }))
+      buildRedirectUrl({
+        routing: ctx.routing,
+        baseUrl: signInUrl,
+        authQueryString,
+        path: ctx.path,
+        endpoint: getTaskEndpoint(clerk.session?.currentTask),
+      }))
     : null;
 
   return {

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 { getTaskEndpoint, 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,13 @@ export const useSignUpContext = (): SignUpContextType => {
 
   const taskUrl = clerk.session?.currentTask
     ? (clerk.__internal_getOption('taskUrls')?.[clerk.session?.currentTask.key] ??
-      buildTaskUrl(clerk.session?.currentTask, { base: signUpUrl }))
+      buildRedirectUrl({
+        routing: ctx.routing,
+        baseUrl: signInUrl,
+        authQueryString,
+        path: ctx.path,
+        endpoint: getTaskEndpoint(clerk.session?.currentTask),
+      }))
     : null;
 
   return {

packages/types/src/clerk.ts

@@ -1208,8 +1208,7 @@ export type SetActiveParams = {
   /**
    * A custom navigation function to be called just before the session and/or organization is set.
    *
-   * When provided, it takes precedence
-   * over the `redirectUrl` parameter for navigation.
+   * When provided, it takes precedence over the `redirectUrl` parameter for navigation.
    *
    * @example
    * ```typescript