feat(clerk-js): Implement server-side pagination and filtering for API keys

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,

.changeset/bright-papayas-accept.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/shared": minor
+---
+
+Implemented server-side pagination and filtering for API keys

integration/testUtils/usersService.ts

@@ -200,7 +200,7 @@ export const createUserService = (clerkClient: ClerkClient) => {
 
  const apiKey = await clerkClient.apiKeys.create({
  subject: userId,
- name: `Integration Test - ${userId}`,
+ name: `Integration Test - ${faker.string.uuid()}`,
  secondsUntilExpiration: TWENTY_MINUTES,
  });
 

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

@@ -66,6 +66,70 @@ testAgainstRunningApps({
  await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(2);
  });
 
+ test('pagination works correctly with multiple pages', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Create user and 11 API keys to trigger pagination (default perPage is 10)
+ const fakeUser = u.services.users.createFakeUser();
+ const bapiUser = await u.services.users.createBapiUser(fakeUser);
+ const fakeAPIKeys = await Promise.all(
+ Array.from({ length: 11 }, () => u.services.users.createFakeAPIKey(bapiUser.id)),
+ );
+
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.po.page.goToRelative('/api-keys');
+ await u.po.apiKeys.waitForMounted();
+
+ // Verify first page
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Navigate to second page
+ const page2Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^2$/ });
+ await page2Button.click();
+ await expect(u.page.getByText(/Displaying 11 – 11 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(1);
+
+ // Navigate back to first page
+ const page1Button = u.page.locator('.cl-paginationButton').filter({ hasText: /^1$/ });
+ await page1Button.click();
+ await expect(u.page.getByText(/Displaying 1 – 10 of 11/i)).toBeVisible();
+ await expect(u.page.locator('.cl-apiKeysTable .cl-tableBody .cl-tableRow')).toHaveCount(10);
+
+ // Cleanup
+ await Promise.all(fakeAPIKeys.map(key => key.revoke()));
+ await fakeUser.deleteIfExists();
+ });
+
+ test('pagination does not show when items fit in one page', 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}-single-page-${Date.now()}`;
+ 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.waitForCopyModalOpened();
+ await u.po.apiKeys.clickCopyAndCloseButton();
+ await u.po.apiKeys.waitForCopyModalClosed();
+ await u.po.apiKeys.waitForFormClosed();
+
+ await expect(u.page.getByText(/Displaying.*of.*/i)).toBeHidden();
+ });
+
  test('can revoke api keys', async ({ page, context }) => {
  const u = createTestUtils({ app, page, context });
  await u.po.signIn.goTo();

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

@@ -3,12 +3,14 @@ import type {
  ApiKeyJSON,
  APIKeyResource,
  APIKeysNamespace,
+ ClerkPaginatedResponse,
  CreateAPIKeyParams,
  GetAPIKeysParams,
  RevokeAPIKeyParams,
 } from '@clerk/shared/types';
 
 import type { FapiRequestInit } from '@/core/fapiClient';
+import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
 
 import { APIKey, BaseResource } from '../../resources/internal';
 
@@ -35,23 +37,24 @@ export class APIKeys implements APIKeysNamespace {
  };
  }
 
- async getAll(params?: GetAPIKeysParams): Promise<APIKeyResource[]> {
- return BaseResource.clerk
- .getFapiClient()
- .request<{ api_keys: ApiKeyJSON[] }>({
- ...(await this.getBaseFapiProxyOptions()),
- method: 'GET',
- path: '/api_keys',
- search: {
- subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
- // TODO: (rob) Remove when server-side pagination is implemented.
- limit: '100',
- },
- })
- .then(res => {
- const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
- return apiKeysJSON.api_keys.map(json => new APIKey(json));
- });
+ async getAll(params?: GetAPIKeysParams): Promise<ClerkPaginatedResponse<APIKeyResource>> {
+ return BaseResource._fetch({
+ ...(await this.getBaseFapiProxyOptions()),
+ method: 'GET',
+ path: '/api_keys',
+ search: convertPageToOffsetSearchParams({
+ ...params,
+ subject: params?.subject ?? BaseResource.clerk.organization?.id ?? BaseResource.clerk.user?.id ?? '',
+ query: params?.query ?? '',
+ }),
+ }).then(res => {
+ const { data: apiKeys, total_count } = res as unknown as ClerkPaginatedResponse<ApiKeyJSON>;
+
+ return {
+ total_count,
+ data: apiKeys.map(apiKey => new APIKey(apiKey)),
+ };
+ });
  }
 
  async create(params: CreateAPIKeyParams): Promise<APIKeyResource> {

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@/ui/elements/Modal';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
-type ApiKeyModalProps = React.ComponentProps<typeof Modal> & {
+type APIKeyModalProps = React.ComponentProps<typeof Modal> & {
  modalRoot?: React.MutableRefObject<HTMLElement | null>;
 };
 
@@ -33,7 +33,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
  ];
 };
 
-export const ApiKeyModal = ({ modalRoot, containerSx, ...modalProps }: ApiKeyModalProps) => {
+export const APIKeyModal = ({ modalRoot, containerSx, ...modalProps }: APIKeyModalProps) => {
  return (
  <Modal
  {...modalProps}

packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx → packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx

@@ -19,7 +19,7 @@ import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { mqu } from '@/ui/styledSystem';
 import { timeAgo } from '@/ui/utils/timeAgo';
 
-export const ApiKeysTable = ({
+export const APIKeysTable = ({
  rows,
  isLoading,
  onRevoke,