diff --git a/.changeset/plain-candies-fly.md b/.changeset/plain-candies-fly.md new file mode 100644 index 00000000000..9daceafd5c8 --- /dev/null +++ b/.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 diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts index 8dee5fba0a6..0142da8ad08 100644 --- a/packages/clerk-js/src/core/__tests__/clerk.test.ts +++ b/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); }); }); }); diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 190328ec6bf..ac78f078b6b 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -2293,11 +2293,6 @@ 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 @@ -2305,7 +2300,7 @@ export class Clerk implements ClerkInterface { // 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 diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx b/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx index 1ffc0122dd0..c0cf177a130 100644 --- a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx +++ b/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)) { diff --git a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx b/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx index 3a72a889cff..e18b6972468 100644 --- a/packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx +++ b/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);