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

Merged
wobsoriano merged 136 commits into
mainfrom
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged

feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom
rob/robo-20-manage-api-keys

Conversation

@wobsoriano

@wobsorianowobsoriano commented May 6, 2025•
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

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

changeset-botBot commented May 6, 2025•
edited
Loading

Copy link
Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch

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

vercelBot commented May 6, 2025•
edited
Loading

Copy link
Copy Markdown

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

NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm

@panteliselef

panteliselef commented May 6, 2025

Copy link
Copy Markdown
Contributor

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

@wobsoriano

wobsoriano commented May 6, 2025•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

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

@wobsorianowobsoriano reopened this May 7, 2025
@clerk-cookie

clerk-cookie commented Jun 12, 2025

Copy link
Copy Markdown
Collaborator

Hey @wobsoriano - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact

@clerk/astro

npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact

@clerk/backend

npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact

@clerk/elements

npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact

@clerk/express

npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact

@clerk/remix

npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact

@clerk/shared

npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact

@clerk/testing

npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact

@clerk/types

npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact

@clerk/vue

npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact

octoper
octoper reviewed Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
node,
props,
}),
);

@octoperoctoperJun 12, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?
Example:

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

Line 758 in 48be55b

this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));

@wobsorianowobsorianoJun 12, 2025

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added

octoper
octoper reviewed Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
this.updatedAt = unixEpochToDate(data.updated_at);
this.createdAt = unixEpochToDate(data.created_at);
return this;
}

@octoperoctoperJun 12, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?

@wobsorianowobsorianoJun 12, 2025

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!

coderabbitai[bot]
coderabbitaiBot reviewed Jun 12, 2025
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)

25-30: Constructor should accept optional/partial data

constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.

- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.

📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)

Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef reviewed Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
enabled: boolean;

@panteliselefpanteliselefJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?

@wobsorianowobsorianoJun 13, 2025

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod

Comment threadpackages/types/src/elementIds.ts Outdated
Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx
Comment on lines +133 to +150
<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'

@panteliselefpanteliselefJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here

Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
variant='caption'
colorScheme='secondary'
>
Created at{' '}

@panteliselefpanteliselefJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization

Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
colorScheme='secondary'
>
Created at{' '}
{apiKey.createdAt.toLocaleDateString(undefined, {

@panteliselefpanteliselefJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.

Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
const { user } = useUser();
const { organization } = useOrganization();

const subject = organization?.id ?? user?.id ?? '';

@panteliselefpanteliselefJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@wobsorianowobsorianoJun 13, 2025•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@panteliselefpanteliselefJun 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@wobsorianowobsorianoJun 13, 2025•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

panteliselef
panteliselef approved these changes Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts Outdated
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts Outdated
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts Outdated
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts Outdated
@clerk-cookieclerk-cookie mentioned this pull request Jun 13, 2025
Merged
@wobsorianowobsoriano mentioned this pull request Jun 13, 2025
Merged
9 tasks
This was referenced Jun 19, 2025
Merged
Closed
This was referenced Jun 27, 2025
Merged
Merged
This was referenced Nov 7, 2025
Merged
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox
+3 more reviewers
@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component - #5858
Merged
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Jun 13, 2025
Merged
feat(clerk-js,clerk-react,nextjs): Introduce <APIKeys /> AIO component#5858
wobsoriano merged 136 commits into
mainfrom 
rob/robo-20-manage-api-keys
Conversation
@wobsoriano
@wobsorianowobsoriano
commented
May 6, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
  •  🐛 Bug fix
  •  🌟 New feature
  •  🔨 Breaking change
  •  📖 Refactoring / dependency upgrade / documentation
  •  other:
Summary by CodeRabbit
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
changeset-botBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/localizationsPatch
@clerk/typesPatch
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/clerk-reactMinor
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/elementsPatch
@clerk/expo-passkeysPatch
@clerk/clerk-expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/remixPatch
@clerk/sharedPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/themesPatch
@clerk/vuePatch
@clerk/chrome-extensionPatch
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
vercelBot
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
clerk-js-sandbox✅ Ready (Inspect)Visit Preview💬 Add feedbackJun 13, 2025 8:18pm
@panteliselef
panteliselef
commented
May 6, 2025

Copy link


Copy Markdown

Contributor
Are we launching with this immediately? Are we doing any private or public betas ?
@wobsoriano
wobsoriano
commented
May 6, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
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
@wobsorianowobsoriano
reopened this
May 7, 2025
@clerk-cookie
clerk-cookie
commented
Jun 12, 2025

Copy link


Copy Markdown

Collaborator
Hey @wobsoriano - the snapshot version command generated the following package versions:
PackageVersion
@clerk/agent-toolkit0.1.1-snapshot.v20250612040145
@clerk/astro2.9.1-snapshot.v20250612040145
@clerk/backend2.1.0-snapshot.v20250612040145
@clerk/chrome-extension2.4.12-snapshot.v20250612040145
@clerk/clerk-js5.69.0-snapshot.v20250612040145
@clerk/elements0.23.33-snapshot.v20250612040145
@clerk/clerk-expo2.13.1-snapshot.v20250612040145
@clerk/expo-passkeys0.3.10-snapshot.v20250612040145
@clerk/express1.7.0-snapshot.v20250612040145
@clerk/fastify2.4.0-snapshot.v20250612040145
@clerk/localizations3.16.5-snapshot.v20250612040145
@clerk/nextjs6.22.0-snapshot.v20250612040145
@clerk/nuxt1.7.1-snapshot.v20250612040145
@clerk/clerk-react5.32.0-snapshot.v20250612040145
@clerk/react-router1.6.0-snapshot.v20250612040145
@clerk/remix4.8.1-snapshot.v20250612040145
@clerk/shared3.9.7-snapshot.v20250612040145
@clerk/tanstack-react-start0.17.0-snapshot.v20250612040145
@clerk/testing1.8.1-snapshot.v20250612040145
@clerk/themes2.2.50-snapshot.v20250612040145
@clerk/types4.60.1-snapshot.v20250612040145
@clerk/vue1.8.8-snapshot.v20250612040145
Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit
npm i @clerk/agent-toolkit@0.1.1-snapshot.v20250612040145 --save-exact
@clerk/astro
npm i @clerk/astro@2.9.1-snapshot.v20250612040145 --save-exact
@clerk/backend
npm i @clerk/backend@2.1.0-snapshot.v20250612040145 --save-exact
@clerk/chrome-extension
npm i @clerk/chrome-extension@2.4.12-snapshot.v20250612040145 --save-exact
@clerk/clerk-js
npm i @clerk/clerk-js@5.69.0-snapshot.v20250612040145 --save-exact
@clerk/elements
npm i @clerk/elements@0.23.33-snapshot.v20250612040145 --save-exact
@clerk/clerk-expo
npm i @clerk/clerk-expo@2.13.1-snapshot.v20250612040145 --save-exact
@clerk/expo-passkeys
npm i @clerk/expo-passkeys@0.3.10-snapshot.v20250612040145 --save-exact
@clerk/express
npm i @clerk/express@1.7.0-snapshot.v20250612040145 --save-exact
@clerk/fastify
npm i @clerk/fastify@2.4.0-snapshot.v20250612040145 --save-exact
@clerk/localizations
npm i @clerk/localizations@3.16.5-snapshot.v20250612040145 --save-exact
@clerk/nextjs
npm i @clerk/nextjs@6.22.0-snapshot.v20250612040145 --save-exact
@clerk/nuxt
npm i @clerk/nuxt@1.7.1-snapshot.v20250612040145 --save-exact
@clerk/clerk-react
npm i @clerk/clerk-react@5.32.0-snapshot.v20250612040145 --save-exact
@clerk/react-router
npm i @clerk/react-router@1.6.0-snapshot.v20250612040145 --save-exact
@clerk/remix
npm i @clerk/remix@4.8.1-snapshot.v20250612040145 --save-exact
@clerk/shared
npm i @clerk/shared@3.9.7-snapshot.v20250612040145 --save-exact
@clerk/tanstack-react-start
npm i @clerk/tanstack-react-start@0.17.0-snapshot.v20250612040145 --save-exact
@clerk/testing
npm i @clerk/testing@1.8.1-snapshot.v20250612040145 --save-exact
@clerk/themes
npm i @clerk/themes@2.2.50-snapshot.v20250612040145 --save-exact
@clerk/types
npm i @clerk/types@4.60.1-snapshot.v20250612040145 --save-exact
@clerk/vue
npm i @clerk/vue@1.8.8-snapshot.v20250612040145 --save-exact
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/clerk.ts
 node,
 props,
 }),
 );
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a telemetry record here?

Example: 
javascript/packages/clerk-js/src/core/clerk.ts

Line 758
in
48be55b
this.telemetry?.record(eventPrebuiltComponentMounted(`SignIn`,props,additionalData));
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I missed this, thanks! added
octoper
octoper
reviewed
Jun 12, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
 this.updatedAt = unixEpochToDate(data.updated_at);
 this.createdAt = unixEpochToDate(data.created_at);
 return this;
 }
