fix(clerk-js): Call setActive after closing checkout drawer (#5916)

Author: panteliselef

.changeset/full-bushes-heal.md

@@ -0,0 +1,5 @@
+---
+'@clerk/types': minor
+---
+
+Add `onClose` to `__internal_CheckoutProps`.

.changeset/long-bananas-agree.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: Call `setActive` after closing Checkout to ensure RSCs re-render with the new auth context.

integration/templates/next-app-router/src/app/pricing-table/page.tsx

@@ -1,10 +1,23 @@
-import { PricingTable } from '@clerk/nextjs';
+import { PricingTable, Protect } from '@clerk/nextjs';
 
 export default async function PricingTablePage({
   searchParams,
 }: {
   searchParams: Promise<{ newSubscriptionRedirectUrl: string }>;
 }) {
   const newSubscriptionRedirectUrl = (await searchParams).newSubscriptionRedirectUrl;
-  return <PricingTable newSubscriptionRedirectUrl={newSubscriptionRedirectUrl} />;
+  return (
+    <>
+      <Protect plan='free_user'>
+        <p>user in free</p>
+      </Protect>
+      <Protect plan='pro'>
+        <p>user in pro</p>
+      </Protect>
+      <Protect plan='plus'>
+        <p>user in plus</p>
+      </Protect>
+      <PricingTable newSubscriptionRedirectUrl={newSubscriptionRedirectUrl} />
+    </>
+  );
 }

integration/tests/pricing-table.test.ts

@@ -62,6 +62,15 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await u.po.checkout.fillTestCard();
     await u.po.checkout.clickPayOrSubscribe();
     await expect(u.po.page.getByText('Payment was successful!')).toBeVisible();
+    await u.po.checkout.confirmAndContinue();
+
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (app.name.includes('next')) {
+      // Correctly updates RSCs with the new `pla` claim.
+      await expect(u.po.page.getByText('user in plus')).toBeVisible({
+        timeout: 5_000,
+      });
+    }
   });
 
   test('can upgrade to a new plan with saved card', async ({ page, context }) => {

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "595.5kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "68.5KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "68.4KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "105KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "104.7KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.5KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -13,7 +13,7 @@
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "14KB" },
-    { "path": "./dist/signup*.js", "maxSize": "7.5KB" },
+    { "path": "./dist/signup*.js", "maxSize": "7.4KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "16.5KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/Components.tsx

@@ -372,13 +372,18 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.closeDrawer = name => {
-      setState(s => ({
-        ...s,
-        [`${name}Drawer`]: {
-          ...s[`${name}Drawer`],
-          open: false,
-        },
-      }));
+      setState(s => {
+        const currentItem = s[`${name}Drawer`];
+        // @ts-expect-error `__internal_PlanDetailsProps` does not accept `onClose`
+        currentItem?.props?.onClose?.();
+        return {
+          ...s,
+          [`${name}Drawer`]: {
+            ...s[`${name}Drawer`],
+            open: false,
+          },
+        };
+      });
     };
 
     componentsControls.prefetch = component => {

packages/clerk-js/src/ui/components/Checkout/useCheckout.ts

@@ -1,7 +1,7 @@
 import type { ClerkAPIResponseError } from '@clerk/shared/error';
 import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type { __internal_CheckoutProps, CommerceCheckoutResource } from '@clerk/types';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useFetch } from '../../hooks/useFetch';
 
@@ -10,7 +10,6 @@ export const useCheckout = (props: __internal_CheckoutProps) => {
   const clerk = useClerk();
   const { organization } = useOrganization();
   const [currentCheckout, setCurrentCheckout] = useState<CommerceCheckoutResource | null>(null);
-
   const { user } = useUser();
   const {
     data: initialCheckout,
@@ -31,10 +30,6 @@ export const useCheckout = (props: __internal_CheckoutProps) => {
 
   const error = _error as ClerkAPIResponseError | undefined;
 
-  const updateCheckout = useCallback((newCheckout: CommerceCheckoutResource) => {
-    setCurrentCheckout(newCheckout);
-  }, []);
-
   useEffect(() => {
     if (initialCheckout && !currentCheckout) {
       setCurrentCheckout(initialCheckout);
@@ -43,7 +38,7 @@ export const useCheckout = (props: __internal_CheckoutProps) => {
 
   return {
     checkout: currentCheckout || initialCheckout,
-    updateCheckout,
+    updateCheckout: setCurrentCheckout,
     isLoading,
     invalidate,
     revalidate,

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import { useClerk, useOrganization, useSession, useUser } from '@clerk/shared/react';
 import type {
   Appearance,
   CommercePlanResource,
@@ -142,6 +142,7 @@ type HandleSelectPlanProps = {
 
 export const usePlansContext = () => {
   const clerk = useClerk();
+  const { session } = useSession();
   const subscriberType = useSubscriberTypeContext();
   const context = useContext(PlansContext);
 
@@ -344,27 +345,27 @@ export const usePlansContext = () => {
           portalRoot,
         });
       } else {
-        // if the plan doesn't support annual, use monthly
-        let _planPeriod = planPeriod;
-        if (planPeriod === 'annual' && plan.annualMonthlyAmount === 0) {
-          _planPeriod = 'month';
-        }
-
         clerk.__internal_openCheckout({
           planId: plan.id,
-          planPeriod: _planPeriod,
-          subscriberType: subscriberType,
+          // if the plan doesn't support annual, use monthly
+          planPeriod: planPeriod === 'annual' && plan.annualMonthlyAmount === 0 ? 'month' : planPeriod,
+          subscriberType,
           onSubscriptionComplete: () => {
             ctx.revalidate();
             onSubscriptionChange?.();
           },
+          onClose: () => {
+            if (session?.id) {
+              void clerk.setActive({ session: session.id });
+            }
+          },
           appearance,
           portalRoot,
           newSubscriptionRedirectUrl,
         });
       }
     },
-    [clerk, ctx, activeOrUpcomingSubscription, subscriberType],
+    [clerk, ctx, activeOrUpcomingSubscription, subscriberType, session?.id],
   );
 
   const defaultFreePlan = useMemo(() => {

packages/types/src/clerk.ts

@@ -1621,6 +1621,7 @@ export type __internal_CheckoutProps = {
    * @default undefined
    */
   newSubscriptionRedirectUrl?: string;
+  onClose?: () => void;
 };
 
 export type __internal_PlanDetailsProps = {