fix(clerk-js): Fix redirect when completing task within SignIn/SignUp (#6580)

Co-authored-by: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>

Author: iagodahlem

.changeset/mean-pumas-cut.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Fix incorrect redirect when completing session tasks within `SignIn` and `SignUp` components

integration/tests/session-tasks-sign-in.test.ts

@@ -56,7 +56,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       await u.po.expect.toHaveResolvedTask();
 
       // Navigates to after sign-in
-      await u.page.waitForAppUrl('/');
+      await u.page.waitForAppUrl('/page-protected');
     });
 
     test('with sso, navigate to task on after sign-in', async ({ page, context }) => {

integration/tests/session-tasks-sign-up.test.ts

@@ -73,7 +73,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withSessionTasks] })(
       await u.po.expect.toHaveResolvedTask();
 
       // Navigates to after sign-up
-      await u.page.waitForAppUrl('/');
+      await u.page.waitForAppUrl('/page-protected');
     });
 
     test('with sso, navigate to task on after sign-up', async ({ page, context }) => {

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

@@ -75,6 +75,7 @@ import type {
   SignUpRedirectOptions,
   SignUpResource,
   TaskChooseOrganizationProps,
+  TasksRedirectOptions,
   UnsubscribeCallback,
   UserButtonProps,
   UserProfileProps,
@@ -1595,7 +1596,7 @@ export class Clerk implements ClerkInterface {
     return this.buildUrlWithAuth(this.environment.displayConfig.organizationProfileUrl);
   }
 
-  public buildTasksUrl(): string {
+  public buildTasksUrl(options?: TasksRedirectOptions): string {
     const currentTask = this.session?.currentTask;
     if (!currentTask) {
       return '';
@@ -1608,7 +1609,7 @@ export class Clerk implements ClerkInterface {
 
     return buildURL(
       {
-        base: this.buildSignInUrl(),
+        base: this.buildSignInUrl(options),
         hashPath: getTaskEndpoint(currentTask),
       },
       {
@@ -1707,9 +1708,9 @@ export class Clerk implements ClerkInterface {
     return;
   };
 
-  public redirectToTasks = async (): Promise<unknown> => {
+  public redirectToTasks = async (options?: TasksRedirectOptions): Promise<unknown> => {
     if (inBrowser()) {
-      return this.navigate(this.buildTasksUrl());
+      return this.navigate(this.buildTasksUrl(options));
     }
     return;
   };
@@ -2044,7 +2045,9 @@ export class Clerk implements ClerkInterface {
     }
 
     if (this.session?.currentTask) {
-      await this.redirectToTasks();
+      await this.redirectToTasks({
+        redirectUrl: this.buildAfterSignInUrl(),
+      });
       return;
     }
 

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

@@ -1,14 +1,13 @@
 import { useClerk } from '@clerk/shared/react';
 import { eventComponentMounted } from '@clerk/shared/telemetry';
 import type { SessionResource } from '@clerk/types';
-import { useContext, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
 import { LoadingCardContainer } from '@/ui/elements/LoadingCard';
 
 import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from '../../../core/sessionTasks';
-import { SignInContext, SignUpContext } from '../../../ui/contexts';
 import {
   SessionTasksContext,
   TaskChooseOrganizationContext,
@@ -62,19 +61,18 @@ function SessionTasksRoutes(): JSX.Element {
   );
 }
 
+type SessionTasksProps = {
+  redirectUrlComplete: string;
+};
+
 /**
  * @internal
  */
-export const SessionTasks = withCardStateProvider(() => {
+export const SessionTasks = withCardStateProvider(({ redirectUrlComplete }: SessionTasksProps) => {
   const clerk = useClerk();
   const { navigate } = useRouter();
-  const signInContext = useContext(SignInContext);
-  const signUpContext = useContext(SignUpContext);
   const currentTaskContainer = useRef<HTMLDivElement>(null);
 
-  const redirectUrlComplete =
-    signInContext?.afterSignInUrl ?? signUpContext?.afterSignUpUrl ?? clerk?.buildAfterSignInUrl();
-
   // If there are no pending tasks, navigate away from the tasks flow.
   // This handles cases where a user with an active session returns to the tasks URL,
   // for example by using browser back navigation. Since there are no pending tasks,

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

@@ -136,15 +136,15 @@ function SignInRoutes(): JSX.Element {
               </Route>
             </Route>
             <Route path='tasks'>
-              <LazySessionTasks />
+              <LazySessionTasks redirectUrlComplete={signInContext.afterSignUpUrl} />
             </Route>
             <Route index>
               <LazySignUpStart />
             </Route>
           </Route>
         )}
         <Route path='tasks'>
-          <LazySessionTasks />
+          <LazySessionTasks redirectUrlComplete={signInContext.afterSignInUrl} />
         </Route>
         <Route index>
           <SignInStart />

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

@@ -80,7 +80,7 @@ function SignUpRoutes(): JSX.Element {
           </Route>
         </Route>
         <Route path='tasks'>
-          <LazySessionTasks />
+          <LazySessionTasks redirectUrlComplete={signUpContext.afterSignUpUrl} />
         </Route>
         <Route index>
           <SignUpStart />

packages/react/src/components/controlComponents.tsx

@@ -6,7 +6,7 @@ import { useIsomorphicClerkContext } from '../contexts/IsomorphicClerkContext';
 import { useSessionContext } from '../contexts/SessionContext';
 import { useAuth } from '../hooks';
 import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByClerkProvider';
-import type { RedirectToSignInProps, RedirectToSignUpProps, WithClerkProp } from '../types';
+import type { RedirectToSignInProps, RedirectToSignUpProps, RedirectToTasksProps, WithClerkProp } from '../types';
 import { withClerk } from './withClerk';
 
 export const SignedIn = ({ children, treatPendingAsSignedOut }: React.PropsWithChildren<PendingSessionOptions>) => {
@@ -166,9 +166,9 @@ export const RedirectToSignUp = withClerk(({ clerk, ...props }: WithClerkProp<Re
   return null;
 }, 'RedirectToSignUp');
 
-export const RedirectToTasks = withClerk(({ clerk }: WithClerkProp) => {
+export const RedirectToTasks = withClerk(({ clerk, ...props }: WithClerkProp<RedirectToTasksProps>) => {
   React.useEffect(() => {
-    void clerk.redirectToTasks();
+    void clerk.redirectToTasks(props);
   }, []);
 
   return null;

packages/react/src/isomorphicClerk.ts

@@ -45,6 +45,7 @@ import type {
   SignUpResource,
   State,
   TaskChooseOrganizationProps,
+  TasksRedirectOptions,
   UnsubscribeCallback,
   UserButtonProps,
   UserProfileProps,
@@ -1276,8 +1277,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  redirectToTasks = async () => {
-    const callback = () => this.clerkjs?.redirectToTasks();
+  redirectToTasks = async (opts?: TasksRedirectOptions) => {
+    const callback = () => this.clerkjs?.redirectToTasks(opts);
     if (this.clerkjs && this.loaded) {
       return callback();
     } else {

packages/react/src/types.ts

@@ -9,6 +9,7 @@ import type {
   RedirectUrlProp,
   SignInRedirectOptions,
   SignUpRedirectOptions,
+  TasksRedirectOptions,
   Without,
 } from '@clerk/types';
 import type React from 'react';
@@ -116,6 +117,7 @@ export type SignInWithMetamaskButtonProps = {
 
 export type RedirectToSignInProps = SignInRedirectOptions;
 export type RedirectToSignUpProps = SignUpRedirectOptions;
+export type RedirectToTasksProps = TasksRedirectOptions;
 
 type PageProps<T extends string> =
   | {