Implement organization creation permission controls (#1373)

* feat(clerk-js): Hide 'create organization' button in org switcher if no permissions

Author: jescalan

.changeset/fifty-eels-work.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+If user does not have permission to create an org, create org button will not display in the OrganizationSwitcher UI

packages/clerk-js/src/core/resources/User.ts

@@ -80,6 +80,7 @@ export class User extends BaseResource implements UserResource {
   publicMetadata: UserPublicMetadata = {};
   unsafeMetadata: UserUnsafeMetadata = {};
   lastSignInAt: Date | null = null;
+  createOrganizationEnabled = false;
   deleteSelfEnabled = false;
   updatedAt: Date | null = null;
   createdAt: Date | null = null;
@@ -320,6 +321,7 @@ export class User extends BaseResource implements UserResource {
     this.backupCodeEnabled = data.backup_code_enabled;
     this.twoFactorEnabled = data.two_factor_enabled;
 
+    this.createOrganizationEnabled = data.create_organization_enabled;
     this.deleteSelfEnabled = data.delete_self_enabled;
 
     if (data.last_sign_in_at) {

packages/clerk-js/src/core/resources/UserSettings.ts

@@ -1,6 +1,5 @@
 import type {
   Attributes,
-  Actions,
   OAuthProviders,
   OAuthStrategy,
   PasswordSettingsData,
@@ -17,6 +16,11 @@ import { BaseResource } from './internal';
 const defaultMaxPasswordLength = 72;
 const defaultMinPasswordLength = 8;
 
+export type Actions = {
+  create_organization: boolean;
+  delete_self: boolean;
+};
+
 /**
  * @internal
  */

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -84,7 +84,7 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
           </PreviewButton>
         ))}
       </Box>
-      {createOrganizationButton}
+      {user.createOrganizationEnabled && createOrganizationButton}
     </SecondaryActions>
   );
 };

packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -46,7 +46,7 @@ describe('OrganizationSwitcher', () => {
     it('opens the organization switcher popover when clicked', async () => {
       const { wrapper, props } = await createFixtures(f => {
         f.withOrganizations();
-        f.withUser({ email_addresses: ['test@clerk.dev'] });
+        f.withUser({ email_addresses: ['test@clerk.dev'], create_organization_enabled: true });
       });
       props.setProps({ hidePersonal: true });
       const { getByText, getByRole, userEvent } = render(<OrganizationSwitcher />, { wrapper });
@@ -107,6 +107,7 @@ describe('OrganizationSwitcher', () => {
         f.withUser({
           email_addresses: ['test@clerk.dev'],
           organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: true,
         });
       });
       props.setProps({ hidePersonal: true });
@@ -116,6 +117,20 @@ describe('OrganizationSwitcher', () => {
       expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
     });
 
+    it('does not display create organization button if permissions not present', async () => {
+      const { wrapper, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.dev'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: false,
+        });
+      });
+      props.setProps({ hidePersonal: true });
+      const { queryByRole } = render(<OrganizationSwitcher />, { wrapper });
+      expect(queryByRole('button', { name: 'Create Organization' })).not.toBeInTheDocument();
+    });
+
     it.todo('switches between active organizations when one is clicked');
   });
 });

packages/types/src/json.ts

@@ -214,6 +214,7 @@ export interface UserJSON extends ClerkResourceJSON {
   public_metadata: UserPublicMetadata;
   unsafe_metadata: UserUnsafeMetadata;
   last_sign_in_at: number | null;
+  create_organization_enabled: boolean;
   delete_self_enabled: boolean;
   updated_at: number;
   created_at: number;

packages/types/src/user.ts

@@ -77,6 +77,7 @@ export interface UserResource extends ClerkResource {
   publicMetadata: UserPublicMetadata;
   unsafeMetadata: UserUnsafeMetadata;
   lastSignInAt: Date | null;
+  createOrganizationEnabled: boolean;
   deleteSelfEnabled: boolean;
   updatedAt: Date | null;
   createdAt: Date | null;

packages/types/src/userSettings.ts

@@ -91,6 +91,7 @@ export interface UserSettingsJSON extends ClerkResourceJSON {
   id: never;
   object: never;
   attributes: AttributesJSON;
+  actions: Actions;
   social: OAuthProviders;
 
   /**
@@ -101,7 +102,6 @@ export interface UserSettingsJSON extends ClerkResourceJSON {
   sign_in: SignInData;
   sign_up: SignUpData;
   password_settings: PasswordSettingsData;
-  actions: Actions;
 }
 
 export interface UserSettingsResource extends ClerkResource {