feat(clerk-js): Introduce development modal to enable organizations #7159

LauraBeatris · 2025-11-05T17:56:51Z

Description

This PR allows developers to enable the organization's featureset in-app instead of having to go to the Clerk Dashboard, decreasing friction to build B2B apps.

The prompt only appears for development instances only.

CleanShot.2025-11-10.at.13.25.44.mp4

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

changeset-bot · 2025-11-05T17:56:56Z

⚠️ No Changeset found

Latest commit: 56a47e3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

vercel · 2025-11-05T17:56:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Nov 11, 2025 7:34pm

coderabbitai · 2025-11-05T17:57:07Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch laura/enable-orgs

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Revert pnpm-lock.yaml changes

LauraBeatris · 2025-11-10T16:28:49Z

packages/clerk-js/src/ui/Components.tsx

+      if (name === 'enableOrganizationsPrompt') {
+        setState(prev => {
+          // Modal is already open, don't update state
+          if (prev.enableOrganizationsPromptModal) {


This is to handle the cases where multiple AIOs/hooks are executed at the same time on a single page.

Showing only one prompt is enough, I don't see that much value in listing all, eg: "You're using useOrganization, OrganizationSwitcher..."

As soon as the environment settings gets patched, then all would be rendered as usual

LauraBeatris · 2025-11-10T16:30:04Z

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

+                ${mainCTAStyles};
+                min-width: 100%;
+                color: white;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+                box-shadow:
+                  0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                  0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                  0px 0px 0px 1px rgba(0, 0, 0, 0.12),
+                  0px 1.5px 2px 0px rgba(0, 0, 0, 0.48),
+                  0px 0px 4px 0px rgba(243, 107, 22, 0) inset;
+
+                &:hover {
+                  box-shadow:
+                    0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
+                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);


I've noticed that for the Keyless Prompt, there's a lot of raw CSS and it might be due to not being part of public components, therefore we don't leverage our design system variables.

That's my assumption, but I want to confirm if that's indeed the case.

LauraBeatris · 2025-11-10T16:31:00Z

packages/clerk-js/src/ui/components/devPrompts/shared.tsx

@@ -0,0 +1,61 @@
+import { css } from '@emotion/react';


I've created a shared folder for dev prompts or "in-app" UI, the idea is to keep those sort of components isolated from the public ones.

If the naming doesn't make sense, I'd appreciate feedback on other suggestions.

LauraBeatris · 2025-11-10T16:31:33Z

packages/clerk-js/src/ui/components/devPrompts/shared.tsx

+ * A container for prompt components
+ * @internal
+ */
+export function PromptContainer({ children, sx, ...props }: React.ComponentProps<typeof Flex>) {


Our design for the enable org prompt aims to reuse a bit of the UI from the keyless prompt, especially the container, so I thought would be wise to extract it as shared component.

packages/clerk-js/src/ui/components/devPrompts/shared.tsx

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

alexcarpenter · 2025-11-10T20:37:29Z

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

+                  color: #b4b4b4;
+                  font-size: 0.8125rem;
+                  font-weight: 400;
+                  line-height: 1rem;


Static line heights will cause some issues, lets rely on unitless values for line-height

alexcarpenter · 2025-11-10T20:39:57Z

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

+  justify-content: center;
+  width: 100%;
+  height: 1.75rem;
+  max-width: 14.625rem;


Is this max-width needed?

alexcarpenter · 2025-11-10T20:40:35Z

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

+                    0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
+                    0px 0px 0px 1px rgba(0, 0, 0, 0.1),
+                    0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
+                }


Same here, would be good to have hover+focus-visible styles accounted for.

alexcarpenter · 2025-11-10T20:41:05Z

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

+                width='20'
+                height='20'


Lets remove the width+height attributes and use CSS to size to ensure it scales properly.

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

LauraBeatris · 2025-11-11T02:30:02Z

I'll also add some telemetry so we can track the amount of times this prompt gets triggered once released

panteliselef · 2025-11-11T14:16:41Z

packages/shared/src/organization.ts

+export const withOrganizationSettingsEnabled =
+  <TParams extends any[], TReturn>(
+    hook: (...args: TParams) => TReturn,
+    getLoadedClerk: () => LoadedClerk | null | undefined,
+    utilityName?: __internal_EnableOrganizationsPromptProps['utilityName'],
+  ) =>
+  (...args: TParams): TReturn => {
+    const clerk = getLoadedClerk();
+    // @ts-expect-error - __unstable__environment is not typed
+    const environment = clerk?.__unstable__environment;
+
+    if (!environment?.organizationSettings.enabled) {
+      clerk?.__internal_openEnableOrganizationsPrompt({
+        utilityName,
+      });
+    }
+
+    return hook(...args);
+  };


Using an HoC for hooks seems like an anti-patern. I'd simply do

function useOrganization(){ useAutoEnablement() return useOrganizationOriginal() }

I thought of the HOC in order to be a pure function that could be reused for the hooks from other packages, not React only, so we can receive the Clerk instance as an argument.

panteliselef · 2025-11-11T14:17:01Z

packages/shared/src/organization.ts

+    // @ts-expect-error - __unstable__environment is not typed
+    const environment = clerk?.__unstable__environment;
+
+    if (!environment?.organizationSettings.enabled) {


Probably we want this to only run in dev instances.

pkg-pr-new · 2025-11-11T17:41:44Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7159

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7159

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7159

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7159

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7159

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7159

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7159

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7159

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7159

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7159

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7159

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7159

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7159

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7159

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7159

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7159

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7159

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7159

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7159

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7159

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7159

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7159

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7159

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7159

commit: b99a632

LauraBeatris self-assigned this Nov 5, 2025

clerk-cookie added clerk-js react vue labels Nov 5, 2025

vercel bot deployed to Preview November 5, 2025 17:57 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from 2014336 to c9c9e99 Compare November 5, 2025 18:00

vercel bot deployed to Preview November 5, 2025 18:01 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from c9c9e99 to b8fb3db Compare November 5, 2025 18:01

vercel bot deployed to Preview November 5, 2025 18:02 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from b8fb3db to 06a951f Compare November 5, 2025 18:04

clerk-cookie added the playground label Nov 5, 2025

LauraBeatris force-pushed the laura/enable-orgs branch from 06a951f to c990467 Compare November 5, 2025 18:05

vercel bot deployed to Preview November 5, 2025 18:06 View deployment

LauraBeatris requested a review from iagodahlem November 5, 2025 19:12

LauraBeatris force-pushed the laura/enable-orgs branch from c990467 to 9ade3ae Compare November 7, 2025 00:42

vercel bot deployed to Preview November 7, 2025 00:43 View deployment

vercel bot deployed to Preview November 7, 2025 19:24 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from 8953897 to a3f9bed Compare November 7, 2025 19:37

vercel bot deployed to Preview November 7, 2025 19:38 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from a3f9bed to c145bf9 Compare November 7, 2025 19:38

vercel bot deployed to Preview November 7, 2025 19:39 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from c145bf9 to b456c24 Compare November 7, 2025 19:40

vercel bot deployed to Preview November 7, 2025 19:41 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from b456c24 to 81ce300 Compare November 7, 2025 19:52

vercel bot deployed to Preview November 7, 2025 19:53 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from 81ce300 to b2b3ad4 Compare November 10, 2025 15:29

vercel bot deployed to Preview November 10, 2025 15:30 View deployment

vercel bot had a problem deploying to Preview November 10, 2025 15:47 Failure

clerk-cookie removed the playground label Nov 10, 2025

LauraBeatris force-pushed the laura/enable-orgs branch from c7f3ee5 to a9936d0 Compare November 10, 2025 15:49

vercel bot deployed to Preview November 10, 2025 15:51 View deployment

LauraBeatris force-pushed the laura/enable-orgs branch from a9936d0 to 552ef65 Compare November 10, 2025 15:52

vercel bot deployed to Preview November 10, 2025 15:53 View deployment

Revert pnpm-lock.yaml changes

8036996

Revert pnpm-lock.yaml changes

LauraBeatris force-pushed the laura/enable-orgs branch from 552ef65 to 8036996 Compare November 10, 2025 16:23

vercel bot deployed to Preview November 10, 2025 16:24 View deployment

LauraBeatris added the do not merge label Nov 10, 2025

LauraBeatris commented Nov 10, 2025

View reviewed changes

LauraBeatris marked this pull request as ready for review November 10, 2025 16:31

LauraBeatris requested review from alexcarpenter and panteliselef November 10, 2025 16:34

alexcarpenter reviewed Nov 10, 2025

View reviewed changes

panteliselef reviewed Nov 11, 2025

View reviewed changes

Update PromptContainer to exclude keyless styles

84de1f0

vercel bot deployed to Preview November 11, 2025 17:38 View deployment

Fix line height and use monospace font

be32441

vercel bot deployed to Preview November 11, 2025 17:50 View deployment

Introduce mutation to enable organization settings

b99a632

vercel bot deployed to Preview November 11, 2025 19:13 View deployment

Mount components once mutation is resolved

56a47e3

vercel bot deployed to Preview November 11, 2025 19:34 View deployment

feat(clerk-js): Introduce development modal to enable organizations #7159

Are you sure you want to change the base?

feat(clerk-js): Introduce development modal to enable organizations #7159

Conversation

LauraBeatris commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcarpenter Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

LauraBeatris commented Nov 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

LauraBeatris commented Nov 5, 2025 •

edited

Loading

changeset-bot bot commented Nov 5, 2025 •

edited

Loading

vercel bot commented Nov 5, 2025 •

edited

Loading

coderabbitai bot commented Nov 5, 2025 •

edited

Loading

alexcarpenter Nov 10, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 11, 2025 •

edited

Loading