fix(clerk-js): Do not trigger roles query when the current user's membership lacks permissions (#6703)

Author: LauraBeatris

.changeset/clean-apes-invent.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Do not trigger organization roles query when the current user's membership lacks the required permissions (`org:sys_memberships:read` or `org:sys_memberships:manage`).
+
+This fixes an issue where the `OrganizationSwitcher` component was making unnecessary API calls to fetch roles, resulting in HTTP 403 errors.

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

@@ -137,7 +137,6 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             elementId={'organizationSwitcherActiveOrganization'}
             organization={currentOrg}
             user={user}
-            fetchRoles
             mainIdentifierVariant='buttonLarge'
             sx={t => ({
               padding: `${t.space.$4} ${t.space.$5}`,
@@ -177,7 +176,6 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             elementId={'organizationSwitcherActiveOrganization'}
             organization={currentOrg}
             user={user}
-            fetchRoles
             mainIdentifierVariant='buttonLarge'
             sx={t => ({
               padding: `${t.space.$4} ${t.space.$5}`,

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

@@ -56,7 +56,6 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
             elementId={'organizationSwitcherTrigger'}
             gap={3}
             size='xs'
-            fetchRoles
             organization={organization}
             sx={{ maxWidth: '30ch' }}
           />

packages/clerk-js/src/ui/elements/OrganizationPreview.tsx

@@ -2,7 +2,7 @@ import type { OrganizationPreviewId, UserOrganizationInvitationResource, UserRes
 import React from 'react';
 
 import { descriptors, Flex, Text } from '../customizables';
-import { useFetchRoles, useLocalizeCustomRoles } from '../hooks/useFetchRoles';
+import { useLocalizeCustomRoles } from '../hooks/useFetchRoles';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { OrganizationAvatar } from './OrganizationAvatar';
 
@@ -17,7 +17,6 @@ export type OrganizationPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'elem
   badge?: React.ReactNode;
   rounded?: boolean;
   elementId?: OrganizationPreviewId;
-  fetchRoles?: boolean;
 };
 
 export const OrganizationPreview = (props: OrganizationPreviewProps) => {
@@ -26,7 +25,6 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
     size = 'md',
     icon,
     rounded = false,
-    fetchRoles = false,
     badge,
     sx,
     user,
@@ -38,10 +36,9 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
   } = props;
 
   const { localizeCustomRole } = useLocalizeCustomRoles();
-  const { options } = useFetchRoles(fetchRoles);
-
   const membership = user?.organizationMemberships.find(membership => membership.organization.id === organization.id);
-  const unlocalizedRoleLabel = options?.find(a => a.value === membership?.role)?.label;
+
+  const unlocalizedRoleLabel = membership?.roleName;
   const roleLabel = localizeCustomRole(membership?.role) || unlocalizedRoleLabel;
 
   const mainTextSize =

packages/clerk-js/src/ui/hooks/useFetchRoles.ts

@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import type { GetRolesParams } from '@clerk/types';
 
+import { useProtect } from '../common';
 import { useLocalizations } from '../localization';
 import { customRoleLocalizationKey, roleLocalizationKey } from '../utils/roleLocalizationKey';
 import { useFetch } from './useFetch';
@@ -14,9 +15,15 @@ const getRolesParams = {
 };
 export const useFetchRoles = (enabled = true) => {
   const { organization } = useOrganization();
+  const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });
+  const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });
+
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const getRoles = ({ pageSize, initialPage }: GetRolesParams) => organization!.getRoles({ pageSize, initialPage });
-  const { data, isLoading } = useFetch(enabled && !!organization?.id ? getRoles : undefined, {
+
+  const hasSystemPermissions = canManageMemberships || canReadMemberships;
+  const shouldFetchRoles = enabled && !!organization?.id && hasSystemPermissions;
+  const { data, isLoading } = useFetch(shouldFetchRoles ? getRoles : undefined, {
     ...getRolesParams,
     orgId: organization?.id,
   });