Introduce root route to resolve tasks

LauraBeatris · LauraBeatris · commit fd9a6f0980f5 · 2025-03-23T14:41:58.000-03:00
diff --git a/packages/clerk-js/src/core/sessionTasks.ts b/packages/clerk-js/src/core/sessionTasks.ts
@@ -30,7 +30,7 @@ export function navigateToTask(
   const taskRoute = `/tasks/${SESSION_TASK_ROUTE_BY_KEY[routeKey]}`;
 
   if (componentNavigationContext) {
-    return componentNavigationContext.navigate(componentNavigationContext.indexPath + routeKey);
+    return componentNavigationContext.navigate(componentNavigationContext.indexPath + taskRoute);
   }
 
   const signInUrl = options['signInUrl'] || environment.displayConfig.signInUrl;
diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts
@@ -12,8 +12,8 @@ const createMessageForDisabledOrganizations = (
   );
 };
 const warnings = {
-  cannotRenderComponentWhenSessionExists:
-    'The <SignUp/> and <SignIn/> components 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 Home URL instead.',
+  cannotRenderComponentWithoutSession:
+    'The component cannot render if the user does not have a valid session. Clerk is redirecting to the value set in `signInUrl` URL instead.',
   cannotRenderSignUpComponentWhenSessionExists:
     '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.',
   cannotRenderSignUpComponentWhenTaskExists:
diff --git a/packages/clerk-js/src/ui/common/redirects.ts b/packages/clerk-js/src/ui/common/redirects.ts
@@ -1,5 +1,6 @@
 import type { SessionTask } from '@clerk/types';
 
+import { SESSION_TASK_ROUTE_BY_KEY } from '../../core/sessionTasks';
 import { buildURL } from '../../utils/url';
 import type { SignInContextType, SignUpContextType, UserProfileContextType } from './../contexts';
 
@@ -44,7 +45,7 @@ export function buildSessionTaskRedirectUrl({
     routing,
     baseUrl,
     path,
-    endpoint: '/tasks',
+    endpoint: `/tasks/${SESSION_TASK_ROUTE_BY_KEY[task.key]}`,
     authQueryString: null,
   });
 }
diff --git a/packages/clerk-js/src/ui/common/withRedirect.tsx b/packages/clerk-js/src/ui/common/withRedirect.tsx
@@ -2,12 +2,12 @@ import { isDevelopmentFromPublishableKey } from '@clerk/shared/keys';
 import { useClerk } from '@clerk/shared/react';
 import type { Clerk, ClerkOptions, EnvironmentResource } from '@clerk/types';
 import type { ComponentType } from 'react';
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { warnings } from '../../core/warnings';
 import type { ComponentGuard } from '../../utils';
-import { sessionExistsAndSingleSessionModeEnabled } from '../../utils';
-import { useEnvironment, useOptions, useSignInContext, useSignUpContext } from '../contexts';
+import { noSessionExists, sessionExistsAndSingleSessionModeEnabled } from '../../utils';
+import { SignInContext, useEnvironment, useOptions, useSignInContext, useSignUpContext } from '../contexts';
 import { useRouter } from '../router';
 import type { AvailableComponentProps } from '../types';
 
@@ -93,3 +93,22 @@ export const withRedirectToAfterSignUp = <P extends AvailableComponentProps>(Com
 
   return HOC;
 };
+
+export const withRedirectToSignIn = <P extends AvailableComponentProps>(Component: ComponentType<P>) => {
+  const displayName = Component.displayName || Component.name || 'Component';
+  Component.displayName = displayName;
+
+  const HOC = (props: P) => {
+    const signInCtx = useContext(SignInContext);
+    return withRedirect(
+      Component,
+      noSessionExists,
+      ({ clerk }) => signInCtx?.afterSignInUrl || clerk.buildAfterSignInUrl(),
+      warnings.cannotRenderComponentWithoutSession,
+    )(props);
+  };
+
+  HOC.displayName = `withRedirectToSignIn(${displayName})`;
+
+  return HOC;
+};
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
@@ -2,7 +2,7 @@ import { useOrganizationList, useUser } from '@clerk/shared/react';
 import { useContext, useState } from 'react';
 
 import { useEnvironment, useOrganizationListContext } from '../../contexts';
