fix(clerk-js): Emit session when permissions or role of the active memberships change (#2073)

.changeset/dry-students-reflect.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Emit session when permissions or role of the active memberships change.

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

@@ -8,6 +8,7 @@ import type {
  GetInvitationsParams,
  GetMembershipRequestParams,
  GetMemberships,
+ GetMembershipsParams,
  GetPendingInvitationsParams,
  GetRolesParams,
  InviteMemberParams,
@@ -26,7 +27,6 @@ import type {
  UpdateMembershipParams,
  UpdateOrganizationParams,
 } from '@clerk/types';
-import type { GetMembershipsParams } from '@clerk/types';
 
 import { unixEpochToDate } from '../../utils/date';
 import { convertPageToOffset } from '../../utils/pagesToOffset';
@@ -109,11 +109,16 @@ export class Organization extends BaseResource implements OrganizationResource {
  };
 
  getRoles = async (getRolesParams?: GetRolesParams) => {
- return await BaseResource._fetch({
- path: `/organizations/${this.id}/roles`,
- method: 'GET',
- search: convertPageToOffset(getRolesParams) as any,
- }).then(res => {
+ return await BaseResource._fetch(
+ {
+ path: `/organizations/${this.id}/roles`,
+ method: 'GET',
+ search: convertPageToOffset(getRolesParams) as any,
+ },
+ {
+ forceUpdateClient: true,
+ },
+ ).then(res => {
  const { data: roles, total_count } = res?.response as unknown as ClerkPaginatedResponse<RoleJSON>;
 
  return {
@@ -126,11 +131,16 @@ export class Organization extends BaseResource implements OrganizationResource {
  getDomains = async (
  getDomainParams?: GetDomainsParams,
  ): Promise<ClerkPaginatedResponse<OrganizationDomainResource>> => {
- return await BaseResource._fetch({
- path: `/organizations/${this.id}/domains`,
- method: 'GET',
- search: convertPageToOffset(getDomainParams) as any,
- })
+ return await BaseResource._fetch(
+ {
+ path: `/organizations/${this.id}/domains`,
+ method: 'GET',
+ search: convertPageToOffset(getDomainParams) as any,
+ },
+ {
+ forceUpdateClient: true,
+ },
+ )
  .then(res => {
  const { data: invites, total_count } =
  res?.response as unknown as ClerkPaginatedResponse<OrganizationDomainJSON>;
@@ -197,13 +207,18 @@ export class Organization extends BaseResource implements OrganizationResource {
  deprecated('offset', 'Use `initialPage` instead in Organization.limit.', 'organization:getMemberships:offset');
  }
 
- return await BaseResource._fetch({
- path: `/organizations/${this.id}/memberships`,
- method: 'GET',
- search: isDeprecatedParams
- ? getMembershipsParams
- : (convertPageToOffset(getMembershipsParams as unknown as any) as any),
- })
+ return await BaseResource._fetch(
+ {
+ path: `/organizations/${this.id}/memberships`,
+ method: 'GET',
+ search: isDeprecatedParams
+ ? getMembershipsParams
+ : (convertPageToOffset(getMembershipsParams as unknown as any) as any),
+ },
+ {
+ forceUpdateClient: true,
+ },
+ )
  .then(res => {
  if (isDeprecatedParams) {
  const organizationMembershipsJSON = res?.response as unknown as OrganizationMembershipJSON[];
@@ -248,11 +263,16 @@ export class Organization extends BaseResource implements OrganizationResource {
  getInvitations = async (
  getInvitationsParams?: GetInvitationsParams,
  ): Promise<ClerkPaginatedResponse<OrganizationInvitationResource>> => {
- return await BaseResource._fetch({
- path: `/organizations/${this.id}/invitations`,
- method: 'GET',
- search: convertPageToOffset(getInvitationsParams) as any,
- })
+ return await BaseResource._fetch(
+ {
+ path: `/organizations/${this.id}/invitations`,
+ method: 'GET',
+ search: convertPageToOffset(getInvitationsParams) as any,
+ },
+ {
+ forceUpdateClient: true,
+ },
+ )
  .then(res => {
  const { data: requests, total_count } =
  res?.response as unknown as ClerkPaginatedResponse<OrganizationInvitationJSON>;

packages/clerk-js/src/utils/memoizeStateListenerCallback.ts

@@ -28,7 +28,11 @@ function clientChanged(prev: ClientResource, next: ClientResource): boolean {
 }
 
 function sessionChanged(prev: SessionResource, next: SessionResource): boolean {
- return prev.id !== next.id || prev.updatedAt.getTime() < next.updatedAt.getTime();
+ return (
+ prev.id !== next.id ||
+ prev.updatedAt.getTime() < next.updatedAt.getTime() ||
+ sessionUserMembershipPermissionsChanged(next, prev)
+ );
 }
 
 function userChanged(prev: UserResource, next: UserResource): boolean {
@@ -45,6 +49,25 @@ function userMembershipsChanged(prev: UserResource, next: UserResource): boolean
  );
 }
 
+function sessionUserMembershipPermissionsChanged(prev: SessionResource, next: SessionResource): boolean {
+ if (prev.lastActiveOrganizationId !== next.lastActiveOrganizationId) {
+ return true;
+ }
+
+ const prevActiveMembership = prev.user?.organizationMemberships?.find(
+ mem => mem.organization.id === prev.lastActiveOrganizationId,
+ );
+
+ const nextActiveMembership = next.user?.organizationMemberships?.find(
+ mem => mem.organization.id === prev.lastActiveOrganizationId,
+ );
+
+ return (
+ prevActiveMembership?.role !== nextActiveMembership?.role ||
+ prevActiveMembership?.permissions?.length !== nextActiveMembership?.permissions?.length
+ );
+}
+
 // TODO: Decide if this belongs in the resources
 function resourceChanged<T extends AcceptedResource | undefined | null>(prev: T, next: T): boolean {
  // support the setSession undefined intermediate state