Improve redirection logic

Author: LauraBeatris

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "610.32kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "70.2KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
+    { "path": "./dist/clerk.js", "maxSize": "612kB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "108.75KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
@@ -25,6 +25,6 @@
     { "path": "./dist/paymentSources*.js", "maxSize": "9.17KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
-    { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }
+    { "path": "./dist/sessionTasks*.js", "maxSize": "1.5KB" }
   ]
 }

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

@@ -1,6 +1,6 @@
 import { useClerk } from '@clerk/shared/react';
 import { eventComponentMounted } from '@clerk/shared/telemetry';
-import { useCallback, useContext, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
@@ -56,23 +56,34 @@ export const SessionTask = withCardStateProvider(() => {
   const { navigate } = useRouter();
   const signInContext = useContext(SignInContext);
   const signUpContext = useContext(SignUpContext);
+  const [isNavigatingToTask, setIsNavigatingToTask] = useState(false);
 
   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,
+  // we redirect them to their intended destination.
   useEffect(() => {
-    const task = clerk.session?.currentTask;
+    if (isNavigatingToTask) {
+      return;
+    }
 
-    if (!task) {
+    // Tasks can only exist on pending sessions, but we check both conditions
+    // here to be defensive and ensure proper redirection
+    const task = clerk.session?.currentTask;
+    if (!task || clerk.session?.status === 'active') {
       void navigate(redirectUrlComplete);
       return;
     }
 
     clerk.telemetry?.record(eventComponentMounted('SessionTask', { task: task.key }));
-  }, [clerk, navigate, redirectUrlComplete]);
+  }, [clerk, navigate, isNavigatingToTask, redirectUrlComplete]);
 
   const nextTask = useCallback(() => {
-    return clerk.__experimental_navigateToTask({ redirectUrlComplete });
+    setIsNavigatingToTask(true);
+    return clerk.__experimental_navigateToTask({ redirectUrlComplete }).finally(() => setIsNavigatingToTask(false));
   }, [clerk, redirectUrlComplete]);
 
   if (!clerk.session?.currentTask) {

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

@@ -22,6 +22,8 @@ const ForceOrganizationSelectionFlows = () => {
     );
   }
 
+  // Do not render the organization selection flow when organization memberships
+  // get invalidated after the create organization mutation
   if (hasData && currentFlow !== 'create-organization') {
     return <OrganizationSelectionPage setCurrentFlow={setCurrentFlow} />;
   }