-import { SessionTaskContext } from '../../contexts/components/SessionTask';
+import { SessionTasksContext } from '../../contexts/components/SessionTasks';
 import { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import { Action, Actions, Card, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
@@ -112,7 +112,7 @@ export const OrganizationListPage = withCardStateProvider(() => {
 const OrganizationListFlows = ({ showListInitially }: { showListInitially: boolean }) => {
   const { navigateAfterCreateOrganization, skipInvitationScreen, hideSlug } = useOrganizationListContext();
   const [isCreateOrganizationFlow, setCreateOrganizationFlow] = useState(!showListInitially);
-  const sessionTaskContext = useContext(SessionTaskContext);
+  const sessionTasksContext = useContext(SessionTasksContext);
   return (
     <>
       {!isCreateOrganizationFlow && (
@@ -127,7 +127,7 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
         >
           <CreateOrganizationForm
             flow='organizationList'
-            onComplete={sessionTaskContext?.nextTask}
+            onComplete={sessionTasksContext?.nextTask}
             startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}
             skipInvitationScreen={skipInvitationScreen}
             navigateAfterCreateOrganization={org =>
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserMembershipList.tsx
@@ -3,7 +3,7 @@ import type { OrganizationResource } from '@clerk/types';
 import { useContext } from 'react';
 
 import { useOrganizationListContext } from '../../contexts';
-import { SessionTaskContext } from '../../contexts/components/SessionTask';
+import { SessionTasksContext } from '../../contexts/components/SessionTasks';
 import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
@@ -12,7 +12,7 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
   const card = useCardState();
   const { navigateAfterSelectOrganization } = useOrganizationListContext();
   const { isLoaded, setActive } = useOrganizationList();
-  const sessionTaskContext = useContext(SessionTaskContext);
+  const sessionTasksContext = useContext(SessionTasksContext);
 
   if (!isLoaded) {
     return null;
@@ -23,8 +23,8 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
         organization,
       });
 
-      if (sessionTaskContext?.nextTask) {
-        return sessionTaskContext?.nextTask();
+      if (sessionTasksContext?.nextTask) {
+        return sessionTasksContext?.nextTask();
       }
 
       await navigateAfterSelectOrganization(organization);
diff --git a/packages/clerk-js/src/ui/components/SessionTasks/index.tsx b/packages/clerk-js/src/ui/components/SessionTasks/index.tsx
@@ -1,52 +1,97 @@
 import { useClerk } from '@clerk/shared/react';
 import { eventComponentMounted } from '@clerk/shared/telemetry';
 import type { SessionTask } from '@clerk/types';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useContext, useEffect } from 'react';
 
 import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
-import { SessionTaskContext as SessionTaskContext } from '../../contexts/components/SessionTask';
+import { withRedirectToSignIn } from '../../../ui/common';
+import { SignInContext, SignUpContext } from '../../../ui/contexts';
+import { Card, LoadingCardContainer, withCardStateProvider } from '../../../ui/elements';
+import { SessionTasksContext as SessionTasksContext } from '../../contexts/components/SessionTasks';
 import { Route, Switch, useRouter } from '../../router';
 import { LazyOrganizationSelectionTask } from './lazyTasks';
 import { usePreloadTasks } from './usePreloadTasks';
 
+const SessionTasksStart = withCardStateProvider(() => {
+  const clerk = useClerk();
+  const { navigate } = useRouter();
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      void clerk.session?.reload().then(session => {
+        if (!session.currentTask?.key) {
+          void navigate(clerk.buildAfterSignInUrl());
+          return;
+        }
+
+        void navigate(`${SESSION_TASK_ROUTE_BY_KEY[session.currentTask?.key]}`);
+      });
+    }, 1000);
+    return () => clearTimeout(timeoutId);
+  }, [navigate, clerk]);
+
+  return (
+    <Card.Root>
+      <Card.Content>
+        <LoadingCardContainer />
+      </Card.Content>
+      <Card.Footer />
+    </Card.Root>
+  );
+});
+
 function SessionTaskRoutes(): JSX.Element {
   return (
     <Switch>
       <Route path={SESSION_TASK_ROUTE_BY_KEY['org']}>
         <LazyOrganizationSelectionTask />
       </Route>
+      <Route index>
+        <SessionTasksStart />
+      </Route>
     </Switch>
   );
 }
 
 /**
  * @internal
  */
-export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): JSX.Element {
+function _SessionTask(): JSX.Element {
+  // TODO - Besides dynamically importing components, also prefetch subresources to avoid cascade of
+  // requests for each task component
   usePreloadTasks();
 
-  const { __experimental_nextTask, session, telemetry } = useClerk();
+  const clerk = useClerk();
   const { navigate } = useRouter();
+  const signInContext = useContext(SignInContext);
+  const signUpContext = useContext(SignUpContext);
 
-  const task = session?.currentTask;
+  const redirectUrlComplete =
+    signInContext?.afterSignInUrl ?? signUpContext?.afterSignUpUrl ?? clerk?.buildAfterSignInUrl();
 
   useEffect(() => {
-    if (task) {
-      telemetry?.record(eventComponentMounted('SessionTask', { task: task.key }));
+    const task = clerk.session?.currentTask;
+
+    if (!task) {
+      void navigate(redirectUrlComplete);
       return;
     }
 
-    void navigate(redirectUrlComplete);
-  }, [task, telemetry, navigate, redirectUrlComplete]);
+    clerk.telemetry?.record(eventComponentMounted('SessionTask', { task: task.key }));
+  }, [clerk, navigate, redirectUrlComplete]);
 
   const nextTask = useCallback(
-    () => __experimental_nextTask({ redirectUrlComplete }),
-    [__experimental_nextTask, redirectUrlComplete],
+    () => clerk.__experimental_nextTask({ redirectUrlComplete: redirectUrlComplete }),
+    [clerk, redirectUrlComplete],
   );
 
   return (
-    <SessionTaskContext.Provider value={{ nextTask }}>
+    <SessionTasksContext.Provider value={{ nextTask }}>
       <SessionTaskRoutes />
-    </SessionTaskContext.Provider>
+    </SessionTasksContext.Provider>
   );
 }
+
+const SessionTask = withRedirectToSignIn(_SessionTask);
+
+export { SessionTask };
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
@@ -130,7 +130,7 @@ function SignInRoutes(): JSX.Element {
                 <LazySignUpVerifyPhone />
               </Route>
               <Route path='tasks'>
-                <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
+                <SessionTasks />
               </Route>
               <Route index>
                 <LazySignUpContinue />
@@ -142,7 +142,7 @@ function SignInRoutes(): JSX.Element {
           </Route>
         )}
         <Route path='tasks'>
-          <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
+          <SessionTasks />
         </Route>
         <Route index>
           <SignInStart />
diff --git a/packages/clerk-js/src/ui/contexts/components/SessionTask.ts b/packages/clerk-js/src/ui/contexts/components/SessionTask.ts
diff --git a/packages/clerk-js/src/ui/contexts/components/SessionTasks.ts b/packages/clerk-js/src/ui/contexts/components/SessionTasks.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { SessionTasksCtx } from '../../types';
+
+export const SessionTasksContext = createContext<SessionTasksCtx | null>(null);
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -95,7 +95,6 @@ export const PricingTable = lazy(() =>
   componentImportPaths.PricingTable().then(module => ({ default: module.__experimental_PricingTable })),
 );
 
-export const preloadSessionTasks = () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks');
 export const SessionTasks = lazy(() =>
   componentImportPaths.SessionTasks().then(module => ({ default: module.SessionTask })),
 );
diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts
@@ -112,8 +112,8 @@ export type __experimental_CheckoutCtx = __experimental_CheckoutProps & {
   setIsOpen?: (open: boolean) => void;
 };
 
-export type SessionTaskCtx = {
-  nextTask: () => void;
+export type SessionTasksCtx = {
+  nextTask: () => Promise<void>;
 };
 
 export type AvailableComponentCtx =
diff --git a/packages/clerk-js/src/utils/componentGuards.ts b/packages/clerk-js/src/utils/componentGuards.ts
@@ -10,6 +10,10 @@ export const sessionExistsAndSingleSessionModeEnabled: ComponentGuard = (clerk,
   return !!(clerk.session && environment?.authConfig.singleSessionMode);
 };
 
+export const noSessionExists: ComponentGuard = clerk => {
+  return !clerk.isSignedIn;
+};
+
 export const noUserExists: ComponentGuard = clerk => {
   return !clerk.user;
 };

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export function navigateToTask(`
`30`	`30`	const taskRoute = `/tasks/${SESSION_TASK_ROUTE_BY_KEY[routeKey]}`;
`31`	`31`
`32`	`32`	`if (componentNavigationContext) {`
`33`		`- return componentNavigationContext.navigate(componentNavigationContext.indexPath + routeKey);`
	`33`	`+ return componentNavigationContext.navigate(componentNavigationContext.indexPath + taskRoute);`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`const signInUrl = options['signInUrl'] \|\| environment.displayConfig.signInUrl;`