Render select-organization route

packages/clerk-js/src/core/resources/Session.ts

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
       return token.getRawString() || null;
     });
   }
+
+  get hasTask() {
+    return (this.tasks ?? []).length > 0;
+  }
 }

packages/clerk-js/src/ui/common/tasks.ts

@@ -0,0 +1,8 @@
+import type { SessionTask } from '@clerk/types';
+
+/**
+ * @internal
+ */
+export const sessionTaskRoutePaths: Record<SessionTask['key'], string> = {
+  org: 'select-organization',
+};

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -14,12 +14,12 @@ import {
 } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
-import { PendingTask } from '../PendingTask';
 import { SignUpContinue } from '../SignUp/SignUpContinue';
 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 { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
@@ -39,6 +39,7 @@ function RedirectToSignIn() {
 function SignInRoutes(): JSX.Element {
   const signInContext = useSignInContext();
   const signUpContext = useSignUpContext();
+  const taskRoute = useTaskRoute();
 
   return (
     <Flow.Root flow='signIn'>
@@ -133,13 +134,19 @@ function SignInRoutes(): JSX.Element {
             </Route>
           </Route>
         )}
+        {taskRoute && (
+          // todo - fix routing, do not use index
+          <Route
+            {...taskRoute}
+            index
+          />
+        )}
         <Route index>
           <SignInStart />
         </Route>
         <Route>
           <RedirectToSignIn />
         </Route>
-        <PendingTask />
       </Switch>
     </Flow.Root>
   );

packages/clerk-js/src/ui/components/SignUp/SignUp.tsx

@@ -6,7 +6,7 @@ import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowC
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
-import { PendingTask } from '../PendingTask';
+import { useTaskRoute } from '../Task/useTaskRoute';
 import { SignUpContinue } from './SignUpContinue';
 import { SignUpSSOCallback } from './SignUpSSOCallback';
 import { SignUpStart } from './SignUpStart';
@@ -23,10 +23,12 @@ function RedirectToSignUp() {
 
 function SignUpRoutes(): JSX.Element {
   const signUpContext = useSignUpContext();
+  const taskRoute = useTaskRoute();
 
   return (
     <Flow.Root flow='signUp'>
       <Switch>
+        {taskRoute && <Route {...taskRoute} />}
         <Route
           path='verify-email-address'
           canActivate={clerk => !!clerk.client.signUp.emailAddress}
@@ -81,7 +83,6 @@ function SignUpRoutes(): JSX.Element {
         <Route>
           <RedirectToSignUp />
         </Route>
-        <PendingTask />
       </Switch>
     </Flow.Root>
   );

packages/clerk-js/src/ui/components/Task/Task.tsx

@@ -0,0 +1,30 @@
+import { useSessionContext } from '@clerk/shared/react/index';
+import type { SessionTask } from '@clerk/types';
+import type { ComponentType } from 'react';
+
+import { OrganizationListContext } from '../../contexts';
+import { OrganizationList } from '../OrganizationList';
+
+const TaskRegistry: Record<SessionTask['key'], ComponentType> = {
+  org: () => (
+    <OrganizationListContext.Provider value={{ componentName: 'OrganizationList', hidePersonal: true }}>
+      <OrganizationList />
+    </OrganizationListContext.Provider>
+  ),
+};
+
+/**
+ * @internal
+ */
+export function Task(): React.ReactNode {
+  const session = useSessionContext();
+
+  if (!session?.hasTask) {
+    return null;
+  }
+
+  const [task] = session.tasks ?? [];
+  const Task = TaskRegistry[task.key];
+
+  return <Task />;
+}

packages/clerk-js/src/ui/components/Task/__tests__/PendingTask.spec.ts

@@ -0,0 +1 @@
+// todo

packages/clerk-js/src/ui/components/Task/__tests__/usePendingTaskRoute.spec.ts

@@ -0,0 +1 @@
+// todo

packages/clerk-js/src/ui/components/Task/useTaskRoute.tsx

@@ -0,0 +1,25 @@
+import { useSessionContext } from '@clerk/shared/react/index';
+import type { Route } from '@clerk/shared/router';
+import type { ComponentProps } from 'react';
+
+import { sessionTaskRoutePaths } from '../../common/tasks';
+import { Task } from './Task';
+
+/**
+ * Maps a session task key to routing props and content
+ * @internal
+ */
+export function useTaskRoute(): ComponentProps<typeof Route> | null {
+  const session = useSessionContext();
+
+  if (!session?.hasTask) {
+    return null;
+  }
+
+  const [task] = session.tasks ?? [];
+
+  return {
+    children: <Task />,
+    path: sessionTaskRoutePaths[task.key],
+  };
+}

packages/clerk-js/src/utils/componentGuards.ts

@@ -7,7 +7,7 @@ export type ComponentGuard = (
 ) => boolean;
 
 export const sessionExistsAndSingleSessionModeEnabled: ComponentGuard = (clerk, environment) => {
-  return !!(clerk.session?.status === 'active' && environment?.authConfig.singleSessionMode);
+  return !!(clerk.isSignedIn && !clerk.session?.hasTask && environment?.authConfig.singleSessionMode);
 };
 
 export const noUserExists: ComponentGuard = clerk => {

packages/types/src/session.ts

@@ -104,7 +104,7 @@ export interface SessionResource extends ClerkResource {
   lastActiveAt: Date;
   actor: ActJWTClaim | null;
   tasks: Array<SessionTask> | null;
-  hasPendingTasks: boolean;
+  hasTask: boolean;
   user: UserResource | null;
   publicUserData: PublicUserData;
   end: () => Promise<SessionResource>;