feat(ui): Immutable attributes in UserProfile

.changeset/bumpy-wings-travel.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+---
+
+Prevent modification of immutable attributes in UserProfile

packages/shared/src/types/userSettings.ts

@@ -30,6 +30,7 @@ export type OAuthProviderSettings = {
 export type AttributeDataJSON = {
   enabled: boolean;
   required: boolean;
+  immutable?: boolean;
   verifications: VerificationStrategy[];
   used_for_first_factor: boolean;
   first_factors: VerificationStrategy[];

packages/ui/src/components/UserProfile/AccountPage.tsx

@@ -18,7 +18,7 @@ export const AccountPage = withCardStateProvider(() => {
   const { attributes, social, enterpriseSSO } = useEnvironment().userSettings;
   const card = useCardState();
   const { user } = useUser();
-  const { shouldAllowIdentificationCreation } = useUserProfileContext();
+  const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();
 
   const showUsername = attributes.username?.enabled;
   const showEmail = attributes.email_address?.enabled;
@@ -27,6 +27,10 @@ export const AccountPage = withCardStateProvider(() => {
   const showEnterpriseAccounts = user && enterpriseSSO.enabled;
   const showWeb3 = attributes.web3_wallet?.enabled;
 
+  const isEmailImmutable = immutableAttributes.has('email_address');
+  const isPhoneImmutable = immutableAttributes.has('phone_number');
+  const isUsernameImmutable = immutableAttributes.has('username');
+
   return (
     <Col
       elementDescriptor={descriptors.page}
@@ -47,9 +51,19 @@ export const AccountPage = withCardStateProvider(() => {
         <Card.Alert>{card.error}</Card.Alert>
 
         <UserProfileSection />
-        {showUsername && <UsernameSection />}
-        {showEmail && <EmailsSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
-        {showPhone && <PhoneSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
+        {showUsername && <UsernameSection isImmutable={isUsernameImmutable} />}
+        {showEmail && (
+          <EmailsSection
+            shouldAllowCreation={shouldAllowIdentificationCreation && !isEmailImmutable}
+            shouldAllowDeletion={!isEmailImmutable}
+          />
+        )}
+        {showPhone && (
+          <PhoneSection
+            shouldAllowCreation={shouldAllowIdentificationCreation && !isPhoneImmutable}
+            shouldAllowDeletion={!isPhoneImmutable}
+          />
+        )}
         {showConnectedAccounts && <ConnectedAccountsSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
 
         {/*TODO-STEP-UP: Verify that these work as expected*/}

packages/ui/src/components/UserProfile/EmailsSection.tsx

@@ -39,7 +39,13 @@ const EmailScreen = (props: EmailScreenProps) => {
   );
 };
 
-export const EmailsSection = ({ shouldAllowCreation = true }) => {
+export const EmailsSection = ({
+  shouldAllowCreation = true,
+  shouldAllowDeletion = true,
+}: {
+  shouldAllowCreation?: boolean;
+  shouldAllowDeletion?: boolean;
+}) => {
   const { user } = useUser();
 
   return (
@@ -69,7 +75,10 @@ export const EmailsSection = ({ shouldAllowCreation = true }) => {
                       <Badge localizationKey={localizationKeys('badge__unverified')} />
                     )}
                   </Flex>
-                  <EmailMenu email={email} />
+                  <EmailMenu
+                    email={email}
+                    shouldAllowDeletion={shouldAllowDeletion}
+                  />
                 </ProfileSection.Item>
 
                 <Action.Open value={`remove-${emailId}`}>
@@ -107,7 +116,13 @@ export const EmailsSection = ({ shouldAllowCreation = true }) => {
   );
 };
 
-const EmailMenu = ({ email }: { email: EmailAddressResource }) => {
+const EmailMenu = ({
+  email,
+  shouldAllowDeletion = true,
+}: {
+  email: EmailAddressResource;
+  shouldAllowDeletion?: boolean;
+}) => {
   const card = useCardState();
   const { user } = useUser();
   const { open } = useActionContext();
@@ -140,13 +155,19 @@ const EmailMenu = ({ email }: { email: EmailAddressResource }) => {
             onClick: () => open(`verify-${emailId}`),
           }
         : null,
-      {
-        label: localizationKeys('userProfile.start.emailAddressesSection.destructiveAction'),
-        isDestructive: true,
-        onClick: () => open(`remove-${emailId}`),
-      },
+      shouldAllowDeletion
+        ? {
+            label: localizationKeys('userProfile.start.emailAddressesSection.destructiveAction'),
+            isDestructive: true,
+            onClick: () => open(`remove-${emailId}`),
+          }
+        : null,
     ] satisfies (PropsOfComponent<typeof ThreeDotsMenu>['actions'][0] | null)[]
   ).filter(a => a !== null) as PropsOfComponent<typeof ThreeDotsMenu>['actions'];
 
+  if (actions.length === 0) {
+    return null;
+  }
+
   return <ThreeDotsMenu actions={actions} />;
 };

packages/ui/src/components/UserProfile/PhoneSection.tsx

@@ -40,7 +40,13 @@ const PhoneScreen = (props: PhoneScreenProps) => {
   );
 };
 
-export const PhoneSection = ({ shouldAllowCreation = true }: { shouldAllowCreation?: boolean }) => {
+export const PhoneSection = ({
+  shouldAllowCreation = true,
+  shouldAllowDeletion = true,
+}: {
+  shouldAllowCreation?: boolean;
+  shouldAllowDeletion?: boolean;
+}) => {
   const { user } = useUser();
   const hasPhoneNumbers = Boolean(user?.phoneNumbers?.length);
 
@@ -78,7 +84,10 @@ export const PhoneSection = ({ shouldAllowCreation = true }: { shouldAllowCreati
                     </Flex>
                   </Box>
 
-                  <PhoneMenu phone={phone} />
+                  <PhoneMenu
+                    phone={phone}
+                    shouldAllowDeletion={shouldAllowDeletion}
+                  />
                 </ProfileSection.Item>
 
                 <Action.Open value={`remove-${phoneId}`}>
@@ -116,7 +125,13 @@ export const PhoneSection = ({ shouldAllowCreation = true }: { shouldAllowCreati
   );
 };
 
-const PhoneMenu = ({ phone }: { phone: PhoneNumberResource }) => {
+const PhoneMenu = ({
+  phone,
+  shouldAllowDeletion = true,
+}: {
+  phone: PhoneNumberResource;
+  shouldAllowDeletion?: boolean;
+}) => {
   const card = useCardState();
   const { open } = useActionContext();
   const { user } = useUser();
@@ -152,13 +167,19 @@ const PhoneMenu = ({ phone }: { phone: PhoneNumberResource }) => {
             onClick: () => open(`verify-${phoneId}`),
           }
         : null,
-      {
-        label: localizationKeys('userProfile.start.phoneNumbersSection.destructiveAction'),
-        isDestructive: true,
-        onClick: () => open(`remove-${phoneId}`),
-      },
+      shouldAllowDeletion
+        ? {
+            label: localizationKeys('userProfile.start.phoneNumbersSection.destructiveAction'),
+            isDestructive: true,
+            onClick: () => open(`remove-${phoneId}`),
+          }
+        : null,
     ] satisfies (PropsOfComponent<typeof ThreeDotsMenu>['actions'][0] | null)[]
   ).filter(a => a !== null) as PropsOfComponent<typeof ThreeDotsMenu>['actions'];
 
+  if (actions.length === 0) {
+    return null;
+  }
+
   return <ThreeDotsMenu actions={actions} />;
 };

packages/ui/src/components/UserProfile/UsernameSection.tsx

@@ -18,13 +18,17 @@ const UsernameScreen = () => {
   );
 };
 
-export const UsernameSection = () => {
+export const UsernameSection = ({ isImmutable }: { isImmutable?: boolean }) => {
   const { user } = useUser();
 
   if (!user) {
     return null;
   }
 
+  if (isImmutable && !user.username) {
+    return null;
+  }
+
   return (
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.usernameSection.title')}
@@ -48,16 +52,18 @@ export const UsernameSection = () => {
               </Text>
             )}
 
-            <Action.Trigger value='edit'>
-              <ProfileSection.Button
-                id='username'
-                localizationKey={
-                  user.username
-                    ? localizationKeys('userProfile.start.usernameSection.primaryButton__updateUsername')
-                    : localizationKeys('userProfile.start.usernameSection.primaryButton__setUsername')
-                }
-              />
-            </Action.Trigger>
+            {!isImmutable && (
+              <Action.Trigger value='edit'>
+                <ProfileSection.Button
+                  id='username'
+                  localizationKey={
+                    user.username
+                      ? localizationKeys('userProfile.start.usernameSection.primaryButton__updateUsername')
+                      : localizationKeys('userProfile.start.usernameSection.primaryButton__setUsername')
+                  }
+                />
+              </Action.Trigger>
+            )}
           </ProfileSection.Item>
         </Action.Closed>
 

packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

@@ -190,6 +190,83 @@ describe('EmailSection', () => {
     });
   });
 
+  describe('Immutable email addresses', () => {
+    const withImmutableEmails = createFixtures.config(f => {
+      f.withEmailAddress({ immutable: true });
+      f.withUser({
+        email_addresses: ['test@clerk.com', 'test2@clerk.com'],
+      });
+    });
+
+    it('hides the "Add email address" button when email is immutable', async () => {
+      const { wrapper } = await createFixtures(withImmutableEmails);
+
+      const { queryByRole } = render(
+        <CardStateProvider>
+          <EmailsSection shouldAllowCreation={false} />
+        </CardStateProvider>,
+        { wrapper },
+      );
+
+      expect(queryByRole('button', { name: /add email address/i })).not.toBeInTheDocument();
+    });
+
+    it('hides the "Remove" menu action when email is immutable', async () => {
+      const { wrapper } = await createFixtures(withImmutableEmails);
+
+      const { getByText, userEvent, queryByRole } = render(
+        <CardStateProvider>
+          <EmailsSection
+            shouldAllowCreation={false}
+            shouldAllowDeletion={false}
+          />
+        </CardStateProvider>,
+        { wrapper },
+      );
+
+      const item = getByText('test@clerk.com');
+      const menuButton = getMenuItemFromText(item);
+      await act(async () => {
+        await userEvent.click(menuButton!);
+      });
+
+      expect(queryByRole('menuitem', { name: /remove email/i })).not.toBeInTheDocument();
+    });
+
+    it('still shows verify and set-as-primary actions when email is immutable', async () => {
+      const { wrapper } = await createFixtures(
+        createFixtures.config(f => {
+          f.withEmailAddress({ immutable: true });
+          f.withUser({
+            email_addresses: [
+              { email_address: 'primary@clerk.com', id: 'email_primary', verification: { status: 'verified' } },
+              { email_address: 'secondary@clerk.com', id: 'email_secondary', verification: { status: 'verified' } },
+            ],
+            primary_email_address_id: 'email_primary',
+          });
+        }),
+      );
+
+      const { getByText, userEvent, getByRole } = render(
+        <CardStateProvider>
+          <EmailsSection
+            shouldAllowCreation={false}
+            shouldAllowDeletion={false}
+          />
+        </CardStateProvider>,
+        { wrapper },
+      );
+
+      const item = getByText('secondary@clerk.com');
+      const menuButton = getMenuItemFromText(item);
+      await act(async () => {
+        await userEvent.click(menuButton!);
+      });
+
+      getByRole('menuitem', { name: /set as primary/i });
+    });
+  });
+
   describe('Handles opening/closing actions', () => {
     it('closes add email form when remove an email address action is clicked', async () => {
       const { wrapper, fixtures } = await createFixtures(withEmails);