chore(clerk-js): Remove secret key column in API keys component

.changeset/chilly-boxes-warn.md

@@ -0,0 +1,5 @@
+---
+"@clerk/localizations": minor
+---
+
+Added localization entry for the API key copy modal component.

.changeset/heavy-books-protect.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": minor
+---
+
+Replaced the persistent key column in the API keys table with a one-time modal that displays the secret immediately after creation.

integration/testUtils/usersService.ts

@@ -204,11 +204,9 @@ export const createUserService = (clerkClient: ClerkClient) => {
         secondsUntilExpiration: TWENTY_MINUTES,
       });
 
-      const { secret } = await clerkClient.apiKeys.getSecret(apiKey.id);
-
       return {
         apiKey,
-        secret,
+        secret: apiKey.secret ?? '',
         revoke: () => clerkClient.apiKeys.revoke({ apiKeyId: apiKey.id, revocationReason: 'For testing purposes' }),
       } satisfies FakeAPIKey;
     },

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

@@ -97,7 +97,7 @@ testAgainstRunningApps({
     await expect(table.locator('.cl-tableRow', { hasText: apiKeyName })).toHaveCount(0);
   });
 
-  test('can copy api key secret', async ({ page, context }) => {
+  test('can copy api key secret after creation', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
     await u.po.signIn.waitForMounted();
@@ -109,71 +109,42 @@ testAgainstRunningApps({
 
     const apiKeyName = `${fakeAdmin.firstName}-${Date.now()}`;
 
+    // Wait for create API response to get the secret
+    const createResponsePromise = page.waitForResponse(
+      response => response.url().includes('/api_keys') && response.request().method() === 'POST',
+    );
+
     // Create API key
     await u.po.apiKeys.clickAddButton();
     await u.po.apiKeys.waitForFormOpened();
     await u.po.apiKeys.typeName(apiKeyName);
     await u.po.apiKeys.selectExpiration('1d');
     await u.po.apiKeys.clickSaveButton();
-    await u.po.apiKeys.waitForFormClosed();
 
-    const responsePromise = page.waitForResponse(
-      response => response.url().includes('/secret') && response.request().method() === 'GET',
-    );
+    // Get the secret from the create response
+    const createResponse = await createResponsePromise;
+    const apiKeyData = await createResponse.json();
+    const secret = apiKeyData.secret;
 
-    // Copy API key
-    const table = u.page.locator('.cl-apiKeysTable');
-    const row = table.locator('.cl-tableRow', { hasText: apiKeyName });
-    await row.waitFor({ state: 'attached' });
-    await row.locator('.cl-apiKeysCopyButton').click();
+    // Wait for the copy modal to appear
+    const copyModal = page.locator('.cl-apiKeysCopyModal');
+    await copyModal.waitFor({ state: 'attached' });
 
-    // Read clipboard contents
-    const data = await (await responsePromise).json();
+    // Grant clipboard permissions before clicking the button
     await context.grantPermissions(['clipboard-read']);
-    const clipboardText = await page.evaluate('navigator.clipboard.readText()');
-    await context.clearPermissions();
-    expect(clipboardText).toBe(data.secret);
-  });
-
-  test('can toggle api key secret visibility', async ({ page, context }) => {
-    const u = createTestUtils({ app, page, context });
-    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.page.goToRelative('/api-keys');
-    await u.po.apiKeys.waitForMounted();
-
-    const apiKeyName = `${fakeAdmin.firstName}-${Date.now()}`;
-
-    // Create API key
-    await u.po.apiKeys.clickAddButton();
-    await u.po.apiKeys.waitForFormOpened();
-    await u.po.apiKeys.typeName(apiKeyName);
-    await u.po.apiKeys.selectExpiration('1d');
-    await u.po.apiKeys.clickSaveButton();
-    await u.po.apiKeys.waitForFormClosed();
 
-    const responsePromise = page.waitForResponse(
-      response => response.url().includes('/secret') && response.request().method() === 'GET',
-    );
+    // Click "Copy & Close" button which will copy the secret and close the modal
+    const copyAndCloseButton = copyModal.locator('.cl-apiKeysCopyModalSubmitButton');
+    await copyAndCloseButton.waitFor({ state: 'attached' });
+    await copyAndCloseButton.click();
 
-    // Toggle API key secret visibility
-    const table = u.page.locator('.cl-apiKeysTable');
-    const row = table.locator('.cl-tableRow', { hasText: apiKeyName });
-    await row.waitFor({ state: 'attached' });
-    await expect(row.locator('input')).toHaveAttribute('type', 'password');
-    await row.locator('.cl-apiKeysRevealButton').click();
-
-    // Verify if secret matches the input value
-    const data = await (await responsePromise).json();
-    await expect(row.locator('input')).toHaveAttribute('type', 'text');
-    await expect(row.locator('input')).toHaveValue(data.secret);
+    // Wait for modal to close
+    await copyModal.waitFor({ state: 'detached' });
 
-    // Toggle visibility off
-    await row.locator('.cl-apiKeysRevealButton').click();
-    await expect(row.locator('input')).toHaveAttribute('type', 'password');
+    // Read clipboard contents to verify the secret was copied
+    const clipboardText = await page.evaluate('navigator.clipboard.readText()');
+    await context.clearPermissions();
+    expect(clipboardText).toBe(secret);
   });
 
   test('component does not render for orgs when user does not have permissions', async ({ page, context }) => {

packages/clerk-js/src/core/modules/apiKeys/index.ts

@@ -54,50 +54,32 @@ export class APIKeys implements APIKeysNamespace {
       });
   }
 
-  async getSecret(id: string): Promise<string> {
-    return BaseResource.clerk
-      .getFapiClient()
-      .request<{ secret: string }>({
-        ...(await this.getBaseFapiProxyOptions()),
-        method: 'GET',
-        path: `/api_keys/${id}/secret`,
-      })
-      .then(res => {
-        const { secret } = res.payload as unknown as { secret: string };
-        return secret;
-      });
-  }
-
   async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {
-    const json = (
-      await BaseResource._fetch<ApiKeyJSON>({
-        ...(await this.getBaseFapiProxyOptions()),
-        path: '/api_keys',
-        method: 'POST',
-        body: JSON.stringify({
-          type: params.type ?? 'api_key',
-          name: params.name,
-          subject: params.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
-          description: params.description,
-          seconds_until_expiration: params.secondsUntilExpiration,
-        }),
-      })
-    )?.response as ApiKeyJSON;
+    const json = (await BaseResource._fetch<ApiKeyJSON>({
+      ...(await this.getBaseFapiProxyOptions()),
+      path: '/api_keys',
+      method: 'POST',
+      body: JSON.stringify({
+        type: params.type ?? 'api_key',
+        name: params.name,
+        subject: params.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+        description: params.description,
+        seconds_until_expiration: params.secondsUntilExpiration,
+      }),
+    })) as unknown as ApiKeyJSON;
 
     return new APIKey(json);
   }
 
   async revoke(params: RevokeAPIKeyParams): Promise<APIKeyResource> {
-    const json = (
-      await BaseResource._fetch<ApiKeyJSON>({
-        ...(await this.getBaseFapiProxyOptions()),
-        method: 'POST',
-        path: `/api_keys/${params.apiKeyID}/revoke`,
-        body: JSON.stringify({
-          revocation_reason: params.revocationReason,
-        }),
-      })
-    )?.response as ApiKeyJSON;
+    const json = (await BaseResource._fetch<ApiKeyJSON>({
+      ...(await this.getBaseFapiProxyOptions()),
+      method: 'POST',
+      path: `/api_keys/${params.apiKeyID}/revoke`,
+      body: JSON.stringify({
+        revocation_reason: params.revocationReason,
+      }),
+    })) as unknown as ApiKeyJSON;
 
     return new APIKey(json);
   }

packages/clerk-js/src/core/resources/APIKey.ts

@@ -18,6 +18,7 @@ export class APIKey extends BaseResource implements APIKeyResource {
   expiration!: Date | null;
   createdBy!: string | null;
   description!: string | null;
+  secret?: string;
   lastUsedAt!: Date | null;
   createdAt!: Date;
   updatedAt!: Date;
@@ -44,6 +45,7 @@ export class APIKey extends BaseResource implements APIKeyResource {
     this.expiration = data.expiration ? unixEpochToDate(data.expiration) : null;
     this.createdBy = data.created_by;
     this.description = data.description;
+    this.secret = data.secret;
     this.lastUsedAt = data.last_used_at ? unixEpochToDate(data.last_used_at) : null;
     this.updatedAt = unixEpochToDate(data.updated_at);
     this.createdAt = unixEpochToDate(data.created_at);

packages/clerk-js/src/ui/components/ApiKeys/ApiKeyModal.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Modal } from '@/ui/elements/Modal';
+import type { ThemableCssProp } from '@/ui/styledSystem';
+
+type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+  modalRoot?: React.MutableRefObject<HTMLElement | null>;
+};
+
+/**
+ * Container styles for modals rendered within a custom portal root (e.g., UserProfile or OrganizationProfile).
+ * When a modalRoot is provided, the modal is scoped to that container rather than the document root,
+ * requiring different positioning (absolute instead of fixed) and backdrop styling.
+ */
+const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLElement | null>): ThemableCssProp => {
+  return [
+    { alignItems: 'center' },
+    modalRoot
+      ? t => ({
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'inherit',
+          backdropFilter: `blur(${t.sizes.$2})`,
+          display: 'flex',
+          justifyContent: 'center',
+          minHeight: '100%',
+          height: '100%',
+          width: '100%',
+          borderRadius: t.radii.$lg,
+        })
+      : {},
+  ];
+};
+
+export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+  return (
+    <Modal
+      {...modalProps}
+      portalRoot={modalRoot}
+      containerSx={[getScopedPortalContainerStyles(modalRoot), containerSx]}
+    />
+  );
+};

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

@@ -42,6 +42,12 @@ const RevokeAPIKeyConfirmationModal = lazy(() =>
   })),
 );
 
