Add custom pages to <UserProfile /> and <OrganizationProfile />

Previously if you were using Clerk's <UserProfile /> and <OrganizationProfile /> to allow your user's to view and manage their own profile settings your ability to extend them was fairly limited. This meant if you wanted to provide controls for other options outside of what Clerk's defaults, you were stuck. With our latest release, these components now allow for much richer customization. Allowing you to extend Clerk's pre-built components with whatever context is right for your app and your users.

UserProfile Customization

The <UserProfile /> component now supports (view docs):

• Custom Pages: Add your app's custom pages inside Clerk's <UserProfile /> UI by passing our new <UserProfile.Page> compound component
• External Links: Add external links to the navigation sidebar using the <UserProfile.Link> component
• Reordering: Create a custom sidebar by reordering the routes (like our defaults: Account and Security)

Here what an example of how to use our new React API for UserProfile customization:

<UserProfile>
  <UserProfile.Page label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
    <MyCustomPageContent />
  </UserProfile.Page>
  <UserProfile.Link label="External" url="/home" labelIcon={<Icon />} />
  <UserProfile.Page label="account" />
  <UserProfile.Page label="security" />
</UserProfile>

OrganizationProfile Customization

Just like UserProfile, the <OrganizationProfile /> component offers similar customization options for organization profiles (view docs)

• Custom Pages
• External Links
• Reordering (our defaults Members and Settings)

Here is an example of how to use the React API for OrganizationProfile customization:

<OrganizationProfile>
  <OrganizationProfile.Page label="Custom Page" url="custom" labelIcon={<CustomIcon />}>
    <MyCustomPageContent />
  </OrganizationProfile.Page>
  <OrganizationProfile.Link label="External" url="/home" labelIcon={<Icon />} />
  <OrganizationProfile.Page label="members" />
  <OrganizationProfile.Page label="settings" />
</OrganizationProfile>

For more information and implementation instructions, please refer to our documentation for <UserProfile /> and <OrganizationProfile />.

Other Fixes & Improvements

• Added support for creating users with SHA-256 algorithm password hashes, via the Backend API. SHA-256 password hashes will be transparently migrated to the more secure Bcrypt algorithm, the first time the user signs in