Navigate to tasks from sign up context

Author: LauraBeatris

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

@@ -38,6 +38,7 @@ function SignUpContinueInternal() {
     unsafeMetadata,
     initialValues = {},
     isCombinedFlow: _isCombinedFlow,
+    onPendingSession,
   } = useSignUpContext();
   const signUp = useCoreSignUp();
   const isWithinSignInContext = !!React.useContext(SignInContext);
@@ -178,7 +179,8 @@ function SignUpContinueInternal() {
           signUp: res,
           verifyEmailPath: './verify-email-address',
           verifyPhonePath: './verify-phone-number',
-          handleComplete: () => clerk.setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl }),
+          handleComplete: () =>
+            clerk.setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl, onPendingSession }),
           navigate,
           oidcPrompt: ctx.oidcPrompt,
         }),

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

@@ -17,7 +17,7 @@ export const SignUpEmailLinkCard = () => {
   const { t } = useLocalizations();
   const signUp = useCoreSignUp();
   const signUpContext = useSignUpContext();
-  const { afterSignUpUrl } = signUpContext;
+  const { afterSignUpUrl, onPendingSession } = signUpContext;
   const card = useCardState();
   const { navigate } = useRouter();
   const { setActive } = useClerk();
@@ -56,7 +56,8 @@ export const SignUpEmailLinkCard = () => {
         continuePath: '../continue',
         verifyEmailPath: '../verify-email-address',
         verifyPhonePath: '../verify-phone-number',
-        handleComplete: () => setActive({ session: su.createdSessionId, redirectUrl: afterSignUpUrl }),
+        handleComplete: () =>
+          setActive({ session: su.createdSessionId, redirectUrl: afterSignUpUrl, onPendingSession }),
         navigate,
       });
     }

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

@@ -43,7 +43,7 @@ function SignUpStartInternal(): JSX.Element {
   const { setActive } = useClerk();
   const ctx = useSignUpContext();
   const isWithinSignInContext = !!React.useContext(SignInContext);
-  const { afterSignUpUrl, signInUrl, unsafeMetadata } = ctx;
+  const { afterSignUpUrl, signInUrl, unsafeMetadata, onPendingSession } = ctx;
   const isCombinedFlow = !!(ctx.isCombinedFlow && !!isWithinSignInContext);
   const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(() =>
     getInitialActiveIdentifier(attributes, userSettings.signUp.progressive, {
@@ -166,7 +166,7 @@ function SignUpStartInternal(): JSX.Element {
           handleComplete: () => {
             removeClerkQueryParam('__clerk_ticket');
             removeClerkQueryParam('__clerk_invitation_token');
-            return setActive({ session: signUp.createdSessionId, redirectUrl: afterSignUpUrl });
+            return setActive({ session: signUp.createdSessionId, redirectUrl: afterSignUpUrl, onPendingSession });
           },
           navigate,
           oidcPrompt,
@@ -334,7 +334,8 @@ function SignUpStartInternal(): JSX.Element {
           signUp: res,
           verifyEmailPath: 'verify-email-address',
           verifyPhonePath: 'verify-phone-number',
-          handleComplete: () => setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl }),
+          handleComplete: () =>
+            setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl, onPendingSession }),
           navigate,
           redirectUrl,
           redirectUrlComplete,

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

@@ -24,7 +24,7 @@ type SignInFactorOneCodeFormProps = {
 };
 
 export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps) => {
-  const { afterSignUpUrl } = useSignUpContext();
+  const { afterSignUpUrl, onPendingSession } = useSignUpContext();
   const { setActive } = useClerk();
   const { navigate } = useRouter();
 
@@ -43,7 +43,8 @@ export const SignUpVerificationCodeForm = (props: SignInFactorOneCodeFormProps)
           verifyEmailPath: '../verify-email-address',
           verifyPhonePath: '../verify-phone-number',
           continuePath: '../continue',
-          handleComplete: () => setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl }),
+          handleComplete: () =>
+            setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl, onPendingSession }),
           navigate,
         });
       })

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

@@ -3,8 +3,6 @@ import { isAbsoluteUrl } from '@clerk/shared/url';
 import type { OnPendingSessionFn } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
-import { navigateToTask } from '@/core/sessionTasks';
-
 import { SIGN_IN_INITIAL_VALUE_KEYS } from '../../../core/constants';
 import { buildURL } from '../../../utils';
 import { RedirectUrls } from '../../../utils/redirectUrls';
@@ -120,13 +118,11 @@ export const useSignInContext = (): SignInContextType => {
   const signUpContinueUrl = buildURL({ base: signUpUrl, hashPath: '/continue' }, { stringify: true });
 
   const onPendingSession: OnPendingSessionFn = async ({ session }) => {
-    switch (session.currentTask?.key) {
+    const currentTaskKey = session.currentTask.key;
+
+    switch (currentTaskKey) {
       case 'choose-organization': {
-        // TODO - preserve redirect_url
-        await navigateToTask(session, {
-          navigate,
-          baseUrl: signInUrl,
-        });
+        await navigate(`../tasks/${currentTaskKey}`);
       }
     }
   };

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

@@ -1,5 +1,6 @@
 import { useClerk } from '@clerk/shared/react';
 import { isAbsoluteUrl } from '@clerk/shared/url';
+import type { OnPendingSessionFn } from '@clerk/types';
 import { createContext, useContext, useMemo } from 'react';
 
 import { SIGN_UP_INITIAL_VALUE_KEYS } from '../../../core/constants';
@@ -25,6 +26,7 @@ export type SignUpContextType = Omit<SignUpCtx, 'fallbackRedirectUrl' | 'forceRe
   isCombinedFlow: boolean;
   emailLinkRedirectUrl: string;
   ssoCallbackUrl: string;
+  onPendingSession: OnPendingSessionFn;
 };
 
 export const SignUpContext = createContext<SignUpCtx | null>(null);
@@ -110,6 +112,16 @@ export const useSignUpContext = (): SignUpContextType => {
   // TODO: Avoid building this url again to remove duplicate code. Get it from window.Clerk instead.
   const secondFactorUrl = buildURL({ base: signInUrl, hashPath: '/factor-two' }, { stringify: true });
 
+  const onPendingSession: OnPendingSessionFn = async ({ session }) => {
+    const currentTaskKey = session.currentTask.key;
+
+    switch (currentTaskKey) {
+      case 'choose-organization': {
+        await navigate(`../tasks/${currentTaskKey}`);
+      }
+    }
+  };
+
   return {
     ...ctx,
     oauthFlow: ctx.oauthFlow || 'auto',
@@ -127,5 +139,6 @@ export const useSignUpContext = (): SignUpContextType => {
     initialValues: { ...ctx.initialValues, ...initialValuesFromQueryParams },
     authQueryString,
     isCombinedFlow,
+    onPendingSession,
   };
 };