@octoperoctoperJun 12, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ This seems to be missing the __internal_toSnapshot should we add it?
@wobsorianowobsorianoJun 12, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it, added!
coderabbitai[bot]
coderabbitaiBot
reviewed
Jun 12, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/clerk-js/src/core/resources/APIKey.ts (1)
25-30: Constructor should accept optional/partial data
constructor(data: ApiKeyJSON) requires a fully-populated JSON payload, yet the very next call (fromJSON) gracefully handles null. Making the parameter optional (or accepting Partial<ApiKeyJSON>) eliminates the need for callers to manufacture dummy values when they only need an empty instance.
- constructor(data: ApiKeyJSON) {+ constructor(data?: ApiKeyJSON | null) {
super();
this.fromJSON(data);
}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 906c587 and d3380b1.
📒 Files selected for processing (3)
  • packages/clerk-js/src/core/clerk.ts (7 hunks)
  • packages/clerk-js/src/core/resources/APIKey.ts (1 hunks)
  • packages/types/src/json.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/types/src/json.ts
  • packages/clerk-js/src/core/clerk.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/clerk-js/src/core/resources/APIKey.ts (3)
packages/types/src/apiKeys.ts (1)
  • APIKeyResource (4-20)
packages/types/src/json.ts (1)
  • ApiKeyJSON (742-758)
packages/clerk-js/src/utils/date.ts (1)
  • unixEpochToDate (5-8)
⏰ Context from checks skipped due to timeout of 90000ms (24)
  • GitHub Check: Integration Tests (quickstart, chrome)
  • GitHub Check: Integration Tests (sessions, chrome)
  • GitHub Check: Integration Tests (vue, chrome)
  • GitHub Check: Integration Tests (billing, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 14)
  • GitHub Check: Integration Tests (expo-web, chrome)
  • GitHub Check: Integration Tests (nuxt, chrome)
  • GitHub Check: Integration Tests (tanstack-react-router, chrome)
  • GitHub Check: Integration Tests (nextjs, chrome, 13)
  • GitHub Check: Integration Tests (nextjs, chrome, 15)
  • GitHub Check: Integration Tests (tanstack-react-start, chrome)
  • GitHub Check: Integration Tests (react-router, chrome)
  • GitHub Check: Integration Tests (express, chrome)
  • GitHub Check: Integration Tests (astro, chrome)
  • GitHub Check: Integration Tests (elements, chrome)
  • GitHub Check: Integration Tests (ap-flows, chrome)
  • GitHub Check: Publish with pkg-pr-new
  • GitHub Check: Integration Tests (localhost, chrome)
  • GitHub Check: Integration Tests (generic, chrome)
  • GitHub Check: Unit Tests (22, **)
  • GitHub Check: Static analysis
  • GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: Analyze (javascript-typescript)
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
Comment threadpackages/clerk-js/src/core/resources/APIKey.ts
panteliselef
panteliselef
reviewed
Jun 13, 2025
View reviewed changes
Comment threadpackages/localizations/src/en-US.ts
Comment threadpackages/types/src/apiKeysSettings.ts
}

export interface APIKeysSettingsResource extends ClerkResource {
 enabled: boolean;
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not just for the beta period, right ?
@wobsorianowobsorianoJun 13, 2025

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is already in prod
Comment threadpackages/types/src/elementIds.ts
Outdated

Comment threadpackages/types/src/json.ts
Comment threadpackages/types/src/json.ts
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx

Comment on lines

+133
 to 
+150

 <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'
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Localization still missing here
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 variant='caption'
 colorScheme='secondary'
 >
 Created at{' '}
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto localization
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
 colorScheme='secondary'
 >
 Created at{' '}
 {apiKey.createdAt.toLocaleDateString(undefined, {
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use localization with our date modifiers.
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
Comment threadpackages/clerk-js/src/ui/components/ApiKeys/ApiKeys.tsx
 const { user } = useUser();
 const { organization } = useOrganization();

 const subject = organization?.id ?? user?.id ?? '';
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean from dashboard you can only turn on the feature for either orgs or users but not at the same time ?
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@panteliselefpanteliselefJun 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the developer be able to choose the subject when they mount <APIKeys /> like <APIKeys for="orgs" />
@wobsorianowobsorianoJun 13, 2025•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
panteliselef
panteliselef
approved these changes
Jun 13, 2025
View reviewed changes
Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

Comment threadpackages/clerk-js/src/ui/utils/timeAgo.ts
Outdated

@clerk-cookieclerk-cookie
mentioned this pull request
Jun 13, 2025
 Merged

@wobsorianowobsoriano
mentioned this pull request
Jun 13, 2025
 Merged

9 tasks

This was referenced Jun 19, 2025
 Merged

 Closed


This was referenced Jun 27, 2025
 Merged

 Merged


This was referenced Nov 7, 2025
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcarpenteralexcarpenteralexcarpenter left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@brkalowbrkalowAwaiting requested review from brkalow
@aelioxaelioxAwaiting requested review from aeliox

+3 more reviewers

@octoperoctoperoctoper left review comments
@LekoArtsLekoArtsLekoArts left review comments
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

chrome-extensionclerk-jslocalizationsnextjsreactreact-routerremixtanstacktypes

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

8 participants

@wobsoriano@panteliselef@clerk-cookie@Rutledge@alexcarpenter@octoper@LekoArts@brkalow