fix(clerk-js): Update server-side revalidation hooks for session status transition (#6572)

Author: LauraBeatris

.changeset/plain-candies-fly.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix server-side cache revalidation for Next.js when transitioning from `active` to `pending` session

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

@@ -2502,14 +2502,8 @@ describe('Clerk singleton', () => {
 
       // Verify hooks were called
       await waitFor(() => {
-        expect(mockOnBeforeSetActive).toHaveBeenCalledTimes(1);
         expect(mockOnAfterSetActive).toHaveBeenCalledTimes(1);
       });
-
-      // Verify that onAfterSetActive was called after onBeforeSetActive
-      const beforeCallTime = mockOnBeforeSetActive.mock.invocationCallOrder[0];
-      const afterCallTime = mockOnAfterSetActive.mock.invocationCallOrder[0];
-      expect(afterCallTime).toBeGreaterThan(beforeCallTime);
     });
   });
 });

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

@@ -2293,19 +2293,14 @@ export class Clerk implements ClerkInterface {
 
       const hasTransitionedToPendingStatus = this.session.status === 'active' && session?.status === 'pending';
       if (hasTransitionedToPendingStatus) {
-        const onBeforeSetActive: SetActiveHook =
-          typeof window !== 'undefined' && typeof window.__unstable__onBeforeSetActive === 'function'
-            ? window.__unstable__onBeforeSetActive
-            : noop;
-
         const onAfterSetActive: SetActiveHook =
           typeof window !== 'undefined' && typeof window.__unstable__onAfterSetActive === 'function'
             ? window.__unstable__onAfterSetActive
             : noop;
 
         // Execute hooks to update server authentication context and trigger
         // page protections in clerkMiddleware or server components
-        void onBeforeSetActive()?.then?.(() => void onAfterSetActive());
+        void onAfterSetActive();
       }
 
       // Note: this might set this.session to null

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

@@ -25,6 +25,7 @@ import { Header } from '@/ui/elements/Header';
 import { OrganizationPreview } from '@/ui/elements/OrganizationPreview';
 import { useOrganizationListInView } from '@/ui/hooks/useOrganizationListInView';
 import { Add } from '@/ui/icons';
+import { useRouter } from '@/ui/router';
 import { handleError } from '@/ui/utils/errorHandler';
 
 type ChooseOrganizationScreenProps = {
@@ -106,6 +107,7 @@ export const ChooseOrganizationScreen = (props: ChooseOrganizationScreenProps) =
 const MembershipPreview = (props: { organization: OrganizationResource }) => {
   const { user } = useUser();
   const card = useCardState();
+  const { navigate } = useRouter();
   const { redirectUrlComplete } = useTaskChooseOrganizationContext();
   const { isLoaded, setActive } = useOrganizationList();
   const { t } = useLocalizations();
@@ -119,7 +121,10 @@ const MembershipPreview = (props: { organization: OrganizationResource }) => {
       try {
         await setActive({
           organization,
-          redirectUrl: redirectUrlComplete,
+          navigate: async () => {
+            // TODO(after-auth) ORGS-779 - Handle next tasks
+            await navigate(redirectUrlComplete);
+          },
         });
       } catch (err) {
         if (!isClerkAPIResponseError(err)) {

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

@@ -7,6 +7,7 @@ import { Form } from '@/ui/elements/Form';
 import { FormButtonContainer } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
 import { Header } from '@/ui/elements/Header';
+import { useRouter } from '@/ui/router';
 import { createSlug } from '@/ui/utils/createSlug';
 import { handleError } from '@/ui/utils/errorHandler';
 import { useFormControl } from '@/ui/utils/useFormControl';
@@ -19,6 +20,7 @@ type CreateOrganizationScreenProps = {
 
 export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) => {
   const card = useCardState();
+  const { navigate } = useRouter();
   const { redirectUrlComplete } = useTaskChooseOrganizationContext();
   const { createOrganization, isLoaded, setActive } = useOrganizationList({
     userMemberships: organizationListParams.userMemberships,
@@ -47,7 +49,10 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
 
       await setActive({
         organization,
-        redirectUrl: redirectUrlComplete,
+        navigate: async () => {
+          // TODO(after-auth) ORGS-779 - Handle next tasks
+          await navigate(redirectUrlComplete);
+        },
       });
     } catch (err) {
       handleError(err, [nameField, slugField], card.setError);