Introduce root route to resolve tasks

Author: LauraBeatris

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' },
           }),
         ),
       };
@@ -2276,7 +2276,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' },
       };
 
@@ -2305,7 +2305,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/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:

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/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?.signInUrl || clerk.buildSignInUrl(),
+      warnings.cannotRenderComponentWithoutSession,
+    )(props);
+  };
+
+  HOC.displayName = `withRedirectToSignIn(${displayName})`;
+
+  return HOC;
+};

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,59 @@
 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 { 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 +62,38 @@ function SessionTaskRoutes(): JSX.Element {
 /**
  * @internal
  */
-export function SessionTask({ redirectUrlComplete }: { redirectUrlComplete: string }): JSX.Element {
-  usePreloadTasks();
-
-  const { __experimental_nextTask, session, telemetry } = useClerk();
+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>
   );
 }
+
+const SessionTask = withRedirectToSignIn(_SessionTask);
+
+export { SessionTask };

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

@@ -1,12 +1,22 @@
 import { lazy } from 'react';
 
-export const preloadOrganizationSelectionTask = () =>
-  import(/* webpackChunkName: "session-tasks"*/ './OrganizationSelectionTask');
+import { useEnvironment } from '../../contexts';
+import { useFetch } from '../../hooks';
 
-const LazyOrganizationSelectionTask = lazy(() =>
-  import(/* webpackChunkName: "session-tasks"*/ './OrganizationSelectionTask').then(module => ({
-    default: module.OrganizationSelectionTask,
-  })),
-);
+/**
+ * Preloads tasks based on the environment settings
+ * @internal
+ */
+export function usePreloadTasks() {
+  const { organizationSettings } = useEnvironment();
+
+  const hasTasks = organizationSettings.forceOrganizationSelection;
 
-export { LazyOrganizationSelectionTask };
+  void useFetch(hasTasks ? () => import(/* webpackChunkName: "session-tasks" */ '.') : undefined, 'preloadComponent', {
+    staleTime: Infinity,
+  });
+}
+
+export const LazySessionTasks = lazy(() =>
+  import(/* webpackChunkName: "session-tasks" */ '.').then(module => ({ default: module.SessionTask })),
+);

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

@@ -1,15 +0,0 @@
-import { useEnvironment } from '../../../ui/contexts';
-import { useFetch } from '../../../ui/hooks';
-import { preloadOrganizationSelectionTask } from './lazyTasks';
-
-/**
- * Preloads tasks based on the environment settings
- * @internal
- */
-export function usePreloadTasks() {
-  const { organizationSettings } = useEnvironment();
-
-  if (organizationSettings.forceOrganizationSelection) {
-    void useFetch(preloadOrganizationSelectionTask, 'preloadComponent', { staleTime: Infinity });
-  }
-}

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

@@ -14,8 +14,8 @@ import {
 } from '../../contexts';
 import { Flow } from '../../customizables';
 import { useFetch } from '../../hooks';
-import { SessionTasks } from '../../lazyModules/components';
 import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
+import { LazySessionTasks, usePreloadTasks } from '../SessionTasks/lazyTasks';
 import {
   LazySignUpContinue,
   LazySignUpSSOCallback,
@@ -130,7 +130,7 @@ function SignInRoutes(): JSX.Element {
                 <LazySignUpVerifyPhone />
               </Route>
               <Route path='tasks'>
-                <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
+                <LazySessionTasks />
               </Route>
               <Route index>
                 <LazySignUpContinue />
@@ -142,7 +142,7 @@ function SignInRoutes(): JSX.Element {
           </Route>
         )}
         <Route path='tasks'>
-          <SessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
+          <LazySessionTasks />
         </Route>
         <Route index>
           <SignInStart />
@@ -179,6 +179,8 @@ function SignInRoot() {
    */
   usePreloadSignUp(signInContext.isCombinedFlow);
 
+  usePreloadTasks();
+
   React.useEffect(() => {
     return __internal_setComponentNavigationContext?.({ indexPath, navigate });
   }, [indexPath, navigate]);