chore(clerk-js,types,backend): Remove MemberRole Type (#2388)

* chore(clerk-js,types,backend): Remove MemberRole Type

`MemberRole` would always include the old role keys `admin`, `member`, `guest_member`. If developers still depend on them after the introduction of custom roles, the can provide them as their custom types for authorization.

* chore(clerk-js): Change changeset

Author: panteliselef

.changeset/orange-files-end.md

@@ -0,0 +1,18 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Remove MemberRole Type`MemberRole` would always include the old role keys `admin`, `member`, `guest_member`. 
+If developers still depend on them after the introduction of custom roles, the can provide them as their custom types for authorization.
+
+```ts
+// clerk.d.ts
+export {}
+
+interface ClerkAuthorization {
+  permission: '';
+  role: 'admin' | 'basic_member' | 'guest_member';
+}
+```

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

@@ -1,7 +1,7 @@
 import type {
   CreateBulkOrganizationInvitationParams,
   CreateOrganizationInvitationParams,
-  MembershipRole,
+  OrganizationCustomRoleKey,
   OrganizationInvitationJSON,
   OrganizationInvitationResource,
   OrganizationInvitationStatus,
@@ -16,7 +16,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
   organizationId!: string;
   publicMetadata: OrganizationInvitationPublicMetadata = {};
   status!: OrganizationInvitationStatus;
-  role!: MembershipRole;
+  role!: OrganizationCustomRoleKey;
   createdAt!: Date;
   updatedAt!: Date;
 

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

@@ -2,7 +2,7 @@ import type {
   ClerkPaginatedResponse,
   ClerkResourceReloadParams,
   GetUserOrganizationMembershipParams,
-  MembershipRole,
+  OrganizationCustomRoleKey,
   OrganizationMembershipJSON,
   OrganizationMembershipResource,
   OrganizationPermissionKey,
@@ -18,7 +18,7 @@ export class OrganizationMembership extends BaseResource implements Organization
   publicUserData!: PublicUserData;
   organization!: Organization;
   permissions: OrganizationPermissionKey[] = [];
-  role!: MembershipRole;
+  role!: OrganizationCustomRoleKey;
   createdAt!: Date;
   updatedAt!: Date;
 
@@ -117,7 +117,7 @@ export class OrganizationMembership extends BaseResource implements Organization
 }
 
 export type UpdateOrganizationMembershipParams = {
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 };
 
 export type GetOrganizationMembershipsClass = (

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

@@ -1,7 +1,7 @@
 import type {
   ClerkPaginatedResponse,
   GetUserOrganizationInvitationsParams,
-  MembershipRole,
+  OrganizationCustomRoleKey,
   OrganizationInvitationStatus,
   UserOrganizationInvitationJSON,
   UserOrganizationInvitationResource,
@@ -17,7 +17,7 @@ export class UserOrganizationInvitation extends BaseResource implements UserOrga
   publicOrganizationData!: UserOrganizationInvitationResource['publicOrganizationData'];
   publicMetadata: OrganizationInvitationPublicMetadata = {};
   status!: OrganizationInvitationStatus;
-  role!: MembershipRole;
+  role!: OrganizationCustomRoleKey;
   createdAt!: Date;
   updatedAt!: Date;
 

packages/clerk-js/src/ui/common/Gate.tsx

@@ -1,5 +1,5 @@
 import { useSession } from '@clerk/shared/react';
-import type { CheckAuthorization, MembershipRole, OrganizationPermissionKey } from '@clerk/types';
+import type { CheckAuthorization, OrganizationCustomRoleKey, OrganizationPermissionKey } from '@clerk/types';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import React, { useEffect } from 'react';
 
@@ -10,7 +10,7 @@ type GateProps = PropsWithChildren<
   (
     | {
         condition?: never;
-        role: MembershipRole;
+        role: OrganizationCustomRoleKey;
         permission?: never;
       }
     | {

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

@@ -1,6 +1,6 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
 import { useOrganization } from '@clerk/shared/react';
-import type { ClerkAPIError, MembershipRole } from '@clerk/types';
+import type { ClerkAPIError } from '@clerk/types';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 
@@ -74,7 +74,7 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
     return organization
       .inviteMembers({
         emailAddresses: emailAddressField.value.split(','),
-        role: submittedData.get('role') as MembershipRole,
+        role: submittedData.get('role') as string,
       })
       .then(async () => {
         await invitations?.revalidate?.();

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -1,4 +1,3 @@
-import type { MembershipRole } from '@clerk/types';
 import React, { useMemo } from 'react';
 
 import type { LocalizationKey } from '../../customizables';
@@ -121,7 +120,7 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 
 export const RoleSelect = (props: {
   roles: { label: string; value: string }[] | undefined;
-  value: MembershipRole;
+  value: string;
   onChange: (params: string) => unknown;
   isDisabled?: boolean;
   triggerSx?: ThemableCssProp;

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

@@ -1,22 +1,23 @@
-import type { MembershipRole } from '@clerk/types';
-
 import type { LocalizationKey } from '../localization/localizationKeys';
 import { localizationKeys } from '../localization/localizationKeys';
 
-const roleToLocalizationKey: Record<MembershipRole, LocalizationKey> = {
+const roleToLocalizationKey: Record<string, LocalizationKey> = {
+  /**
+   * These are old role keys. We still need to support localization for those to avoid breaking labels in UI components for old instances.
+   */
   basic_member: localizationKeys('membershipRole__basicMember'),
   guest_member: localizationKeys('membershipRole__guestMember'),
   admin: localizationKeys('membershipRole__admin'),
 };
 
-export const roleLocalizationKey = (role: MembershipRole | undefined): LocalizationKey | undefined => {
+export const roleLocalizationKey = (role: string | undefined): LocalizationKey | undefined => {
   if (!role) {
     return undefined;
   }
   return roleToLocalizationKey[role];
 };
 
-export const customRoleLocalizationKey = (role: MembershipRole | undefined): LocalizationKey | undefined => {
+export const customRoleLocalizationKey = (role: string | undefined): LocalizationKey | undefined => {
   if (!role) {
     return undefined;
   }

packages/react/src/hooks/useAuth.ts

@@ -2,7 +2,7 @@ import type {
   ActJWTClaim,
   CheckAuthorizationWithCustomPermissions,
   GetToken,
-  MembershipRole,
+  OrganizationCustomRoleKey,
   SignOut,
 } from '@clerk/types';
 import { useCallback } from 'react';
@@ -64,7 +64,7 @@ type UseAuthReturn =
       sessionId: string;
       actor: ActJWTClaim | null;
       orgId: string;
-      orgRole: MembershipRole;
+      orgRole: OrganizationCustomRoleKey;
       orgSlug: string | null;
       has: CheckAuthorizationWithCustomPermissions;
       signOut: SignOut;

packages/types/src/clerk.ts

@@ -15,7 +15,7 @@ import type { DisplayThemeJSON } from './json';
 import type { LocalizationResource } from './localization';
 import type { OAuthProvider, OAuthScope } from './oauth';
 import type { OrganizationResource } from './organization';
-import type { MembershipRole } from './organizationMembership';
+import type { OrganizationCustomRoleKey } from './organizationMembership';
 import type { ActiveSessionResource } from './session';
 import type { UserResource } from './user';
 import type { Autocomplete, DeepPartial, DeepSnakeToCamel } from './utils';
@@ -935,12 +935,12 @@ export interface HandleEmailLinkVerificationParams {
 
 export type CreateOrganizationInvitationParams = {
   emailAddress: string;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 };
 
 export type CreateBulkOrganizationInvitationParams = {
   emailAddresses: string[];
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 };
 
 export interface CreateOrganizationParams {

packages/types/src/json.ts

@@ -7,7 +7,7 @@ import type { ActJWTClaim } from './jwt';
 import type { OAuthProvider } from './oauth';
 import type { OrganizationDomainVerificationStatus, OrganizationEnrollmentMode } from './organizationDomain';
 import type { OrganizationInvitationStatus } from './organizationInvitation';
-import type { MembershipRole, OrganizationPermissionKey } from './organizationMembership';
+import type { OrganizationCustomRoleKey, OrganizationPermissionKey } from './organizationMembership';
 import type { OrganizationSettingsJSON } from './organizationSettings';
 import type { OrganizationSuggestionStatus } from './organizationSuggestion';
 import type { SamlIdpSlug } from './saml';
@@ -303,7 +303,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
   permissions: OrganizationPermissionKey[];
   public_metadata: OrganizationMembershipPublicMetadata;
   public_user_data: PublicUserDataJSON;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
   created_at: number;
   updated_at: number;
 }
@@ -315,7 +315,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
   organization_id: string;
   public_metadata: OrganizationInvitationPublicMetadata;
   status: OrganizationInvitationStatus;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
   created_at: number;
   updated_at: number;
 }
@@ -403,7 +403,7 @@ export interface UserOrganizationInvitationJSON extends ClerkResourceJSON {
   public_organization_data: PublicOrganizationDataJSON;
   public_metadata: OrganizationInvitationPublicMetadata;
   status: OrganizationInvitationStatus;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
   created_at: number;
   updated_at: number;
 }

packages/types/src/jwt.ts

@@ -1,4 +1,4 @@
-import type { MembershipRole } from './organizationMembership';
+import type { OrganizationCustomRoleKey } from './organizationMembership';
 
 export interface JWT {
   encoded: { header: string; payload: string; signature: string };
@@ -84,7 +84,7 @@ export interface ClerkJWTClaims {
   /**
    * Active organization role
    */
-  org_role?: MembershipRole;
+  org_role?: OrganizationCustomRoleKey;
 
   /**
    * Any other JWT Claim Set member.
@@ -100,4 +100,4 @@ export interface ActJWTClaim {
   [x: string]: unknown;
 }
 
-export type OrganizationsJWTClaim = Record<string, MembershipRole>;
+export type OrganizationsJWTClaim = Record<string, OrganizationCustomRoleKey>;

packages/types/src/jwtv2.ts

@@ -1,4 +1,4 @@
-import type { MembershipRole, OrganizationCustomPermissionKey } from './organizationMembership';
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
 
 export interface Jwt {
   header: JwtHeader;
@@ -94,7 +94,7 @@ export interface JwtPayload extends CustomJwtSessionClaims {
   /**
    * Active organization role
    */
-  org_role?: MembershipRole;
+  org_role?: OrganizationCustomRoleKey;
 
   /**
    * Active organization role

packages/types/src/organization.ts

@@ -1,6 +1,6 @@
 import type { OrganizationDomainResource, OrganizationEnrollmentMode } from './organizationDomain';
 import type { OrganizationInvitationResource, OrganizationInvitationStatus } from './organizationInvitation';
-import type { MembershipRole, OrganizationMembershipResource } from './organizationMembership';
+import type { OrganizationCustomRoleKey, OrganizationMembershipResource } from './organizationMembership';
 import type { OrganizationMembershipRequestResource } from './organizationMembershipRequest';
 import type { ClerkPaginatedResponse, ClerkPaginationParams } from './pagination';
 import type { ClerkResource } from './resource';
@@ -67,7 +67,7 @@ export interface OrganizationResource extends ClerkResource {
 export type GetRolesParams = ClerkPaginationParams;
 
 export type GetMembersParams = ClerkPaginationParams<{
-  role?: MembershipRole[];
+  role?: OrganizationCustomRoleKey[];
 }>;
 
 export type GetDomainsParams = ClerkPaginationParams<{
@@ -84,22 +84,22 @@ export type GetMembershipRequestParams = ClerkPaginationParams<{
 
 export interface AddMemberParams {
   userId: string;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 }
 
 export interface InviteMemberParams {
   emailAddress: string;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 }
 
 export interface InviteMembersParams {
   emailAddresses: string[];
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 }
 
 export interface UpdateMembershipParams {
   userId: string;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 }
 
 export interface UpdateOrganizationParams {

packages/types/src/organizationInvitation.ts

@@ -1,4 +1,4 @@
-import type { MembershipRole } from './organizationMembership';
+import type { OrganizationCustomRoleKey } from './organizationMembership';
 import type { ClerkResource } from './resource';
 
 declare global {
@@ -21,7 +21,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
   emailAddress: string;
   organizationId: string;
   publicMetadata: OrganizationInvitationPublicMetadata;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
   status: OrganizationInvitationStatus;
   createdAt: Date;
   updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -43,7 +43,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
   permissions: OrganizationPermissionKey[];
   publicMetadata: OrganizationMembershipPublicMetadata;
   publicUserData: PublicUserData;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
   createdAt: Date;
   updatedAt: Date;
   destroy: () => Promise<OrganizationMembershipResource>;
@@ -56,24 +56,15 @@ export type OrganizationCustomPermissionKey = ClerkAuthorization extends Placeho
     : Base['permission']
   : Base['permission'];
 
+/**
+ * OrganizationCustomRoleKey will be string unless the developer has provided their own types through `ClerkAuthorization`
+ */
 export type OrganizationCustomRoleKey = ClerkAuthorization extends Placeholder
   ? ClerkAuthorization['role'] extends string
     ? ClerkAuthorization['role']
     : Base['role']
   : Base['role'];
 
-/**
- * @deprecated This type is deprecated and will be removed in the next major release.
- * Use `OrganizationCustomRoleKey` instead.
- * MembershipRole includes `admin`, `basic_member`, `guest_member`. With the introduction of "Custom roles"
- * these types will no longer match a developer's custom logic.
- */
-export type MembershipRole = ClerkAuthorization extends Placeholder
-  ? ClerkAuthorization['role'] extends string
-    ? ClerkAuthorization['role'] | 'admin' | 'basic_member' | 'guest_member'
-    : Autocomplete<'admin' | 'basic_member' | 'guest_member'>
-  : Autocomplete<'admin' | 'basic_member' | 'guest_member'>;
-
 export type OrganizationSystemPermissionKey =
   | 'org:sys_domains:manage'
   | 'org:sys_profile:manage'
@@ -93,5 +84,5 @@ export type OrganizationPermissionKey = ClerkAuthorization extends Placeholder
   : Autocomplete<OrganizationSystemPermissionKey>;
 
 export type UpdateOrganizationMembershipParams = {
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
 };

packages/types/src/session.ts

@@ -1,6 +1,5 @@
 import type { ActJWTClaim } from './jwt';
 import type {
-  MembershipRole,
   OrganizationCustomPermissionKey,
   OrganizationCustomRoleKey,
   OrganizationPermissionKey,
@@ -28,7 +27,7 @@ export type CheckAuthorization = CheckAuthorizationFn<CheckAuthorizationParams>;
 
 type CheckAuthorizationParams =
   | {
-      role: MembershipRole;
+      role: OrganizationCustomRoleKey;
       permission?: never;
     }
   | {

packages/types/src/ssr.ts

@@ -1,6 +1,6 @@
 import type { ActClaim, JwtPayload } from './jwtv2';
 import type { OrganizationResource } from './organization';
-import type { MembershipRole, OrganizationCustomPermissionKey } from './organizationMembership';
+import type { OrganizationCustomPermissionKey, OrganizationCustomRoleKey } from './organizationMembership';
 import type { SessionResource } from './session';
 import type { UserResource } from './user';
 import type { Serializable } from './utils';
@@ -16,7 +16,7 @@ export type InitialState = Serializable<{
   userId: string | undefined;
   user: UserResource | undefined;
   orgId: string | undefined;
-  orgRole: MembershipRole | undefined;
+  orgRole: OrganizationCustomRoleKey | undefined;
   orgSlug: string | undefined;
   orgPermissions: OrganizationCustomPermissionKey[] | undefined;
   organization: OrganizationResource | undefined;

packages/types/src/userOrganizationInvitation.ts

@@ -1,5 +1,5 @@
 import type { OrganizationInvitationStatus } from './organizationInvitation';
-import type { MembershipRole } from './organizationMembership';
+import type { OrganizationCustomRoleKey } from './organizationMembership';
 import type { ClerkResource } from './resource';
 
 declare global {
@@ -28,7 +28,7 @@ export interface UserOrganizationInvitationResource extends ClerkResource {
     slug: string | null;
   };
   publicMetadata: UserOrganizationInvitationPublicMetadata;
-  role: MembershipRole;
+  role: OrganizationCustomRoleKey;
   status: OrganizationInvitationStatus;
   createdAt: Date;
   updatedAt: Date;