diff --git a/.changeset/brown-bags-fold.md b/.changeset/brown-bags-fold.md new file mode 100644 index 00000000000..eabccf6c9b7 --- /dev/null +++ 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 index 6132a5f5025..52ae6a4f4d9 100644 --- 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 index b59a646623a..a56d6cda687 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1230,7 +1230,7 @@ export class Clerk implements ClerkInterface { * @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: component is in early access and not yet recommended for production use.'); @@ -1282,7 +1282,7 @@ export class Clerk implements ClerkInterface { * * @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 similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/APIKeyModal.tsx rename to 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 similarity index 94% rename from packages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx rename to packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx index 69745647cec..0ab90e2cc05 100644 --- 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 similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/APIKeysTable.tsx rename to 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 similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/CopyAPIKeyModal.tsx rename to 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 similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/CreateAPIKeyForm.tsx rename to 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 similarity index 95% rename from packages/clerk-js/src/ui/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx rename to packages/clerk-js/src/ui/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx index 50768f3c1c3..a8aa6e1d6fb 100644 --- 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; @@ -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 similarity index 98% rename from packages/clerk-js/src/ui/components/ApiKeys/__tests__/ApiKeys.spec.tsx rename to packages/clerk-js/src/ui/components/APIKeys/__tests__/APIKeys.spec.tsx index 2f3dbce9082..b6e0a847c24 100644 --- 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 similarity index 100% rename from packages/clerk-js/src/ui/components/ApiKeys/utils.ts rename to 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 similarity index 95% rename from packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationApiKeysPage.tsx rename to packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationAPIKeysPage.tsx index b62a6f90fc3..aa661a2e38d 100644 --- 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 index 40600731fa3..f609259d947 100644 --- 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' }) } > - + diff --git a/packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/APIKeysPage.tsx similarity index 93% rename from packages/clerk-js/src/ui/components/UserProfile/ApiKeysPage.tsx rename to packages/clerk-js/src/ui/components/UserProfile/APIKeysPage.tsx index 630220d7750..98d64d2bcb0 100644 --- 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 index edce7308bed..cf9899370af 100644 --- 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 similarity index 100% rename from packages/clerk-js/src/ui/contexts/components/ApiKeys.ts rename to 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 index 26bdce3ec93..b1210adb29d 100644 --- 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 index 3afdda296bf..4242c494ad6 100644 --- 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 index 727627e16dc..3a5ecee7a9c 100644 --- 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 index 08f2268fa24..e1889849582 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -628,8 +628,8 @@ export const APIKeys = withClerk( {clerk.loaded && ( , MethodCallback>(); private premountWaitlistNodes = new Map(); private premountPricingTableNodes = new Map(); - private premountApiKeysNodes = new Map(); + private premountAPIKeysNodes = new Map(); private premountOAuthConsentNodes = new Map(); private premountTaskChooseOrganizationNodes = new Map(); @@ -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 index 0335631c3be..a3774cddeb3 100644 --- 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 index c090bdf2692..86a4ab39c6e 100644 --- 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 = PaginatedResources< +export type UseAPIKeysReturn = 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 = 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 = PaginatedResources< * ### Infinite scroll * * ```tsx - * const { data, isLoading, fetchNext, hasNextPage } = useApiKeys({ + * const { data, isLoading, fetchNext, hasNextPage } = useAPIKeys({ * subject: 'user_123', * infinite: true, * }); * ``` */ -export function useApiKeys(params?: T): UseApiKeysReturn { - useAssertWrappedByClerkProvider('useApiKeys'); +export function useAPIKeys(params?: T): UseAPIKeysReturn { + useAssertWrappedByClerkProvider('useAPIKeys'); const safeValues = useWithSafeValues(params, { initialPage: 1, @@ -77,11 +77,11 @@ export function useApiKeys(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(params?: T): UseApiKeysRe type: 'apiKeys', subject: safeValues.subject || '', }, - ) as UseApiKeysReturn; + ) as UseAPIKeysReturn; } diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts index a05f935fcfa..b37e7d0a8a8 100644 --- 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.