fix(clerk-js): Use userId in cache keys of private commerce resources

.changeset/floppy-cities-warn.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: on session switch, revalidate cached commerce resources.

packages/clerk-js/bundlewatch.config.json

@@ -19,7 +19,7 @@
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
-    { "path": "./dist/pricingTable*.js", "maxSize": "4KB" },
+    { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
     { "path": "./dist/checkout*.js", "maxSize": "4.9KB" },
     { "path": "./dist/paymentSources*.js", "maxSize": "8.5KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" },

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CommerceCheckoutResource,
   __experimental_CommerceMoney,
@@ -91,6 +91,7 @@ const CheckoutFormElements = ({
   onCheckoutComplete: (checkout: __experimental_CommerceCheckoutResource) => void;
 }) => {
   const { __experimental_commerce } = useClerk();
+  const { user } = useUser();
   const { organization } = useOrganization();
   const { subscriberType } = useCheckoutContext();
 
@@ -100,7 +101,7 @@ const CheckoutFormElements = ({
       ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
     },
     undefined,
-    'commerce-payment-sources',
+    `commerce-payment-sources-${user?.id}`,
   );
 
   const [openAccountFundsDropDown, setOpenAccountFundsDropDown] = useState(true);

packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CommerceCheckoutResource,
   __experimental_CommercePaymentSourceResource,
@@ -31,6 +31,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => {
   const { __experimental_commerce } = useClerk();
   const { __experimental_commerceSettings } = useEnvironment();
   const { organization } = useOrganization();
+  const { user } = useUser();
   const { subscriberType } = usePaymentSourcesContext();
 
   const stripePromiseRef = useRef<Promise<Stripe | null> | null>(null);
@@ -67,7 +68,7 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => {
       ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
     },
     undefined,
-    'commerce-payment-source-initialize',
+    `commerce-payment-source-initialize-${user?.id}`,
   );
 
   const externalGatewayId = checkout?.externalGatewayId ?? initializedPaymentSource?.externalGatewayId;
@@ -139,6 +140,7 @@ const AddPaymentSourceForm = withCardStateProvider(
     const elements = useElements();
     const { displayConfig } = useEnvironment();
     const { organization } = useOrganization();
+    const { user } = useUser();
     const { subscriberType } = usePaymentSourcesContext();
     const [submitError, setSubmitError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
 
@@ -149,7 +151,7 @@ const AddPaymentSourceForm = withCardStateProvider(
         ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
       },
       undefined,
-      'commerce-payment-sources',
+      `commerce-payment-sources-${user?.id}`,
     );
 
     const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {

packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type { __experimental_CommercePaymentSourceResource, __experimental_PaymentSourcesProps } from '@clerk/types';
 import { Fragment, useRef } from 'react';
 
@@ -88,11 +88,12 @@ const PaymentSources = (_: __experimental_PaymentSourcesProps) => {
   const { organization } = useOrganization();
   const { subscriberType } = usePaymentSourcesContext();
 
+  const { user } = useUser();
   const { data, revalidate } = useFetch(
     __experimental_commerce?.getPaymentSources,
     { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) },
     undefined,
-    'commerce-payment-sources',
+    `commerce-payment-sources-${user?.id}`,
   );
   const { data: paymentSources } = data || { data: [] };
 

packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriptionPlanPeriod,
@@ -31,13 +31,14 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
 
   const { __experimental_commerce } = useClerk();
 
+  const { user } = useUser();
   useFetch(
-    __experimental_commerce?.getPaymentSources,
+    user ? __experimental_commerce?.getPaymentSources : undefined,
     {
       ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
     },
     undefined,
-    'commerce-payment-sources',
+    `commerce-payment-sources-${user?.id}`,
   );
 
   return (

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

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type { __experimental_CommerceSubscriberType } from '@clerk/types';
 import type { ReactNode } from 'react';
 import { createContext, useContext } from 'react';
@@ -18,11 +18,12 @@ export const InvoicesContextProvider = ({
   const { __experimental_commerce } = useClerk();
   const { organization } = useOrganization();
 
+  const { user } = useUser();
   const { data, isLoading, revalidate } = useFetch(
     __experimental_commerce?.__experimental_billing.getInvoices,
     { ...(subscriberType === 'org' ? { orgId: organization?.id } : {}) },
     undefined,
-    'commerce-invoices',
+    `commerce-invoices-${user?.id}`,
   );
   const { data: invoices, total_count: totalCount } = data || { data: [], totalCount: 0 };
 

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

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriberType,
@@ -23,12 +23,12 @@ const PlansContext = createContext<__experimental_PlansCtx | null>(null);
 export const useSubscriptions = (subscriberType?: __experimental_CommerceSubscriberType) => {
   const { __experimental_commerce } = useClerk();
   const { organization } = useOrganization();
-
+  const { user } = useUser();
   return useFetch(
-    __experimental_commerce?.__experimental_billing.getSubscriptions,
+    user ? __experimental_commerce?.__experimental_billing.getSubscriptions : undefined,
     { orgId: subscriberType === 'org' ? organization?.id : undefined },
     undefined,
-    'commerce-subscriptions',
+    `commerce-subscriptions-${user?.id}`,
   );
 };
 

packages/clerk-js/src/ui/hooks/useCheckout.ts

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
 import type {
   __experimental_CheckoutProps,
   __experimental_CommerceCheckoutResource,
@@ -14,6 +14,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => {
   const { organization } = useOrganization();
   const [currentCheckout, setCurrentCheckout] = useState<__experimental_CommerceCheckoutResource | null>(null);
 
+  const { user } = useUser();
   const {
     data: initialCheckout,
     isLoading,
@@ -28,7 +29,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => {
       ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
     },
     undefined,
-    'commerce-checkout',
+    `commerce-checkout-${user?.id}`,
   );
 
   const updateCheckout = useCallback((newCheckout: __experimental_CommerceCheckoutResource) => {