Add unit test for redirection to task

clerk · Feb 24, 2025 · 2f7c8a3 · 2f7c8a3
1 parent 9a5415d
commit 2f7c8a3
Show file tree

Hide file tree

Showing 20 changed files with 126 additions and 128 deletions.
diff --git a/packages/clerk-js/src/core/__tests__/clerk.redirects.test.ts b/packages/clerk-js/src/core/__tests__/clerk.redirects.test.ts
@@ -122,6 +122,7 @@ describe('Clerk singleton - Redirects', () => {
 
       afterEach(() => {
         mockEnvironmentFetch.mockRestore();
+        mockClientFetch.mockRestore();
       });
 
       it('redirects to signInUrl for development instance', async () => {
@@ -220,6 +221,7 @@ describe('Clerk singleton - Redirects', () => {
 
       afterEach(() => {
         mockEnvironmentFetch.mockRestore();
+        mockClientFetch.mockRestore();
       });
 
       const host = 'http://another-test.host';
@@ -309,4 +311,56 @@ describe('Clerk singleton - Redirects', () => {
       expect(mockHref).toHaveBeenNthCalledWith(2, `${host}/?__clerk_db_jwt=deadbeef`);
     });
   });
+
+  describe('on signed-in session with pending tasks', () => {
+    let clerkForProductionInstance: Clerk;
+    let clerkForDevelopmentInstance: Clerk;
+
+    beforeEach(async () => {
+      mockEnvironmentFetch.mockReturnValue(
+        Promise.resolve({
+          userSettings: mockUserSettings,
+          displayConfig: mockDisplayConfigWithDifferentOrigin,
+          isProduction: () => false,
+          isDevelopmentOrStaging: () => true,
+        }),
+      );
+
+      mockClientFetch.mockReturnValue(
+        Promise.resolve({
+          signedInSessions: [
+            {
+              id: '1',
+              remove: jest.fn(),
+              status: 'pending',
+              currentTask: { key: 'org' },
+              user: {},
+              touch: jest.fn(() => Promise.resolve()),
+              getToken: jest.fn(),
+              lastActiveToken: { getRawString: () => 'mocked-token' },
+            },
+          ],
+        }),
+      );
+
+      clerkForProductionInstance = new Clerk(productionPublishableKey);
+      clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
+
+      await clerkForProductionInstance.load(mockedLoadOptions);
+      await clerkForDevelopmentInstance.load(mockedLoadOptions);
+    });
+
+    afterEach(() => {
+      mockEnvironmentFetch.mockRestore();
+      mockClientFetch.mockRestore();
+    });
+
+    it('when session has tasks, redirect to tasks URL', async () => {
+      await clerkForDevelopmentInstance.redirectToTasks();
+
+      expect(mockNavigate).toHaveBeenCalledWith('/#/select-organization', {
+        windowNavigate: expect.any(Function),
+      });
+    });
+  });
 });
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -43,7 +43,6 @@ import type {
   PublicKeyCredentialWithAuthenticatorAssertionResponse,
   PublicKeyCredentialWithAuthenticatorAttestationResponse,
   RedirectOptions,
-  RedirectToTasksUrlOptions,
   Resources,
   SDKMetadata,
   SetActiveParams,
@@ -67,7 +66,7 @@ import type {
   Web3Provider,
 } from '@clerk/types';
 
-import { sessionTaskRoutePaths } from '../ui/common/tasks';
+import { sessionTaskKeyToRoutePaths } from '../ui/common/tasks';
 import type { MountComponentRenderer } from '../ui/Components';
 import {
   ALLOWED_PROTOCOLS,
@@ -891,9 +890,7 @@ export class Clerk implements ClerkInterface {
 
     let newSession = session === undefined ? this.session : session;
 
-    const isResolvingSessionTasks =
-      !!newSession?.currentTask ||
-      window.location.href.includes(this.internal__buildTasksUrl({ task: newSession?.currentTask }));
+    const isResolvingSessionTasks = !!newSession?.currentTask || window.location.href.includes(this.buildTasksUrl());
 
     // At this point, the `session` variable should contain either an `SignedInSessionResource`
     // ,`null` or `undefined`.
@@ -1122,18 +1119,14 @@ export class Clerk implements ClerkInterface {
     return buildURL({ base: waitlistUrl, hashSearchParams: [initValues] }, { stringify: true });
   }
 
-  public internal__buildTasksUrl({ task = this.session?.currentTask, origin }: RedirectToTasksUrlOptions): string {
-    if (!task) {
+  public buildTasksUrl(): string {
+    const currentTask = this.session?.currentTask;
+
+    if (!currentTask) {
       return '';
     }
 
-    const signUpUrl = this.#options.signUpUrl || this.environment?.displayConfig.signUpUrl;
-    const referrerIsSignUpUrl = signUpUrl && window.location.href.includes(signUpUrl);
-
-    const originWithDefault = origin ?? (referrerIsSignUpUrl ? 'SignUp' : 'SignIn');
-    const defaultUrlByOrigin = originWithDefault === 'SignIn' ? this.#options.signInUrl : this.#options.signUpUrl;
-
-    return buildURL({ base: defaultUrlByOrigin, hashPath: sessionTaskRoutePaths[task.key] }, { stringify: true });
+    return buildURL({ hashPath: sessionTaskKeyToRoutePaths[currentTask.key] }, { stringify: true });
   }
 
   public buildAfterMultiSessionSingleSignOutUrl(): string {
@@ -1257,9 +1250,9 @@ export class Clerk implements ClerkInterface {
     return;
   };
 
-  public redirectToTasks = async (options: RedirectToTasksUrlOptions): Promise<unknown> => {
+  public redirectToTasks = async (): Promise<unknown> => {
     if (inBrowser()) {
-      return this.navigate(this.internal__buildTasksUrl(options));
+      return this.navigate(this.buildTasksUrl());
     }
     return;
   };
@@ -1765,16 +1758,16 @@ export class Clerk implements ClerkInterface {
       // A client response contains its associated sessions, along with a fresh token, so we dispatch a token update event.
       eventBus.dispatch(events.TokenUpdate, { token: this.session?.lastActiveToken });
 
-      // Any FAPI call could lead to a task being unsatisfied such as app owners
-      // actions therefore the check must be done on client piggybacking
+      this.#emit();
+
+      // Tasks handling must be reactive on client piggybacking to support
+      // immediate instance-level configuration changes by app owners
       if (session?.currentTask) {
         eventBus.dispatch(events.NewSessionTask, session);
       } else if (session && hasResolvedPreviousTask) {
         eventBus.dispatch(events.ResolvedSessionTask, session);
       }
     }
-
-    this.#emit();
   };
 
   get __unstable__environment(): EnvironmentResource | null | undefined {
@@ -2116,9 +2109,9 @@ export class Clerk implements ClerkInterface {
       this.#broadcastChannel?.postMessage({ type: 'signout' });
     });
 
-    eventBus.on(events.NewSessionTask, session => {
+    eventBus.on(events.NewSessionTask, () => {
       console.log('new session task');
-      void this.redirectToTasks({ task: session.currentTask });
+      void this.redirectToTasks();
     });
 
     eventBus.on(events.ResolvedSessionTask, () => {

diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts
@@ -18,10 +18,8 @@ const warnings = {
     'The <SignUp/> component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the value set in `afterSignUp` URL instead.',
   cannotRenderSignInComponentWhenSessionExists:
     'The <SignIn/> component cannot render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `afterSignIn` URL instead.',
-  cannotRenderSignInComponentWithPendingTasks:
-    'The <SignIn/> component cannot render when a user has pending tasks to resolve, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `tasksUrl` instead.',
-  cannotRenderSignUpComponentWithPendingTasks:
-    'The <SignUp/> component cannot render when a user has pending tasks to resolve, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `tasksUrl` instead.',
+  cannotRenderComponentWithPendingTasks:
+    'The component cannot render when a user has pending tasks to resolve, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, Clerk is redirecting to the `tasksUrl` instead.',
   cannotRenderComponentWhenUserDoesNotExist:
     '<UserProfile/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
   cannotRenderComponentWhenOrgDoesNotExist: `<OrganizationProfile/> cannot render unless an organization is active. Since no organization is currently active, this is no-op.`,

diff --git a/packages/clerk-js/src/ui/common/tasks.ts b/packages/clerk-js/src/ui/common/tasks.ts
@@ -1,8 +1,12 @@
 import type { SessionTask } from '@clerk/types';
 
+export const sessionTaskRoutePaths = ['select-organization'] as const;
+
+type SessionTaskRoutePath = (typeof sessionTaskRoutePaths)[number];
+
 /**
  * @internal
  */
-export const sessionTaskRoutePaths: Record<SessionTask['key'], string> = {
+export const sessionTaskKeyToRoutePaths: Record<SessionTask['key'], SessionTaskRoutePath> = {
   org: 'select-organization',
 };
diff --git a/packages/clerk-js/src/ui/common/withRedirect.tsx b/packages/clerk-js/src/ui/common/withRedirect.tsx
@@ -52,21 +52,20 @@ export function withRedirect<P extends AvailableComponentProps>(
   return HOC;
 }
 
-export const withRedirectToTasksAfterSignIn = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
+export const withRedirectToTasks = <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,
       hasPendingTasksAndSingleSessionModeEnabled,
-      () => signInCtx.tasksUrl,
-      warnings.cannotRenderSignInComponentWithPendingTasks,
+      ({ clerk }) => clerk.buildTasksUrl(),
+      warnings.cannotRenderComponentWithPendingTasks,
     )(props);
   };
 
-  HOC.displayName = `withRedirectToTasksAfterSignIn(${displayName})`;
+  HOC.displayName = `withRedirectToTasks(${displayName})`;
 
   return HOC;
 };
@@ -109,25 +108,6 @@ export const withRedirectToAfterSignUp = <P extends AvailableComponentProps>(Com
   return HOC;
 };
 
-export const withRedirectToTasksAfterSignUp = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
-  const displayName = Component.displayName || Component.name || 'Component';
-  Component.displayName = displayName;
-
-  const HOC = (props: P) => {
-    const signInCtx = useSignUpContext();
-    return withRedirect(
-      Component,
-      hasPendingTasksAndSingleSessionModeEnabled,
-      () => signInCtx.tasksUrl,
-      warnings.cannotRenderSignUpComponentWithPendingTasks,
-    )(props);
-  };
-
-  HOC.displayName = `withRedirectToTasksAfterSignIn(${displayName})`;
-
-  return HOC;
-};
-
 export const withRedirectToHomeSingleSessionGuard = <P extends AvailableComponentProps>(Component: ComponentType<P>) =>
   withRedirect(
     Component,

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { sessionTaskRoutePaths } from '../../../ui/common/tasks';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -19,7 +20,7 @@ import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
 import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
 import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
-import { useTaskRoute } from '../Task/useTaskRoute';
+import { Task } from '../Task';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
@@ -39,7 +40,6 @@ function RedirectToSignIn() {
 function SignInRoutes(): JSX.Element {
   const signInContext = useSignInContext();
   const signUpContext = useSignUpContext();
-  const taskRoute = useTaskRoute();
 
   return (
     <Flow.Root flow='signIn'>
@@ -134,7 +134,17 @@ function SignInRoutes(): JSX.Element {
             </Route>
           </Route>
         )}
-        {taskRoute && <Route {...taskRoute} />}
+
+        {sessionTaskRoutePaths.map(path => (
+          <Route
+            key={path}
+            path={path}
+            canActivate={clerk => !!clerk.session?.currentTask}
+          >
+            <Task />
+          </Route>
+        ))}
+
         <Route index>
           <SignInStart />
         </Route>

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -1,4 +1,4 @@
-import { withRedirectToAfterSignIn, withRedirectToTasksAfterSignIn } from '../../common';
+import { withRedirectToAfterSignIn, withRedirectToTasks } from '../../common';
 import { useEnvironment, useSignInContext, useSignOutContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import { Action, Actions, Card, Header, PreviewButton, UserPreview, withCardStateProvider } from '../../elements';
@@ -120,6 +120,6 @@ const _SignInAccountSwitcher = () => {
     </Flow.Part>
   );
 };
-export const SignInAccountSwitcher = withRedirectToTasksAfterSignIn(
+export const SignInAccountSwitcher = withRedirectToTasks(
   withRedirectToAfterSignIn(withCardStateProvider(_SignInAccountSwitcher)),
 );
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
@@ -1,7 +1,7 @@
 import type { SignInFactor } from '@clerk/types';
 import React from 'react';
 
-import { withRedirectToAfterSignIn, withRedirectToTasksAfterSignIn } from '../../common';
+import { withRedirectToAfterSignIn, withRedirectToTasks } from '../../common';
 import { useCoreSignIn, useEnvironment } from '../../contexts';
 import { ErrorCard, LoadingCard, useCardState, withCardStateProvider } from '../../elements';
 import { useAlternativeStrategies } from '../../hooks/useAlternativeStrategies';
@@ -210,6 +210,4 @@ export function _SignInFactorOne(): JSX.Element {
   }
 }
 
-export const SignInFactorOne = withRedirectToTasksAfterSignIn(
-  withRedirectToAfterSignIn(withCardStateProvider(_SignInFactorOne)),
-);
+export const SignInFactorOne = withRedirectToTasks(withRedirectToAfterSignIn(withCardStateProvider(_SignInFactorOne)));
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwo.tsx
@@ -1,7 +1,7 @@
 import type { SignInFactor } from '@clerk/types';
 import React from 'react';
 
-import { withRedirectToAfterSignIn, withRedirectToTasksAfterSignIn } from '../../common';
+import { withRedirectToAfterSignIn, withRedirectToTasks } from '../../common';
 import { useCoreSignIn } from '../../contexts';
 import { LoadingCard, withCardStateProvider } from '../../elements';
 import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods';
@@ -80,6 +80,4 @@ export function _SignInFactorTwo(): JSX.Element {
   }
 }
 
-export const SignInFactorTwo = withRedirectToTasksAfterSignIn(
-  withRedirectToAfterSignIn(withCardStateProvider(_SignInFactorTwo)),
-);
+export const SignInFactorTwo = withRedirectToTasks(withRedirectToAfterSignIn(withCardStateProvider(_SignInFactorTwo)));
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, withRedirectToTasksAfterSignIn } from '../../common';
+import { SSOCallback, withRedirectToAfterSignIn, withRedirectToTasks } from '../../common';
 
-export const SignInSSOCallback = withRedirectToTasksAfterSignIn(withRedirectToAfterSignIn(SSOCallback));
+export const SignInSSOCallback = withRedirectToTasks(withRedirectToAfterSignIn(SSOCallback));
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -11,7 +11,7 @@ import {
   getIdentifierControlDisplayValues,
   groupIdentifiers,
   withRedirectToAfterSignIn,
-  withRedirectToTasksAfterSignIn,
+  withRedirectToTasks,
 } from '../../common';
 import { buildSSOCallbackURL } from '../../common/redirects';
 import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
@@ -384,6 +384,7 @@ export function _SignInStart(): JSX.Element {
 
       clerk.client.signUp[attribute] = identifierField.value;
 
+      // HERE
       const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
       const redirectUrlComplete = ctx.afterSignUpUrl || '/';
 
@@ -573,6 +574,4 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
   );
 };
 
-export const SignInStart = withRedirectToTasksAfterSignIn(
-  withRedirectToAfterSignIn(withCardStateProvider(_SignInStart)),
-);
+export const SignInStart = withRedirectToTasks(withRedirectToAfterSignIn(withCardStateProvider(_SignInStart)));