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

.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,41 @@ 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();
+
+    // Capture the subject parameter
+    let capturedSubject: string | null = null;
+    await u.page.route('**/api_keys*', async route => {
+      const url = new URL(route.request().url());
+      capturedSubject = url.searchParams.get('subject');
+      await route.continue();
+    });
+
+    await u.po.page.goToRelative('/user');
+    await u.po.userProfile.waitForMounted();
+    await u.po.userProfile.switchToAPIKeysTab();
+
+    // Verify the subject parameter is the user ID, not the organization ID
+    expect(capturedSubject).toBe(userId);
+    expect(capturedSubject).not.toBe(fakeOrganization.organization.id);
+
+    await u.page.unrouteAll();
+  });
+
   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

@@ -107,9 +107,7 @@ export function useAPIKeys<T extends UseAPIKeysParams>(params?: T): UseAPIKeysRe
     keys: createCacheKeys({
       stablePrefix: STABLE_KEYS.API_KEYS_KEY,
       authenticated: Boolean(clerk.user),
-      tracked: {
-        subject: safeValues.subject,
-      },
+      tracked: {},
       untracked: {
         args: hookParams,
       },

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

@@ -110,9 +110,7 @@ export function useAPIKeys<T extends UseAPIKeysParams>(params?: T): UseAPIKeysRe
     keys: createCacheKeys({
       stablePrefix: STABLE_KEYS.API_KEYS_KEY,
       authenticated: Boolean(clerk.user),
-      tracked: {
-        subject: safeValues.subject,
-      },
+      tracked: {},
       untracked: {
         args: hookParams,
       },

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' });
     },