Navigate to next task if any from AIOs

Author: LauraBeatris

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

@@ -1,5 +1,6 @@
 import { useClerk } from '@clerk/shared/react';
 import { eventComponentMounted } from '@clerk/shared/telemetry';
+import type { SetActiveNavigate } from '@clerk/types';
 import { useContext, useEffect, useRef } from 'react';
 
 import { Card } from '@/ui/elements/Card';
@@ -27,7 +28,6 @@ const SessionTasksStart = () => {
       const currentTaskKey = clerk.session?.currentTask?.key;
       if (!currentTaskKey) return;
 
-      // TODO -> Fix navigation here
       void navigate(`./${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`);
     }, 500);
     return () => clearTimeout(timeoutId);
@@ -106,8 +106,17 @@ export const SessionTasks = withCardStateProvider(() => {
     );
   }
 
+  const onPendingSession: SetActiveNavigate = async ({ session }) => {
+    const currentTaskKey = session.currentTask?.key;
+    if (!currentTaskKey) {
+      return;
+    }
+
+    return navigate(`./${currentTaskKey}`);
+  };
+
   return (
-    <SessionTasksContext.Provider value={{ redirectUrlComplete, currentTaskContainer }}>
+    <SessionTasksContext.Provider value={{ redirectUrlComplete, currentTaskContainer, onPendingSession }}>
       <SessionTasksRoutes />
     </SessionTasksContext.Provider>
   );

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

@@ -97,7 +97,7 @@ export const ChooseOrganizationScreen = withCardStateProvider(
 
 const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
   const card = useCardState();
-  const { redirectUrlComplete } = useSessionTasksContext();
+  const { redirectUrlComplete, onPendingSession } = useSessionTasksContext();
   const { isLoaded, setActive } = useOrganizationList();
 
   if (!isLoaded) {
@@ -109,6 +109,7 @@ const MembershipPreview = withCardStateProvider((props: { organization: Organiza
       await setActive({
         organization,
         redirectUrl: redirectUrlComplete,
+        navigate: onPendingSession,
       });
     });
   };

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

@@ -19,7 +19,7 @@ type CreateOrganizationScreenProps = {
 
 export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrganizationScreenProps) => {
   const card = useCardState();
-  const { redirectUrlComplete } = useSessionTasksContext();
+  const { redirectUrlComplete, onPendingSession } = useSessionTasksContext();
   const { createOrganization, isLoaded, setActive } = useOrganizationList({
     userMemberships: organizationListParams.userMemberships,
   });
@@ -45,7 +45,7 @@ export const CreateOrganizationScreen = withCardStateProvider((props: CreateOrga
     try {
       const organization = await createOrganization({ name: nameField.value, slug: slugField.value });
 
-      await setActive({ organization, redirectUrl: redirectUrlComplete });
+      await setActive({ organization, redirectUrl: redirectUrlComplete, navigate: onPendingSession });
     } catch (err) {
       handleError(err, [nameField, slugField], card.setError);
     }

packages/clerk-js/src/ui/types.ts

@@ -12,6 +12,7 @@ import type {
   OrganizationProfileProps,
   OrganizationSwitcherProps,
   PricingTableProps,
+  SetActiveNavigate,
   SignInFallbackRedirectUrl,
   SignInForceRedirectUrl,
   SignInProps,
@@ -136,6 +137,7 @@ export type CheckoutCtx = __internal_CheckoutProps & {
 export type SessionTasksCtx = {
   redirectUrlComplete: string;
   currentTaskContainer?: React.RefObject<HTMLDivElement> | null;
+  onPendingSession?: SetActiveNavigate;
 };
 
 export type TaskChooseOrganizationCtx = TaskChooseOrganizationProps & {