Use taskUrl from AIOs navigation

Author: LauraBeatris

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

@@ -1929,6 +1929,7 @@ export class Clerk implements ClerkInterface {
       return this.setActive({
         session: su.sessionId,
         redirectUrl: redirectUrls.getAfterSignUpUrl(),
+        onPendingSession,
       });
     }
 
@@ -1953,6 +1954,7 @@ export class Clerk implements ClerkInterface {
         return this.setActive({
           session: sessionId,
           redirectUrl: redirectUrls.getAfterSignInUrl(),
+          onPendingSession,
         });
       }
     }

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

@@ -27,7 +27,10 @@ const SessionTasksStart = () => {
       const currentTaskKey = clerk.session?.currentTask?.key;
       if (!currentTaskKey) return;
 
-      void navigate(`./${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`);
+      void navigate(
+        clerk.__internal_getOption('taskUrls')?.[currentTaskKey] ??
+          `./${INTERNAL_SESSION_TASK_ROUTE_BY_KEY[currentTaskKey]}`,
+      );
     }, 500);
     return () => clearTimeout(timeoutId);
   }, [navigate, clerk, redirectUrlComplete]);

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

@@ -97,7 +97,6 @@ export const ChooseOrganizationScreen = withCardStateProvider(
 
 const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
   const card = useCardState();
-
   const { redirectUrlComplete } = useSessionTasksContext();
   const { isLoaded, setActive } = useOrganizationList();
 

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

@@ -199,7 +199,6 @@ function SignInStartInternal(): JSX.Element {
     }
   }, [identifierField.value, identifierAttributes]);
 
-  // TODO -> Maybe navigate on a effect here?
   useEffect(() => {
     if (!organizationTicket) {
       return;

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

@@ -21,7 +21,7 @@ type UseMultisessionActionsParams = {
 } & Pick<UserButtonProps, 'userProfileMode' | 'appearance' | 'userProfileProps'>;
 
 export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
-  const { setActive, signOut, openUserProfile } = useClerk();
+  const { setActive, signOut, openUserProfile, __internal_getOption } = useClerk();
   const card = useCardState();
   const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });
   const { navigate } = useRouter();
@@ -80,7 +80,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
         await navigateToTask(session, {
           baseUrl: displayConfig.signInUrl,
           navigate: navigate,
-          // TODO -> Pass `clerk` into callback so we can access the taskUrls here
+          options: { taskUrls: __internal_getOption('taskUrls') },
         });
       },
     }).finally(() => {

packages/clerk-js/src/ui/contexts/components/SignUp.ts

@@ -117,10 +117,11 @@ export const useSignUpContext = (): SignUpContextType => {
 
   const onPendingSession: OnPendingSessionFn = async ({ session }) => {
     const currentTaskKey = session.currentTask.key;
+    const customTaskUrl = clerk.__internal_getOption('taskUrls')?.[currentTaskKey];
 
     switch (currentTaskKey) {
       case 'choose-organization': {
-        await navigate(`../tasks/${currentTaskKey}`);
+        await navigate(customTaskUrl ?? `../tasks/${currentTaskKey}`);
       }
     }
   };

packages/types/src/clerk.ts

@@ -1071,7 +1071,7 @@ export type ClerkOptions = ClerkOptionsNavigation &
     taskUrls?: Record<SessionTask['key'], string>;
 
     /**
-     * Event handler for session transitions to `pending`
+     * Event handler called when a session transitions to `pending` status after successful sign-in.
      */
     onPendingSession?: OnPendingSessionFn;
   };
@@ -1199,6 +1199,9 @@ export type SetActiveParams = {
    */
   redirectUrl?: string;
 
+  /**
+   * Event handler called when a session transitions to `pending` status after successful sign-in.
+   */
   onPendingSession?: OnPendingSessionFn;
 };