Introduce root route to resolve tasks

Author: LauraBeatris

packages/clerk-js/bundlewatch.config.json

@@ -22,6 +22,6 @@
     { "path": "./dist/pricingTable*.js", "maxSize": "5KB" },
     { "path": "./dist/checkout*.js", "maxSize": "9KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" },
-    { "path": "./dist/session-tasks*.js", "maxSize": "1KB" }
+    { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }
   ]
 }

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

@@ -486,14 +486,14 @@ describe('Clerk singleton', () => {
         getToken: jest.fn(),
         lastActiveToken: { getRawString: () => 'mocked-token' },
         tasks: [{ key: 'org' }],
-        currentTask: { key: 'org', __internal_getUrl: () => 'https://foocorp.com/add-organization' },
+        currentTask: { key: 'org', __internal_getUrl: () => 'https://sut/tasks/add-organization' },
         reload: jest.fn(() =>
           Promise.resolve({
             id: '1',
             status: 'pending',
             user: {},
             tasks: [{ key: 'org' }],
-            currentTask: { key: 'org', __internal_getUrl: () => 'https://foocorp.com/add-organization' },
+            currentTask: { key: 'org', __internal_getUrl: () => 'https://sut/tasks/add-organization' },
           }),
         ),
       };
@@ -2287,7 +2287,7 @@ describe('Clerk singleton', () => {
         status: 'pending',
         user: {},
         tasks: [{ key: 'org' }],
-        currentTask: { key: 'org', __internal_getUrl: () => 'https://foocorp.com/add-organization' },
+        currentTask: { key: 'org', __internal_getUrl: () => 'https://sut/tasks/add-organization' },
         lastActiveToken: { getRawString: () => 'mocked-token' },
       };
 
@@ -2316,7 +2316,7 @@ describe('Clerk singleton', () => {
         await sut.setActive({ session: mockResource as any as PendingSessionResource });
         await sut.__experimental_nextTask();
 
-        expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/add-organization');
+        expect(mockNavigate.mock.calls[0][0]).toBe('/sign-in#/tasks/add-organization');
       });
     });
 

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';
@@ -17,6 +17,8 @@ import { organizationListParams } from './utils';
 const useOrganizationListInView = () => {
   const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
+  console.log({ userMemberships });
+
   const { ref } = useInView({
     threshold: 0,
     onChange: inView => {
@@ -112,7 +114,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 +129,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/OrganizationSelectionTask.tsx

@@ -1,19 +1,58 @@
 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 { OrganizationListContext, 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';
+import { OrganizationList } from '../OrganizationList';
+
+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 />
+        <OrganizationListContext.Provider
+          value={{
+            componentName: 'OrganizationList',
+            skipInvitationScreen: true,
+          }}
+        >
+          <OrganizationList />
+        </OrganizationListContext.Provider>
+      </Route>
+      <Route index>
+        <SessionTasksStart />
       </Route>
     </Switch>
   );
@@ -22,31 +61,34 @@ function SessionTaskRoutes(): JSX.Element {
 /**
  * @internal
  */
-export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): JSX.Element {
-  usePreloadTasks();
-
-  const { __experimental_nextTask, session, telemetry } = useClerk();
+export function SessionTask(): JSX.Element {
+  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>
   );
 }

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

@@ -2,6 +2,7 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
+import { SessionTasks } from '../../../ui/lazyModules/components';
 import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
 import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import type { SignUpContextType } from '../../contexts';
@@ -14,7 +15,7 @@ import {
 } from '../../contexts';
 import { Flow } from '../../customizables';
 import { useFetch } from '../../hooks';
-import { SessionTasks } from '../../lazyModules/components';
+import { usePreloadTasks } from '../../hooks/usePreloadTasks';
 import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import {
   LazySignUpContinue,
@@ -130,7 +131,7 @@ function SignInRoutes(): JSX.Element {
                 <LazySignUpVerifyPhone />
               </Route>
               <Route path='tasks'>
-                <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
+                <SessionTasks />
               </Route>
               <Route index>
                 <LazySignUpContinue />
@@ -142,7 +143,7 @@ function SignInRoutes(): JSX.Element {
           </Route>
         )}
         <Route path='tasks'>
-          <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
+          <SessionTasks />
         </Route>
         <Route index>
           <SignInStart />
@@ -179,6 +180,8 @@ function SignInRoot() {
    */
   usePreloadSignUp(signInContext.isCombinedFlow);
 
+  usePreloadTasks();
+
   React.useEffect(() => {
     return __internal_setComponentNavigationContext?.({ indexPath, navigate });
   }, [indexPath, navigate]);

packages/clerk-js/src/ui/components/SessionTasks/lazyTasks.ts

@@ -2,10 +2,11 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
+import { SessionTasks } from '../../../ui/lazyModules/components';
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
-import { SessionTasks } from '../../lazyModules/components';
+import { usePreloadTasks } from '../../hooks/usePreloadTasks';
 import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { SignUpContinue } from './SignUpContinue';
 import { SignUpSSOCallback } from './SignUpSSOCallback';
@@ -22,6 +23,8 @@ function RedirectToSignUp() {
 }
 
 function SignUpRoutes(): JSX.Element {
+  usePreloadTasks();
+
   const { __internal_setComponentNavigationContext } = useClerk();
   const { navigate, indexPath } = useRouter();
   const signUpContext = useSignUpContext();
@@ -82,7 +85,7 @@ function SignUpRoutes(): JSX.Element {
           </Route>
         </Route>
         <Route path='tasks'>
-          <SessionTasks redirectUrlComplete={signUpContext.afterSignUpUrl} />
+          <SessionTasks />
         </Route>
         <Route index>
           <SignUpStart />

packages/clerk-js/src/ui/components/SessionTasks/usePreloadTasks.ts

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