Introduce root route to resolve tasks

Author: LauraBeatris

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;

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,
   });
 }

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 =>

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);

packages/clerk-js/src/ui/components/SessionTasks/index.tsx

@@ -4,17 +4,54 @@ import type { SessionTask } from '@clerk/types';
 import { useCallback, useEffect } from 'react';
 
 import { SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
-import { SessionTaskContext as SessionTaskContext } from '../../contexts/components/SessionTask';
+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(() => {
+    if (!clerk.session) {
+      void navigate(clerk.buildSignInUrl());
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      void clerk.session?.reload().then(session => {
+        if (!session.currentTask?.key) {
+          void navigate(clerk.buildSignInUrl());
+          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>
   );
 }
@@ -23,6 +60,8 @@ function SessionTaskRoutes(): JSX.Element {
  * @internal
  */
 export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): 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();
@@ -45,8 +84,8 @@ export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: stri
   );
 
   return (
-    <SessionTaskContext.Provider value={{ nextTask }}>
+    <SessionTasksContext.Provider value={{ nextTask }}>
       <SessionTaskRoutes />
-    </SessionTaskContext.Provider>
+    </SessionTasksContext.Provider>
   );
 }

packages/clerk-js/src/ui/contexts/components/SessionTask.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { SessionTasksCtx } from '../../types';
+
+export const SessionTasksContext = createContext<SessionTasksCtx | null>(null);

packages/clerk-js/src/ui/contexts/components/SessionTasks.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 })),
 );

packages/clerk-js/src/ui/lazyModules/components.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 =