fix(shared): Explicitly pass subject parameter to API keys fetcher hook (#7344)

Author: wobsoriano

.changeset/friendly-adults-bathe.md

@@ -0,0 +1,6 @@
+---
+"@clerk/shared": patch
+"@clerk/testing": patch
+---
+
+Fixed an issue where API keys in `<UserProfile />` are showing organization API keys.

integration/tests/machine-auth/component.test.ts

@@ -285,6 +285,43 @@ testAgainstRunningApps({
     await u.page.unrouteAll();
   });
 
+  test('UserProfile API keys uses user ID as subject even when organization is active', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+
+    const admin = await u.services.users.getUser({ email: fakeAdmin.email });
+    expect(admin).toBeDefined();
+    const userId = admin.id;
+
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeAdmin.email, password: fakeAdmin.password });
+    await u.po.expect.toBeSignedIn();
+
+    await u.po.organizationSwitcher.goTo();
+    await u.po.organizationSwitcher.waitForMounted();
+    await u.po.organizationSwitcher.waitForAnOrganizationToSelected();
+
+    let capturedSubject: string | null = null;
+    const apiKeyRequestPromise = u.page.waitForRequest(request => {
+      if (request.url().includes('api_keys')) {
+        const url = new URL(request.url());
+        capturedSubject = url.searchParams.get('subject');
+        return true;
+      }
+      return false;
+    });
+
+    await u.po.page.goToRelative('/user');
+    await u.po.userProfile.waitForMounted();
+    await u.po.userProfile.switchToAPIKeysTab();
+
+    await apiKeyRequestPromise;
+
+    // Verify the subject parameter is the user ID, not the organization ID
+    expect(capturedSubject).toBe(userId);
+    expect(capturedSubject).not.toBe(fakeOrganization.organization.id);
+  });
+
   test('standalone API keys component in user context based on user_api_keys_enabled', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
 

packages/shared/src/react/hooks/useAPIKeys.rq.tsx

@@ -95,7 +95,9 @@ export function useAPIKeys<T extends UseAPIKeysParams>(params?: T): UseAPIKeysRe
   const isEnabled = (safeValues.enabled ?? true) && clerk.loaded;
 
   return usePagesOrInfinite({
-    fetcher: clerk.apiKeys?.getAll ? (params: GetAPIKeysParams) => clerk.apiKeys.getAll(params) : undefined,
+    fetcher: clerk.apiKeys?.getAll
+      ? (params: GetAPIKeysParams) => clerk.apiKeys.getAll({ ...params, subject: safeValues.subject })
+      : undefined,
     config: {
       keepPreviousData: safeValues.keepPreviousData,
       infinite: safeValues.infinite,

packages/shared/src/react/hooks/useAPIKeys.swr.tsx

@@ -98,7 +98,9 @@ export function useAPIKeys<T extends UseAPIKeysParams>(params?: T): UseAPIKeysRe
   const isEnabled = (safeValues.enabled ?? true) && clerk.loaded;
 
   const result = usePagesOrInfinite({
-    fetcher: clerk.apiKeys?.getAll ? (params: GetAPIKeysParams) => clerk.apiKeys.getAll(params) : undefined,
+    fetcher: clerk.apiKeys?.getAll
+      ? (params: GetAPIKeysParams) => clerk.apiKeys.getAll({ ...params, subject: safeValues.subject })
+      : undefined,
     config: {
       keepPreviousData: safeValues.keepPreviousData,
       infinite: safeValues.infinite,

packages/testing/src/playwright/unstable/page-objects/userProfile.ts

@@ -17,6 +17,9 @@ export const createUserProfileComponentPageObject = (testArgs: { page: EnhancedP
     switchToBillingTab: async () => {
       await page.getByText(/Billing/i).click();
     },
+    switchToAPIKeysTab: async () => {
+      await page.getByText(/API keys/i).click();
+    },
     waitForMounted: () => {
       return page.waitForSelector('.cl-userProfile-root', { state: 'attached' });
     },