Display pending task routes

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

@@ -0,0 +1,50 @@
+import { useSessionContext } from '@clerk/shared/react/index';
+import type { SessionTasks } from '@clerk/types';
+import type { ComponentType } from 'react';
+import { withRedirectToAfterSignIn } from 'ui/common';
+
+import { Route } from '../../../ui/router';
+import { OrganizationList } from '../OrganizationList';
+
+const paths: Record<keyof SessionTasks, string> = {
+  orgs: 'select-organization',
+};
+
+const TaskRegistry: Record<keyof SessionTasks, ComponentType> = {
+  orgs: OrganizationList,
+};
+
+function usePendingTask() {
+  const session = useSessionContext();
+
+  if (!session) {
+    return null;
+  }
+
+  const [pendingTask] = Object.entries(session.tasks ?? {}).map(([task, value]) => ({
+    task,
+    ...value,
+  }));
+
+  return pendingTask;
+}
+
+export function _PendingTask() {
+  const pendingTask = usePendingTask();
+
+  if (!pendingTask) {
+    return null;
+  }
+
+  const Task = TaskRegistry['orgs'];
+  // @ts-ignore
+  const path = paths[pendingTask.task];
+
+  return (
+    <Route path={path}>
+      <Task />
+    </Route>
+  );
+}
+
+export const PendingTask = withRedirectToAfterSignIn(_PendingTask);

packages/clerk-js/src/ui/components/PendingTask/index.ts

@@ -0,0 +1 @@
+export * from './PendingTask';

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

@@ -14,6 +14,7 @@ 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';
@@ -138,6 +139,7 @@ function SignInRoutes(): JSX.Element {
         <Route>
           <RedirectToSignIn />
         </Route>
+        <PendingTask />
       </Switch>
     </Flow.Root>
   );

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

@@ -6,6 +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 { SignUpContinue } from './SignUpContinue';
 import { SignUpSSOCallback } from './SignUpSSOCallback';
 import { SignUpStart } from './SignUpStart';
@@ -80,6 +81,7 @@ function SignUpRoutes(): JSX.Element {
         <Route>
           <RedirectToSignUp />
         </Route>
+        <PendingTask />
       </Switch>
     </Flow.Root>
   );