refactor(clerk-js): Standardize API keys naming convention (#7223)

wobsoriano · web-flow · commit bdbb0d91712a · 2025-11-15T21:12:53.000Z
diff --git a/.changeset/brown-bags-fold.md b/.changeset/brown-bags-fold.md
@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/clerk-react": minor
+"@clerk/shared": minor
+---
+
+Standardized API keys naming convention
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
@@ -325,7 +325,7 @@ void (async () => {
       Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
     },
     '/api-keys': () => {
-      Clerk.mountApiKeys(app, componentControls.apiKeys.getProps() ?? {});
+      Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {});
     },
     '/oauth-consent': () => {
       const searchParams = new URLSearchParams(window.location.search);
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -1226,11 +1226,11 @@ export class Clerk implements ClerkInterface {
   /**
    * @experimental This API is in early access and may change in future releases.
    *
-   * Mount a api keys component at the target element.
+   * Mount a API keys component at the target element.
    * @param targetNode Target to mount the APIKeys component.
    * @param props Configuration parameters.
    */
-  public mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps) => {
+  public mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps) => {
     this.assertComponentsReady(this.#componentControls);
 
     logger.warnOnce('Clerk: <APIKeys /> component is in early access and not yet recommended for production use.');
@@ -1277,12 +1277,12 @@ export class Clerk implements ClerkInterface {
   /**
    * @experimental This API is in early access and may change in future releases.
    *
-   * Unmount a api keys component from the target element.
+   * Unmount a API keys component from the target element.
    * If there is no component mounted at the target node, results in a noop.
    *
-   * @param targetNode Target node to unmount the ApiKeys component from.
+   * @param targetNode Target node to unmount the APIKeys component from.
    */
-  public unmountApiKeys = (node: HTMLDivElement) => {
+  public unmountAPIKeys = (node: HTMLDivElement) => {
     this.assertComponentsReady(this.#componentControls);
     void this.#componentControls.ensureMounted().then(controls => controls.unmountComponent({ node }));
   };
diff --git a/packages/clerk-js/src/ui/components/APIKeys/APIKeyModal.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeyModal.tsx
diff --git a/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx
@@ -101,8 +101,8 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
   } = useSWRMutation('api-keys-create', (_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 [selectedAPIKeyID, setSelectedAPIKeyID] = useState('');
+  const [selectedAPIKeyName, setSelectedAPIKeyName] = useState('');
   const [isCopyModalOpen, setIsCopyModalOpen] = useState(false);
 
   const handleCreateAPIKey = async (params: OnCreateParams) => {
@@ -123,9 +123,9 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
     }
   };
 
-  const handleRevoke = (apiKeyId: string, apiKeyName: string) => {
-    setSelectedApiKeyId(apiKeyId);
-    setSelectedApiKeyName(apiKeyName);
+  const handleRevoke = (apiKeyID: string, apiKeyName: string) => {
+    setSelectedAPIKeyID(apiKeyID);
+    setSelectedAPIKeyName(apiKeyName);
     setIsRevokeModalOpen(true);
   };
 
@@ -220,12 +220,12 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
         isOpen={isRevokeModalOpen}
         onOpen={() => setIsRevokeModalOpen(true)}
         onClose={() => {
-          setSelectedApiKeyId('');
-          setSelectedApiKeyName('');
+          setSelectedAPIKeyID('');
+          setSelectedAPIKeyName('');
           setIsRevokeModalOpen(false);
         }}
-        apiKeyId={selectedApiKeyId}
-        apiKeyName={selectedApiKeyName}
+        apiKeyID={selectedAPIKeyID}
+        apiKeyName={selectedAPIKeyName}
         onRevokeSuccess={invalidateAll}
         modalRoot={revokeModalRoot}
       />
diff --git a/packages/clerk-js/src/ui/components/APIKeys/APIKeysTable.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeysTable.tsx
diff --git a/packages/clerk-js/src/ui/components/APIKeys/CopyAPIKeyModal.tsx b/packages/clerk-js/src/ui/components/APIKeys/CopyAPIKeyModal.tsx
diff --git a/packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx b/packages/clerk-js/src/ui/components/APIKeys/CreateAPIKeyForm.tsx
diff --git a/packages/clerk-js/src/ui/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/clerk-js/src/ui/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
@@ -14,7 +14,7 @@ type RevokeAPIKeyConfirmationModalProps = {
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
-  apiKeyId?: string;
+  apiKeyID?: string;
   apiKeyName: string;
   onRevokeSuccess?: () => void;
   modalRoot?: React.MutableRefObject<HTMLElement | null>;
@@ -24,7 +24,7 @@ export const RevokeAPIKeyConfirmationModal = ({
   isOpen,
   onOpen,
   onClose,
-  apiKeyId,
+  apiKeyID,
   apiKeyName,
   onRevokeSuccess,
   modalRoot,
@@ -48,11 +48,11 @@ export const RevokeAPIKeyConfirmationModal = ({
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!apiKeyId || !canSubmit) {
+    if (!apiKeyID || !canSubmit) {
       return;
     }
 
-    await clerk.apiKeys.revoke({ apiKeyID: apiKeyId });
+    await clerk.apiKeys.revoke({ apiKeyID: apiKeyID });
     onRevokeSuccess?.();
     handleClose();
   };
diff --git a/packages/clerk-js/src/ui/components/APIKeys/__tests__/APIKeys.spec.tsx b/packages/clerk-js/src/ui/components/APIKeys/__tests__/APIKeys.spec.tsx
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, waitFor } from '@/test/utils';
 
-import { APIKeys } from '../ApiKeys';
+import { APIKeys } from '../APIKeys';
 
 const { createFixtures } = bindCreateFixtures('APIKeys');
 
diff --git a/packages/clerk-js/src/ui/components/APIKeys/utils.ts b/packages/clerk-js/src/ui/components/APIKeys/utils.ts
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationAPIKeysPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationAPIKeysPage.tsx
@@ -5,7 +5,7 @@ import { Col, localizationKeys } from '@/ui/customizables';
 import { Header } from '@/ui/elements/Header';
 import { useUnsafeNavbarContext } from '@/ui/elements/Navbar';
 
-import { APIKeysPage } from '../ApiKeys/ApiKeys';
+import { APIKeysPage } from '../APIKeys/APIKeys';
 
 export const OrganizationAPIKeysPage = () => {
   const { organization } = useOrganization();
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
@@ -14,7 +14,7 @@ const OrganizationBillingPage = lazy(() =>
 );
 
 const OrganizationAPIKeysPage = lazy(() =>
-  import(/* webpackChunkName: "op-api-keys-page"*/ './OrganizationApiKeysPage').then(module => ({
+  import(/* webpackChunkName: "op-api-keys-page"*/ './OrganizationAPIKeysPage').then(module => ({
     default: module.OrganizationAPIKeysPage,
   })),
 );
@@ -43,10 +43,11 @@ export const OrganizationProfileRoutes = () => {
     isMembersPageRoot,
     isGeneralPageRoot,
     isBillingPageRoot,
-    isApiKeysPageRoot,
+    isAPIKeysPageRoot,
     shouldShowBilling,
     apiKeysProps,
   } = useOrganizationProfileContext();
+
   const { apiKeysSettings, commerceSettings } = useEnvironment();
 
   const customPageRoutesWithContents = pages.contents?.map((customPage, index) => {
@@ -130,7 +131,7 @@ export const OrganizationProfileRoutes = () => {
               has({ permission: 'org:sys_api_keys:read' }) || has({ permission: 'org:sys_api_keys:manage' })
             }
           >
-            <Route path={isApiKeysPageRoot ? undefined : 'organization-api-keys'}>
+            <Route path={isAPIKeysPageRoot ? undefined : 'organization-api-keys'}>
               <Switch>
                 <Route index>
                   <Suspense fallback={''}>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/APIKeysPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/APIKeysPage.tsx
@@ -5,7 +5,7 @@ import { Col, descriptors, localizationKeys } from '@/ui/customizables';
 import { Header } from '@/ui/elements/Header';
 import { useUnsafeNavbarContext } from '@/ui/elements/Navbar';
 
-import { APIKeysPage as APIKeysPageInternal } from '../ApiKeys/ApiKeys';
+import { APIKeysPage as APIKeysPageInternal } from '../APIKeys/APIKeys';
 
 export const APIKeysPage = () => {
   const { user } = useUser();
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
@@ -14,7 +14,7 @@ const BillingPage = lazy(() =>
 );
 
 const APIKeysPage = lazy(() =>
-  import(/* webpackChunkName: "up-api-keys-page"*/ './ApiKeysPage').then(module => ({
+  import(/* webpackChunkName: "up-api-keys-page"*/ './APIKeysPage').then(module => ({
     default: module.APIKeysPage,
   })),
 );
diff --git a/packages/clerk-js/src/ui/contexts/components/APIKeys.ts b/packages/clerk-js/src/ui/contexts/components/APIKeys.ts
diff --git a/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts b/packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts
@@ -24,7 +24,7 @@ export type OrganizationProfileContextType = OrganizationProfileCtx & {
   isMembersPageRoot: boolean;
   isGeneralPageRoot: boolean;
   isBillingPageRoot: boolean;
-  isApiKeysPageRoot: boolean;
+  isAPIKeysPageRoot: boolean;
   shouldShowBilling: boolean;
 };
 
@@ -67,7 +67,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
   const isMembersPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.MEMBERS;
   const isGeneralPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.GENERAL;
   const isBillingPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING;
-  const isApiKeysPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS;
+  const isAPIKeysPageRoot = pages.routes[0].id === ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.API_KEYS;
   const navigateToGeneralPageRoot = () =>
     navigate(isGeneralPageRoot ? '../' : isMembersPageRoot ? './organization-general' : '../organization-general');
 
@@ -80,7 +80,7 @@ export const useOrganizationProfileContext = (): OrganizationProfileContextType
     isMembersPageRoot,
     isGeneralPageRoot,
     isBillingPageRoot,
-    isApiKeysPageRoot,
+    isAPIKeysPageRoot,
     shouldShowBilling,
   };
 };
diff --git a/packages/clerk-js/src/ui/contexts/components/index.ts b/packages/clerk-js/src/ui/contexts/components/index.ts
@@ -1,4 +1,4 @@
-export * from './ApiKeys';
+export * from './APIKeys';
 export * from './Checkout';
 export * from './CreateOrganization';
 export * from './GoogleOneTap';
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -25,7 +25,7 @@ const componentImportPaths = {
     import(/* webpackChunkName: "taskChooseOrganization" */ '../components/SessionTasks/tasks/TaskChooseOrganization'),
   PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans/PlanDetails'),
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
-  APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),
+  APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
 } as const;
 
diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx
@@ -628,8 +628,8 @@ export const APIKeys = withClerk(
         {clerk.loaded && (
           <ClerkHostRenderer
             component={component}
-            mount={clerk.mountApiKeys}
-            unmount={clerk.unmountApiKeys}
+            mount={clerk.mountAPIKeys}
+            unmount={clerk.unmountAPIKeys}
             updateProps={(clerk as any).__unstable__updateProps}
             props={props}
             rootProps={rendererRootProps}
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
@@ -143,7 +143,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountMethodCalls = new Map<MethodName<BrowserClerk>, MethodCallback>();
   private premountWaitlistNodes = new Map<HTMLDivElement, WaitlistProps | undefined>();
   private premountPricingTableNodes = new Map<HTMLDivElement, PricingTableProps | undefined>();
-  private premountApiKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();
+  private premountAPIKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();
   private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
 
@@ -656,8 +656,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.mountPricingTable(node, props);
     });
 
-    this.premountApiKeysNodes.forEach((props, node) => {
-      clerkjs.mountApiKeys(node, props);
+    this.premountAPIKeysNodes.forEach((props, node) => {
+      clerkjs.mountAPIKeys(node, props);
     });
 
     this.premountOAuthConsentNodes.forEach((props, node) => {
@@ -1146,19 +1146,19 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps): void => {
+  mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.mountApiKeys(node, props);
+      this.clerkjs.mountAPIKeys(node, props);
     } else {
-      this.premountApiKeysNodes.set(node, props);
+      this.premountAPIKeysNodes.set(node, props);
     }
   };
 
-  unmountApiKeys = (node: HTMLDivElement): void => {
+  unmountAPIKeys = (node: HTMLDivElement): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.unmountApiKeys(node);
+      this.clerkjs.unmountAPIKeys(node);
     } else {
-      this.premountApiKeysNodes.delete(node);
+      this.premountAPIKeysNodes.delete(node);
     }
   };
 
diff --git a/packages/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts
@@ -1,5 +1,5 @@
 export { assertContextExists, createContextAndHook } from './createContextAndHook';
-export { useApiKeys as __experimental_useAPIKeys } from './useAPIKeys';
+export { useAPIKeys as __experimental_useAPIKeys } from './useAPIKeys';
 export { useOrganization } from './useOrganization';
 export { useOrganizationList } from './useOrganizationList';
 export { useSafeLayoutEffect } from './useSafeLayoutEffect';
diff --git a/packages/shared/src/react/hooks/useAPIKeys.ts b/packages/shared/src/react/hooks/useAPIKeys.ts
@@ -9,7 +9,7 @@ import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 /**
  * @interface
  */
-export type UseApiKeysParams = PaginatedHookConfig<
+export type UseAPIKeysParams = PaginatedHookConfig<
   GetAPIKeysParams & {
     /**
      * If `true`, a request will be triggered when the hook is mounted.
@@ -23,19 +23,19 @@ export type UseApiKeysParams = PaginatedHookConfig<
 /**
  * @interface
  */
-export type UseApiKeysReturn<T extends UseApiKeysParams> = PaginatedResources<
+export type UseAPIKeysReturn<T extends UseAPIKeysParams> = PaginatedResources<
   APIKeyResource,
   T extends { infinite: true } ? true : false
 >;
 
 /**
- * The `useApiKeys()` hook provides access to paginated API keys for the current user or organization.
+ * The `useAPIKeys()` hook provides access to paginated API keys for the current user or organization.
  *
  * @example
  * ### Basic usage with default pagination
  *
  * ```tsx
- * const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useApiKeys({
+ * const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useAPIKeys({
  *   subject: 'user_123',
  *   pageSize: 10,
  *   initialPage: 1,
@@ -49,7 +49,7 @@ export type UseApiKeysReturn<T extends UseApiKeysParams> = PaginatedResources<
  * const [searchValue, setSearchValue] = useState('');
  * const debouncedSearch = useDebounce(searchValue, 500);
  *
- * const { data, isLoading } = useApiKeys({
+ * const { data, isLoading } = useAPIKeys({
  *   subject: 'user_123',
  *   query: debouncedSearch.trim(),
  *   pageSize: 10,
@@ -60,14 +60,14 @@ export type UseApiKeysReturn<T extends UseApiKeysParams> = PaginatedResources<
  * ### Infinite scroll
  *
  * ```tsx
- * const { data, isLoading, fetchNext, hasNextPage } = useApiKeys({
+ * const { data, isLoading, fetchNext, hasNextPage } = useAPIKeys({
  *   subject: 'user_123',
  *   infinite: true,
  * });
  * ```
  */
-export function useApiKeys<T extends UseApiKeysParams>(params?: T): UseApiKeysReturn<T> {
-  useAssertWrappedByClerkProvider('useApiKeys');
+export function useAPIKeys<T extends UseAPIKeysParams>(params?: T): UseAPIKeysReturn<T> {
+  useAssertWrappedByClerkProvider('useAPIKeys');
 
   const safeValues = useWithSafeValues(params, {
     initialPage: 1,
@@ -77,11 +77,11 @@ export function useApiKeys<T extends UseApiKeysParams>(params?: T): UseApiKeysRe
     subject: '',
     query: '',
     enabled: true,
-  } as UseApiKeysParams);
+  } as UseAPIKeysParams);
 
   const clerk = useClerkInstanceContext();
 
-  clerk.telemetry?.record(eventMethodCalled('useApiKeys'));
+  clerk.telemetry?.record(eventMethodCalled('useAPIKeys'));
 
   const hookParams: GetAPIKeysParams = {
     initialPage: safeValues.initialPage,
@@ -104,5 +104,5 @@ export function useApiKeys<T extends UseApiKeysParams>(params?: T): UseApiKeysRe
       type: 'apiKeys',
       subject: safeValues.subject || '',
     },
-  ) as UseApiKeysReturn<T>;
+  ) as UseAPIKeysReturn<T>;
 }
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
@@ -583,7 +583,7 @@ export interface Clerk {
    * @param targetNode - Target to mount the APIKeys component.
    * @param props - Configuration parameters.
    */
-  mountApiKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void;
+  mountAPIKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void;
 
   /**
    * This API is in early access and may change in future releases.
@@ -595,7 +595,7 @@ export interface Clerk {
    *
    * @param targetNode - Target node to unmount the ApiKeys component from.
    */
-  unmountApiKeys: (targetNode: HTMLDivElement) => void;
+  unmountAPIKeys: (targetNode: HTMLDivElement) => void;
 
   /**
    * Mounts a OAuth consent component at the target element.