+const CopyApiKeyModal = lazy(() =>
+  import(/* webpackChunkName: "copy-api-key-modal"*/ './CopyApiKeyModal').then(module => ({
+    default: module.CopyApiKeyModal,
+  })),
+);
+
 export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPageProps) => {
   const isOrg = isOrganizationId(subject);
   const canReadAPIKeys = useProtect({ permission: 'org:sys_api_keys:read' });
@@ -61,23 +67,26 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
     cacheKey,
   } = useApiKeys({ subject, perPage, enabled: isOrg ? canReadAPIKeys : true });
   const card = useCardState();
-  const { trigger: createApiKey, isMutating } = useSWRMutation(cacheKey, (_, { arg }: { arg: CreateAPIKeyParams }) =>
-    clerk.apiKeys.create(arg),
-  );
-  const { t } = useLocalizations();
   const clerk = useClerk();
+  const {
+    data: createdApiKey,
+    trigger: createApiKey,
+    isMutating,
+  } = useSWRMutation(cacheKey, (_key, { arg }: { arg: CreateAPIKeyParams }) => clerk.apiKeys.create(arg));
+  const { t } = useLocalizations();
   const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
   const [selectedApiKeyId, setSelectedApiKeyId] = useState('');
   const [selectedApiKeyName, setSelectedApiKeyName] = useState('');
