feat(clerk-js,clerk-react,nextjs): Introduce `<APIKeys />` AIO component #5858

wobsoriano · 2025-05-06T15:57:35Z

Description

Introduce <APIKeys /> AIO component (early access)
Introduce Clerk.apiKeys module, which contains methods to create, revoke and get api key secrets.
Adds a new API Keys page in the <UserProfile /> and <OrganizationProfile /> components.

Note:

We are not yet doing GA, only for early access partners
Test to follow in a separate PR
Element descriptors in a separate PR

Resolves ROBO-20

Screen.Recording.2025-06-09.at.7.00.12.PM.mov

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

New Features
- Introduced early-access "API Keys" management UI for user and organization profiles with creation, viewing, copying, searching, pagination, and revocation capabilities.
- Added dedicated navigation routes and pages for API key management in user and organization profiles.
- Included confirmation modals for API key revocation.
- Added localization support for API key management UI in English and German.
- Introduced React components and hooks for API key listing, creation, revocation, and secret display.
- Added Clerk SDK support for mounting/unmounting API Keys UI component and API key operations.
Enhancements
- Improved theming and appearance customization for the API Keys component.
- Updated navigation components and context providers to support new API Keys routes and modal integrations.
- Added portal root support for modals and popovers to improve UI rendering flexibility.
- Enhanced navbar context to pass content references for modal anchoring.
- Added new icons for API Keys UI.
Documentation
- Extended type definitions, component props, and localization resources to support API Keys features.
- Added experimental API Keys types and namespace to SDK typings.
Tests
- Added tests covering API key settings initialization and serialization in environment resources.

changeset-bot · 2025-05-06T15:57:39Z

🦋 Changeset detected

Latest commit: b1e175c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@clerk/localizations	Patch
@clerk/types	Patch
@clerk/clerk-js	Minor
@clerk/nextjs	Minor
@clerk/clerk-react	Minor
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/vue	Patch
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T15:57:39Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2025 8:18pm

panteliselef · 2025-05-06T18:17:27Z

Are we launching with this immediately? Are we doing any private or public betas ?

wobsoriano · 2025-05-06T18:54:35Z

Are we launching with this immediately? Are we doing any private or public betas ?

We have an early access program for machine auth currently and I think we'll just be using this PR for snapshots for now

packages/localizations/src/en-US.ts

panteliselef · 2025-06-13T15:25:11Z

packages/types/src/apiKeysSettings.ts

