feat(clerk-js,clerk-react,types,localization): <ApiKeys /> AIO MVP

packages/clerk-js/sandbox/app.ts

@@ -33,6 +33,7 @@ const AVAILABLE_COMPONENTS = [
   'organizationSwitcher',
   'waitlist',
   '#Table',
+  'apiKeys',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -91,6 +92,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
   organizationSwitcher: buildComponentControls('organizationSwitcher'),
   waitlist: buildComponentControls('waitlist'),
   #Table: buildComponentControls('#Table'),
+  apiKeys: buildComponentControls('apiKeys'),
 };
 
 declare global {
@@ -310,6 +312,9 @@ void (async () => {
     '/#-table': () => {
       Clerk.mount#Table(app, componentControls.#Table.getProps() ?? {});
     },
+    '/api-keys': () => {
+      Clerk.mountApiKeys(app, componentControls.apiKeys.getProps() ?? {});
+    },
     '/open-sign-in': () => {
       mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
     },

packages/clerk-js/sandbox/template.html

@@ -260,6 +260,14 @@
               #Table
             </a>
           </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/api-keys"
+            >
+              Manage API Keys
+            </a>
+          </li>
           <li class="relative">
             <a
               class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"

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

@@ -19,6 +19,8 @@ import type {
   __internal_ComponentNavigationContext,
   __internal_PlanDetailsProps,
   __internal_UserVerificationModalProps,
+  ApiKeyResource,
+  ApiKeysProps,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
@@ -30,13 +32,15 @@ import type {
   ClientJSONSnapshot,
   ClientResource,
   CommerceBillingNamespace,
+  CreateApiKeyParams,
   CreateOrganizationParams,
   CreateOrganizationProps,
   CredentialReturn,
   DomainOrProxyUrl,
   EnvironmentJSON,
   EnvironmentJSONSnapshot,
   EnvironmentResource,
+  GetApiKeysParams,
   GoogleOneTapProps,
   HandleEmailLinkVerificationParams,
   HandleOAuthCallbackParams,
@@ -57,6 +61,7 @@ import type {
   PublicKeyCredentialWithAuthenticatorAttestationResponse,
   RedirectOptions,
   Resources,
+  RevokeApiKeyParams,
   SDKMetadata,
   SetActiveParams,
   SignedInSessionResource,
@@ -133,6 +138,7 @@ import { createFapiClient } from './fapiClient';
 import { createClientFromJwt } from './jwt-client';
 import { CommerceBilling } from './modules/commerce';
 import {
+  ApiKey,
   BaseResource,
   Client,
   EmailLinkError,
@@ -1037,6 +1043,29 @@ export class Clerk implements ClerkInterface {
     );
   };
 
+  public mountApiKeys = (node: HTMLDivElement, props?: ApiKeysProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted({ preloadHint: 'ApiKeys' }).then(controls =>
+      controls.mountComponent({
+        name: 'ApiKeys',
+        appearanceKey: 'apiKeys',
+        node,
+        props,
+      }),
+    );
+
+    this.telemetry?.record(eventPrebuiltComponentMounted('ApiKeys', props));
+  };
+
+  public unmountApiKeys = (node: HTMLDivElement): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls =>
+      controls.unmountComponent({
+        node,
+      }),
+    );
+  };
+
   /**
    * `setActive` can be used to set the active session and/or organization.
    */
@@ -2027,6 +2056,14 @@ export class Clerk implements ClerkInterface {
     this.environment = environment;
   }
 
+  public getApiKeys = (params?: GetApiKeysParams): Promise<ApiKeyResource[]> => ApiKey.getAll(params);
+
+  public getApiKeySecret = (apiKeyID: string): Promise<string> => ApiKey.getSecret(apiKeyID);
+
+  public createApiKey = (params: CreateApiKeyParams): Promise<ApiKeyResource> => ApiKey.create(params);
+
+  public revokeApiKey = (params: RevokeApiKeyParams): Promise<ApiKeyResource> => ApiKey.revoke(params);
+
   __internal_setCountry = (country: string | null) => {
     if (!this.__internal_country) {
       this.__internal_country = country;

packages/clerk-js/src/core/fapiClient.ts

@@ -224,8 +224,8 @@ export function createFapiClient(options: FapiClientOptions): FapiClient {
     let response: Response;
     const urlStr = requestInit.url.toString();
     const fetchOpts: FapiRequestInit = {
-      ...requestInit,
       credentials: 'include',
+      ...requestInit,
       method: overwrittenRequestMethod,
     };
 

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

@@ -0,0 +1,141 @@
+import type {
+  ApiKeyJSON,
+  ApiKeyResource,
+  CreateApiKeyParams,
+  GetApiKeysParams,
+  RevokeApiKeyParams,
+} from '@clerk/types';
+
+import { unixEpochToDate } from '../../utils/date';
+import { BaseResource } from './internal';
+
+export class ApiKey extends BaseResource implements ApiKeyResource {
+  pathRoot = '/api_keys';
+
+  id!: string;
+  type!: string;
+  name!: string;
+  subject!: string;
+  scopes!: string[];
+  claims!: Record<string, any> | null;
+  revoked!: boolean;
+  revocationReason!: string | null;
+  expired!: boolean;
+  expiration!: Date | null;
+  createdBy!: string | null;
+  creationReason!: string | null;
+  createdAt!: Date;
+  updatedAt!: Date;
+
+  constructor(data: ApiKeyJSON) {
+    super();
+    this.fromJSON(data);
+  }
+
+  protected fromJSON(data: ApiKeyJSON | null): this {
+    if (!data) {
+      return this;
+    }
+
+    this.id = data.id;
+    this.type = data.type;
+    this.name = data.name;
+    this.subject = data.subject;
+    this.scopes = data.scopes;
+    this.claims = data.claims;
+    this.revoked = data.revoked;
+    this.revocationReason = data.revocation_reason;
+    this.expired = data.expired;
+    this.expiration = data.expiration ? unixEpochToDate(data.expiration) : null;
+    this.createdBy = data.created_by;
+    this.creationReason = data.creation_reason;
+    this.updatedAt = unixEpochToDate(data.updated_at);
+    this.createdAt = unixEpochToDate(data.created_at);
+    return this;
+  }
+
+  static async getAll(params?: GetApiKeysParams): Promise<ApiKeyResource[]> {
+    return this.clerk
+      .getFapiClient()
+      .request<{ api_keys: ApiKeyJSON[] }>({
+        method: 'GET',
+        path: '/api_keys',
+        pathPrefix: '',
+        search: {
+          subject: params?.subject ?? this.clerk.organization?.id ?? this.clerk.user?.id ?? '',
+        },
+        headers: {
+          Authorization: `Bearer ${await this.clerk.session?.getToken()}`,
+        },
+        credentials: 'same-origin',
+      })
+      .then(res => {
+        const apiKeysJSON = res.payload as unknown as { api_keys: ApiKeyJSON[] };
+        return apiKeysJSON.api_keys.map(json => new ApiKey(json));
+      })
+      .catch(() => []);
+  }
+
+  static async getSecret(id: string): Promise<string> {
+    return this.clerk
+      .getFapiClient()
+      .request<{ secret: string }>({
+        method: 'GET',
+        path: `/api_keys/${id}/secret`,
+        credentials: 'same-origin',
+        pathPrefix: '',
+        headers: {
+          Authorization: `Bearer ${await this.clerk.session?.getToken()}`,
+        },
+      })
+      .then(res => {
+        const { secret } = res.payload as unknown as { secret: string };
+        return secret;
+      })
+      .catch(() => '');
+  }
+
+  static async create(params: CreateApiKeyParams): Promise<ApiKeyResource> {
+    const json = (
+      await BaseResource._fetch<ApiKeyJSON>({
+        path: '/api_keys',
+        method: 'POST',
+        pathPrefix: '',
+        headers: {
+          Authorization: `Bearer ${await this.clerk.session?.getToken()}`,
+          'Content-Type': 'application/json',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify({
+          type: params.type ?? 'api_key',
+          name: params.name,
+          subject: params.subject ?? this.clerk.organization?.id ?? this.clerk.user?.id ?? '',
+          creation_reason: params.creationReason,
+          seconds_until_expiration: params.secondsUntilExpiration,
+        }),
+      })
+    )?.response as ApiKeyJSON;
+
+    return new ApiKey(json);
+  }
+
+  static async revoke(params: RevokeApiKeyParams): Promise<ApiKeyResource> {
+    const json = (
+      await BaseResource._fetch<ApiKeyJSON>({
+        path: `/api_keys/${params.apiKeyID}/revoke`,
+        method: 'POST',
+        pathPrefix: '',
+        headers: {
+          Authorization: `Bearer ${await this.clerk.session?.getToken()}`,
+          'Content-Type': 'application/json',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify({
+          revocation_reason: params.revocationReason,
+        }),
+      })
+    )?.response as ApiKeyJSON;
+
+    return new ApiKey(json);
+  }
+}

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

@@ -42,3 +42,4 @@ export * from './UserOrganizationInvitation';
 export * from './Verification';
 export * from './Web3Wallet';
 export * from './Waitlist';
+export * from './ApiKey';

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

@@ -0,0 +1,97 @@
+import { useOrganization, useUser } from '@clerk/shared/react';
+
+import { useApiKeysContext } from '../../contexts';
+import { Box, Button, Col, Flex, Flow, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { Card, InputWithIcon, Pagination, withCardStateProvider } from '../../elements';
+import { Action } from '../../elements/Action';
+import { MagnifyingGlass } from '../../icons';
+import { ApiKeysTable } from './ApiKeysTable';
+import { CreateApiKeyForm } from './CreateApiKeyForm';
+import { useApiKeys } from './useApiKeys';
+
+export const ApiKeysInternal = ({ subject, perPage }: { subject: string; perPage?: number }) => {
+  const {
+    apiKeys,
+    isLoading,
+    revokeApiKey,
+    search,
+    setSearch,
+    page,
+    setPage,
+    pageCount,
+    itemCount,
+    startingRow,
+    endingRow,
+    handleCreate,
+  } = useApiKeys({ subject, perPage });
+  const { t } = useLocalizations();
+
+  return (
+    <Col gap={4}>
+      <Action.Root>
+        <Flex
+          justify='between'
+          align='center'
+        >
+          <Box>
+            <InputWithIcon
+              placeholder={t(localizationKeys('apiKey.action__search'))}
+              leftIcon={<Icon icon={MagnifyingGlass} />}
+              value={search}
+              onChange={e => {
+                setSearch(e.target.value);
+                setPage(1);
+              }}
+            />
+          </Box>
+          <Action.Trigger value='add'>
+            <Button
+              variant='solid'
+              localizationKey={localizationKeys('apiKey.action__add')}
+            />
+          </Action.Trigger>
+        </Flex>
+        <Action.Open value='add'>
+          <Flex sx={t => ({ paddingTop: t.space.$6, paddingBottom: t.space.$6 })}>
+            <Action.Card sx={{ width: '100%' }}>
+              <CreateApiKeyForm onCreate={params => void handleCreate(params)} />
+            </Action.Card>
+          </Flex>
+        </Action.Open>
+      </Action.Root>
+      <ApiKeysTable
+        rows={apiKeys}
+        isLoading={isLoading}
+        onRevoke={revokeApiKey}
+      />
+      {itemCount > 5 && (
+        <Pagination
+          count={pageCount}
+          page={page}
+          onChange={setPage}
+          siblingCount={1}
+          rowInfo={{ allRowsCount: itemCount, startingRow, endingRow }}
+        />
+      )}
+    </Col>
+  );
+};
+
+export const ApiKeys = withCardStateProvider(() => {
+  const ctx = useApiKeysContext();
+  const { user } = useUser();
+  const { organization } = useOrganization();
+
+  return (
+    <Flow.Root flow='apiKey'>
+      <Card.Root sx={{ width: '100%' }}>
+        <Card.Content sx={{ textAlign: 'left' }}>
+          <ApiKeysInternal
+            subject={ctx.subject ?? organization?.id ?? user?.id ?? ''}
+            perPage={ctx.perPage}
+          />
+        </Card.Content>
+      </Card.Root>
+    </Flow.Root>
+  );
+});