+  const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);
 
-  const handleCreateApiKey = async (params: OnCreateParams, closeCardFn: () => void) => {
+  const handleCreateApiKey = async (params: OnCreateParams) => {
     try {
       await createApiKey({
         ...params,
         subject,
       });
-      closeCardFn();
       card.setError(undefined);
+      setIsCopyModalOpen(true);
     } catch (err: any) {
       if (isClerkAPIResponseError(err)) {
         if (err.status === 409) {
@@ -147,7 +156,17 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
             </Action.Card>
           </Flex>
         </Action.Open>
+
+        <CopyApiKeyModal
+          isOpen={isCopyModalOpen}
+          onOpen={() => setIsCopyModalOpen(true)}
+          onClose={() => setIsCopyModalOpen(false)}
+          apiKeyName={createdApiKey?.name ?? ''}
+          apiKeySecret={createdApiKey?.secret ?? ''}
+          modalRoot={revokeModalRoot}
+        />
       </Action.Root>
+
       <ApiKeysTable
         rows={apiKeys}
         isLoading={isLoading}
@@ -164,6 +183,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
           rowInfo={{ allRowsCount: itemCount, startingRow, endingRow }}
         />
       )}
+
+      {/* Modals */}
       <RevokeAPIKeyConfirmationModal
         subject={subject}
         isOpen={isRevokeModalOpen}