+}
+
+export interface APIKeysSettingsResource extends ClerkResource {
+  enabled: boolean;


This is not just for the beta period, right ?

Yes, this is already in prod

packages/types/src/elementIds.ts

packages/types/src/json.ts

panteliselef · 2025-06-13T15:45:01Z

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

+                  <SegmentedControl.Button
+                    value='never'
+                    text='Never'
+                  />
+                  <SegmentedControl.Button
+                    value='30d'
+                    text='30 days'
+                  />
+                  <SegmentedControl.Button
+                    value='90d'
+                    text='90 days'
+                  />
+                  <SegmentedControl.Button
+                    value='custom'
+                    text='Custom'


Localization still missing here

panteliselef · 2025-06-13T15:46:41Z

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

+                      variant='caption'
+                      colorScheme='secondary'
+                    >
+                      Created at{' '}


ditto localization

panteliselef · 2025-06-13T15:47:01Z

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

+                      colorScheme='secondary'
+                    >
+                      Created at{' '}
+                      {apiKey.createdAt.toLocaleDateString(undefined, {


you can use localization with our date modifiers.

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

panteliselef · 2025-06-13T15:52:51Z

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

+  const { user } = useUser();
+  const { organization } = useOrganization();
+
+  const subject = organization?.id ?? user?.id ?? '';


Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?

Okay, this is for the standalone <APIKeys /> component. If an org is active, we use that instead of the current user. For UserProfile page, we use the user id and vice versa.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />

Originally we allowed it, but Bryce pointed out that all of our components defaults to org or user session and does not accept a custom prop and we'd want to keep the behavior here

Co-authored-by: panteliselef <[email protected]>

packages/clerk-js/src/ui/utils/timeAgo.ts

Co-authored-by: panteliselef <[email protected]>

clerk-cookie added types clerk-js labels May 6, 2025

wobsoriano closed this May 6, 2025

wobsoriano reopened this May 7, 2025

clerk-cookie added nextjs react remix backend fastify localizations expo chrome-extension themes integration elements express testing tanstack astro react-router nuxt vue agent-toolkit labels May 7, 2025

vercel bot deployed to Preview June 12, 2025 16:24 View deployment

chore: bring back early access message

1244f0a

vercel bot deployed to Preview June 12, 2025 20:22 View deployment

chore: adjust bundlewatch config

3eae712

vercel bot deployed to Preview June 12, 2025 20:34 View deployment

panteliselef reviewed Jun 13, 2025

View reviewed changes

Apply suggestions from code review

6ca472d

Co-authored-by: panteliselef <[email protected]>

wobsoriano requested a review from aeliox as a code owner June 13, 2025 16:15

vercel bot deployed to Preview June 13, 2025 16:17 View deployment

chore: address suggestions

c075164

vercel bot deployed to Preview June 13, 2025 16:29 View deployment

chore: adjust bundlewatch config

9d8462f

vercel bot deployed to Preview June 13, 2025 16:40 View deployment

chore: address top level date locale

10da0b5

vercel bot deployed to Preview June 13, 2025 16:50 View deployment

panteliselef approved these changes Jun 13, 2025

View reviewed changes

Apply suggestions from code review

a0edca2

Co-authored-by: panteliselef <[email protected]>

vercel bot deployed to Preview June 13, 2025 19:46 View deployment

Merge branch 'main' into rob/robo-20-manage-api-keys

a1b2821

vercel bot deployed to Preview June 13, 2025 19:53 View deployment

chore: adjust bundlewatch config

ab7f878

vercel bot deployed to Preview June 13, 2025 20:10 View deployment

chore: adjust bundlewatch config

b1e175c

vercel bot deployed to Preview June 13, 2025 20:18 View deployment

wobsoriano enabled auto-merge (squash) June 13, 2025 20:31

wobsoriano merged commit 18bcb64 into main Jun 13, 2025
85 of 87 checks passed

wobsoriano deleted the rob/robo-20-manage-api-keys branch June 13, 2025 20:38

clerk-cookie mentioned this pull request Jun 13, 2025

ci(repo): Version packages #6077

Merged

wobsoriano mentioned this pull request Jun 13, 2025

fix(localizations): Use correct date params in API key dates #6121

Merged

9 tasks

coderabbitai bot mentioned this pull request Jun 19, 2025

chore(clerk-js,types,localizations): API keys form refactor #6153

Open

9 tasks

feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component #5858

feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component #5858

Uh oh!

Conversation

wobsoriano commented May 6, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

panteliselef commented May 6, 2025

Uh oh!

wobsoriano commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

panteliselef Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

wobsoriano Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

panteliselef Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselef Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselef Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

panteliselef Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

wobsoriano Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef Jun 13, 2025

Choose a reason for hiding this comment

Uh oh!

wobsoriano Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(clerk-js,clerk-react,nextjs): Introduce `<APIKeys />` AIO component #5858

feat(clerk-js,clerk-react,nextjs): Introduce `<APIKeys />` AIO component #5858

wobsoriano commented May 6, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented May 6, 2025 •

edited

Loading

vercel bot commented May 6, 2025 •

edited

Loading

wobsoriano commented May 6, 2025 •

edited

Loading

wobsoriano Jun 13, 2025 •

edited

Loading

wobsoriano Jun 13, 2025 •

edited

Loading