Render select-organization route

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

@@ -66,6 +66,7 @@ import type {
   Web3Provider,
 } from '@clerk/types';
 
+import { sessionTaskRoutePaths } from '../ui/common/tasks';
 import type { MountComponentRenderer } from '../ui/Components';
 import {
   ALLOWED_PROTOCOLS,
@@ -1064,6 +1065,24 @@ export class Clerk implements ClerkInterface {
     return this.#authService.decorateUrlWithDevBrowserToken(toURL).href;
   }
 
+  public buildTaskUrl(): string {
+    const [pendingTask] = this.session?.tasks ?? [];
+
+    if (!pendingTask || !this.environment) {
+      return '';
+    }
+
+    const signInOrUpUrl = this.#options.signInUrl!;
+
+    return buildURL(
+      {
+        base: signInOrUpUrl,
+        hashPath: sessionTaskRoutePaths[pendingTask.key],
+      },
+      { stringify: true },
+    );
+  }
+
   public buildSignInUrl(options?: SignInRedirectOptions): string {
     return this.#buildUrl(
       'signInUrl',

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

@@ -303,4 +303,8 @@ export class Session extends BaseResource implements SessionResource {
       return token.getRawString() || null;
     });
   }
+
+  get hasPendingTasks() {
+    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/PendingTask/PendingTask.tsx

@@ -1,46 +1,30 @@
 import { useSessionContext } from '@clerk/shared/react/index';
 import type { SessionTask } from '@clerk/types';
 import type { ComponentType } from 'react';
-import { withRedirectToAfterSignIn } from 'ui/common';
 
-import { Route } from '../../../ui/router';
+import { OrganizationListContext } from '../../../ui/contexts';
 import { OrganizationList } from '../OrganizationList';
 
-const paths: Record<SessionTask['key'], string> = {
-  orgs: 'select-organization',
-};
-
 const TaskRegistry: Record<SessionTask['key'], ComponentType> = {
-  orgs: OrganizationList,
+  org: () => (
+    <OrganizationListContext.Provider value={{ componentName: 'OrganizationList' }}>
+      <OrganizationList />
+    </OrganizationListContext.Provider>
+  ),
 };
 
-function usePendingTask() {
+/**
+ * @internal
+ */
+export function PendingTask(): React.ReactNode {
   const session = useSessionContext();
 
-  if (!session) {
+  if (!session?.hasPendingTasks) {
     return null;
   }
 
   const [pendingTask] = session.tasks ?? [];
+  const Task = TaskRegistry[pendingTask.key];
 
-  return pendingTask;
-}
-
-export function _PendingTask() {
-  const pendingTask = usePendingTask();
-
-  if (!pendingTask) {
-    return null;
-  }
-
-  const Task = TaskRegistry['orgs'];
-  const path = paths[pendingTask.key];
-
-  return (
-    <Route path={path}>
-      <Task />
-    </Route>
-  );
+  return <Task />;
 }
-
-export const PendingTask = withRedirectToAfterSignIn(_PendingTask);

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

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

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

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

packages/clerk-js/src/ui/components/PendingTask/usePendingTaskRoute.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 '../../../ui/common/tasks';
+import { PendingTask } from './PendingTask';
+
+/**
+ * Maps a session task key to routing props and content
+ * @internal
+ */
+export function usePendingTaskRoute(): ComponentProps<typeof Route> | null {
+  const session = useSessionContext();
+
+  if (!session?.hasPendingTasks) {
+    return null;
+  }
+
+  const [pendingTask] = session.tasks ?? [];
+
+  return {
+    children: <PendingTask />,
+    path: sessionTaskRoutePaths[pendingTask.key],
+  };
+}

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

@@ -14,7 +14,7 @@ import {
 } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
-import { PendingTask } from '../PendingTask';
+import { usePendingTaskRoute } from '../PendingTask/usePendingTaskRoute';
 import { SignUpContinue } from '../SignUp/SignUpContinue';
 import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
@@ -39,10 +39,12 @@ function RedirectToSignIn() {
 function SignInRoutes(): JSX.Element {
   const signInContext = useSignInContext();
   const signUpContext = useSignUpContext();
+  const pendingTaskRoute = usePendingTaskRoute();
 
   return (
     <Flow.Root flow='signIn'>
       <Switch>
+        {pendingTaskRoute && <Route {...pendingTaskRoute} />}
         <Route path='factor-one'>
           <SignInFactorOne />
         </Route>
@@ -139,7 +141,6 @@ function SignInRoutes(): JSX.Element {
         <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 { usePendingTaskRoute } from '../PendingTask/usePendingTaskRoute';
 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 pendingTaskRoute = usePendingTaskRoute();
 
   return (
     <Flow.Root flow='signUp'>
       <Switch>
+        {pendingTaskRoute && <Route {...pendingTaskRoute} />}
         <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/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?.hasPendingTasks && environment?.authConfig.singleSessionMode);
 };
 
 export const noUserExists: ComponentGuard = clerk => {