fix(clerk-js, shared): Display empty data for authenticated billing hooks after sign out (#6747)

Author: panteliselef

.changeset/major-steaks-hug.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Display empty data for authenticated billing hooks after sign out.

packages/shared/src/react/hooks/createCommerceHook.tsx

@@ -45,17 +45,17 @@ export function createCommercePaginatedHook<TResource extends ClerkResource, TPa
   options,
 }: CommerceHookConfig<TResource, TParams>) {
   type HookParams = PaginatedHookConfig<PagesOrInfiniteOptions> & {
-    for: ForPayerType;
+    for?: ForPayerType;
   };
 
   return function useCommerceHook<T extends HookParams>(
     params?: T,
   ): PaginatedResources<TResource, T extends { infinite: true } ? true : false> {
-    const { for: _for, ...paginationParams } = params || ({ for: 'user' } as T);
+    const { for: _for, ...paginationParams } = params || ({} as Partial<T>);
 
     useAssertWrappedByClerkProvider(hookName);
 
-    const fetchFn = useFetcher(_for);
+    const fetchFn = useFetcher(_for || 'user');
 
     const safeValues = useWithSafeValues(paginationParams, {
       initialPage: 1,
@@ -83,14 +83,12 @@ export function createCommercePaginatedHook<TResource extends ClerkResource, TPa
             ...(_for === 'organization' ? { orgId: organization?.id } : {}),
           } as TParams);
 
-    const isClerkLoaded = !!(clerk.loaded && (options?.unauthenticated ? true : user));
-
     const isOrganization = _for === 'organization';
     const billingEnabled = isOrganization
       ? environment?.commerceSettings.billing.organization.enabled
       : environment?.commerceSettings.billing.user.enabled;
 
-    const isEnabled = !!hookParams && isClerkLoaded && !!billingEnabled;
+    const isEnabled = !!hookParams && clerk.loaded && !!billingEnabled;
 
     const result = usePagesOrInfinite<TParams, ClerkPaginatedResponse<TResource>>(
       (hookParams || {}) as TParams,
@@ -99,6 +97,7 @@ export function createCommercePaginatedHook<TResource extends ClerkResource, TPa
         keepPreviousData: safeValues.keepPreviousData,
         infinite: safeValues.infinite,
         enabled: isEnabled,
+        ...(options?.unauthenticated ? {} : { isSignedIn: Boolean(user) }),
         __experimental_mode: safeValues.__experimental_mode,
       },
       {

packages/shared/src/react/hooks/usePagesOrInfinite.ts

@@ -148,6 +148,7 @@ export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, config,
   const cacheMode = config.__experimental_mode === 'cache';
   const triggerInfinite = config.infinite ?? false;
   const keepPreviousData = config.keepPreviousData ?? false;
+  const isSignedIn = config.isSignedIn;
 
   const pagesCacheKey = {
     ...cacheKeys,
@@ -159,10 +160,13 @@ export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, config,
   // cacheMode being `true` indicates that the cache key is defined, but the fetcher is not.
   // This allows to ready the cache instead of firing a request.
   const shouldFetch = !triggerInfinite && enabled && (!cacheMode ? !!fetcher : true);
-  const swrKey = shouldFetch ? pagesCacheKey : null;
+  const swrKey = isSignedIn ? pagesCacheKey : shouldFetch ? pagesCacheKey : null;
   const swrFetcher =
     !cacheMode && !!fetcher
       ? (cacheKeyParams: Record<string, unknown>) => {
+          if (isSignedIn === false) {
+            return null;
+          }
           const requestParams = getDifferentKeys(cacheKeyParams, cacheKeys);
           return fetcher({ ...params, ...requestParams });
         }

packages/shared/src/react/hooks/usePaymentAttempts.tsx

@@ -11,6 +11,9 @@ export const usePaymentAttempts = createCommercePaginatedHook<CommercePaymentRes
   resourceType: 'commerce-payment-attempts',
   useFetcher: () => {
     const clerk = useClerkInstanceContext();
-    return clerk.billing.getPaymentAttempts;
+    if (clerk.loaded) {
+      return clerk.billing.getPaymentAttempts;
+    }
+    return undefined;
   },
 });

packages/shared/src/react/hooks/usePlans.tsx

@@ -11,6 +11,9 @@ export const usePlans = createCommercePaginatedHook<CommercePlanResource, GetPla
   resourceType: 'commerce-plans',
   useFetcher: _for => {
     const clerk = useClerkInstanceContext();
+    if (!clerk.loaded) {
+      return undefined;
+    }
     return ({ orgId, ...rest }) => {
       // Cleanup `orgId` from the params
       return clerk.billing.getPlans({ ...rest, for: _for });

packages/shared/src/react/hooks/useStatements.tsx

@@ -11,6 +11,9 @@ export const useStatements = createCommercePaginatedHook<CommerceStatementResour
   resourceType: 'commerce-statements',
   useFetcher: () => {
     const clerk = useClerkInstanceContext();
-    return clerk.billing.getStatements;
+    if (clerk.loaded) {
+      return clerk.billing.getStatements;
+    }
+    return undefined;
   },
 });

packages/shared/src/react/hooks/useSubscription.tsx

@@ -47,14 +47,21 @@ export const useSubscription = (params?: UseSubscriptionParams) => {
     : environment?.commerceSettings.billing.user.enabled;
 
   const swr = useSWR(
-    user?.id && billingEnabled
+    billingEnabled
       ? {
           type: 'commerce-subscription',
-          userId: user.id,
+          userId: user?.id,
           args: { orgId: isOrganization ? organization?.id : undefined },
         }
       : null,
-    ({ args }) => clerk.billing.getSubscription(args),
+    ({ args, userId }) => {
+      // This allows for supporting keeping previous data between revalidations
+      // but also hides the stale data on sign-out.
+      if (userId) {
+        return clerk.billing.getSubscription(args);
+      }
+      return null;
+    },
     {
       dedupingInterval: 1_000 * 60,
       keepPreviousData: params?.keepPreviousData,

packages/shared/src/react/types.ts

@@ -118,6 +118,13 @@ export type PagesOrInfiniteConfig = PaginatedHookConfig<{
    * @hidden
    */
   __experimental_mode?: 'cache';
+
+  /**
+   * @experimental
+   *
+   * @hidden
+   */
+  isSignedIn?: boolean;
 }>;
 
 /**