Custom Pages for `<UserProfile />` and `<OrganizationProfile />` components by anagstef · Pull Request #1822 · clerk/javascript

anagstef · 2023-10-03T14:45:11Z

Description

This PR introduces custom pages and links inside the UserProfile and OrganizationProfile components.

UserProfile

Custom Pages

The UserProfile component supports the addition of custom pages. These custom pages can be rendered inside the UserProfile component and provide a way to incorporate app-specific settings or additional functionality.

To add a custom page, use the <UserProfile.Page> component. It accepts the following props:

label: The name that will be displayed in the navigation sidebar for the custom page.
labelIcon: An icon displayed next to the label in the navigation sidebar.
url: The path segment that will be used to navigate to the custom page. (e.g. if the UserProfile component is rendered at /user, then the custom page will be accessed at /user/{url} when using path routing)
children: The components to be rendered as content inside the custom page.

Types:

typeUserProfilePageProps={label: string;labelIcon: React.ReactElement;url: string;children: React.ReactElement;};

Example usage:

<UserProfile><UserProfile.Pagelabel="Custom Page"url="custom"labelIcon={<CustomIcon/>}><MyCustomPageContent/></UserProfile.Page><UserProfile.Pagelabel="Custom2"url="custom2"labelIcon={<CustomIcon/>}><MyCustomPageContent2/></UserProfile.Page></UserProfile>

Custom Links

In addition to custom pages, you can add external links to the UserProfile navigation sidebar using the <UserProfile.Link> component. It accepts the following props:

label: The name that will be displayed in the navigation sidebar for the link.
labelIcon: An icon displayed next to the label in the navigation sidebar.
url: The absolute or relative url to navigate to.

Types:

typeUserProfileLinkProps={label: string;labelIcon: React.ReactElement;url: string;};

Example usage:

<UserProfile><UserProfile.Linklabel="External"url="/home"labelIcon={<Icon/>}/></UserProfile>

Advanced

Reordering Default Routes

If you want to reorder the default routes (Account and Security) in the UserProfile navigation sidebar, you can use the <UserProfile.Page> component with the label prop set to 'account' or 'security'. This will target the existing default page and allow you to rearrange it.

Example usage:

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

The above will result in the following order:

Custom Page
External
Account
Security

Notes

The first page in the list will be rendered under the root path / (its url will be ignored) and the Clerk pages will be rendered under the path /account.
The first item in the list cannot be a <UserProfile.Link> component.

Using custom pages with the UserButton component

If you are using the UserButton component with the default props (where the UserProfile opens as a modal), then you should also be providing these custom pages as children to the component (using the <UserButton.UserProfilePage> and <UserButton.UserProfileLink> components respectively).

Example usage:

<UserButtonafterSignOutUrl='/'><UserButton.UserProfilePagelabel="Custom"url="custom"labelIcon={<CustomIcon/>}><MyCustomPageContent/></UserButton.UserProfilePage><UserButton.UserProfileLinklabel="Link"url="/home"labelIcon={<Icon/>}/></UserButton>

This repetition of the same property can be avoided when the user is using the userProfileMode='navigation' and userProfileUrl='<some url>' props on the UserButton component and has implemented a dedicated page for the UserProfile component.

OrganizationProfile

Custom Pages

The OrganizationProfile component supports the addition of custom pages. These custom pages can be rendered inside the OrganizationProfile component and provide a way to incorporate organization-specific settings or additional functionality.

To add a custom page, use the <OrganizationProfile.Page> component. It accepts the following props:

label: The name that will be displayed in the navigation sidebar for the custom page.
labelIcon: An icon displayed next to the label in the navigation sidebar.
url: The path segment that will be used to navigate to the custom page. (e.g. if the OrganizationProfile component is rendered at /organization, then the custom page will be accessed at /organization/{url} when using path routing)
children: The components to be rendered as content inside the custom page.

Types:

typeOrganizationProfilePageProps={label: string;labelIcon: React.ReactElement;url: string;children: React.ReactElement;};

Example usage:

<OrganizationProfile><OrganizationProfile.Pagelabel="Custom Page"url="custom"labelIcon={<CustomIcon/>}><MyCustomPageContent/></OrganizationProfile.Page><OrganizationProfile.Pagelabel="Custom2"url="custom2"labelIcon={<CustomIcon/>}><MyCustomPageContent2/></OrganizationProfile.Page></OrganizationProfile>

Custom Links

In addition to custom pages, you can add external links to the OrganizationProfile navigation sidebar using the <OrganizationProfile.Link> component. It accepts the following props:

label: The name that will be displayed in the navigation sidebar for the link.
labelIcon: An icon displayed next to the label in the navigation sidebar.
url: The absolute or relative url to navigate to.

Types:

typeOrganizationProfileLinkProps={label: string;labelIcon: React.ReactElement;url: string;};

Example usage:

<OrganizationProfile><OrganizationProfile.Linklabel="External"url="/home"labelIcon={<Icon/>}/></OrganizationProfile>

Advanced

Reordering Default Routes

If you want to reorder the default routes (Members and Settings) in the OrganizationProfile navigation sidebar, you can use the <OrganizationProfile.Page> component with the label prop set to 'members' or 'settings'. This will target the existing default page and allow you to rearrange it.

Example usage:

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

The above will result in the following order:

Custom Page
External
Members
Settings

Notes

The first page in the list will be rendered under the root path / (its url will be ignored) and the Clerk pages will be rendered under the path /organitzation-members and /organization-settings.
The first item in the list cannot be an <OrganizationProfile.Link> component.

Using custom pages with the OrganizationSwitcher component

If you are using the OrganizationSwitcher component with the default props (where the OrganizationProfile opens as a modal), then you should also be providing these custom pages as children to the component (using the <OrganizationSwitcher.OrganizationProfilePage> and <OrganizationSwitcher.OrganizationProfileLink> components respectively).

Example usage:

<OrganizationSwitcher><OrganizationSwitcher.OrganizationProfilePagelabel="Custom"url="custom"labelIcon={<CustomIcon/>}><MyCustomPageContent/></OrganizationSwitcher.OrganizationProfilePage><OrganizationSwitcher.OrganizationProfileLinklabel="Link"url="/home"labelIcon={<Icon/>}/></OrganizationSwitcher>

This repetition of the same property can be avoided when the user is using the organizationProfileMode='navigation' and organizationProfileUrl='<some url>' props on the OrganizationSwitcher component and has implemented a dedicated page for the OrganizationProfile component.

Caveats

These custom components can be rendered only on the client, and in Next.js projects, they need to be under the "use client"; flag.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Packages affected

changeset-bot · 2023-10-03T14:45:14Z

🦋 Changeset detected

Latest commit: 3d8b86a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/clerk-react	Minor
@clerk/types	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
gatsby-plugin-clerk	Patch
@clerk/nextjs	Patch
@clerk/remix	Patch
@clerk/backend	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/clerk-sdk-node	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

anagstef · 2023-10-03T15:35:41Z

!snapshot

clerk-cookie · 2023-10-03T15:38:53Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	0.30.2-snapshot.875725a
@clerk/chrome-extension	0.4.5-snapshot.875725a
@clerk/clerk-js	4.60.0-snapshot.875725a
@clerk/clerk-expo	0.19.7-snapshot.875725a
@clerk/fastify	0.6.12-snapshot.875725a
gatsby-plugin-clerk	4.4.13-snapshot.875725a
@clerk/localizations	1.26.3-snapshot.875725a
@clerk/nextjs	4.25.2-snapshot.875725a
@clerk/clerk-react	4.27.0-snapshot.875725a
@clerk/remix	3.0.4-snapshot.875725a
@clerk/clerk-sdk-node	4.12.11-snapshot.875725a
@clerk/shared	0.24.2-snapshot.875725a
@clerk/themes	1.7.7-snapshot.875725a
@clerk/types	3.54.0-snapshot.875725a

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.30.2-snapshot.875725a

# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.5-snapshot.875725a

# @clerk/clerk-js
npm i @clerk/clerk-js@4.60.0-snapshot.875725a

# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.7-snapshot.875725a

# @clerk/fastify
npm i @clerk/fastify@0.6.12-snapshot.875725a

# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.13-snapshot.875725a

# @clerk/localizations
npm i @clerk/localizations@1.26.3-snapshot.875725a

# @clerk/nextjs
npm i @clerk/nextjs@4.25.2-snapshot.875725a

# @clerk/clerk-react
npm i @clerk/clerk-react@4.27.0-snapshot.875725a

# @clerk/remix
npm i @clerk/remix@3.0.4-snapshot.875725a

# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.11-snapshot.875725a

# @clerk/shared
npm i @clerk/shared@0.24.2-snapshot.875725a

# @clerk/themes
npm i @clerk/themes@1.7.7-snapshot.875725a

# @clerk/types
npm i @clerk/types@3.54.0-snapshot.875725a

panteliselef · 2023-10-04T10:02:23Z

+export type UserProfilePageProps = {
+ url?: string;
+ label: string;
+ labelIcon?: React.ReactElement;


❓ Couldn't this be ReactNode ?

brkalow

Looking good! Nice test cases.

brkalow · 2023-10-04T14:22:20Z

+ <Route
+ index={!pages.isAccountPageRoot && index === 0}
+ path={!pages.isAccountPageRoot && index === 0 ? undefined : customPage.url}
+ key={`custom-page-${index}`}


💭 I don't expect the custom pages list to change really, but using url in the key might be better here.

brkalow · 2023-10-04T14:34:27Z

 throw new Error('Clerk: useUserProfileContext called outside of the mounted UserProfile component.');
 }

+ const pages = useMemo(() => createCustomPages(customPages || []), [customPages]);


❓ Is customPages memoized upstream from this? Otherwise, this useMemo() call might be getting recomputed on every call to this hook.

From what I can tell, there isn't anything that guarantees referential equality of customPages, so this might run more than we intend.

You are right! We cannot hook on the customPages changes, because we can't really be 100% sure when custom pages contents change. So, I may just remove the useMemo here.

brkalow · 2023-10-04T14:36:01Z

 export const NavBar = (props: NavBarProps) => {
 const { contentRef, routes, header } = props;
- const [activeId, setActiveId] = React.useState<RouteId>(routes[0]['id']);
+ const [activeId, setActiveId] = React.useState<RouteId>('');


❓ Why are we removing this default value?

This was causing a flicker when accessing directly a subpath in the UserProfile. In the first render, it always highlighted the first item in the navbar and then changed to the actual active. Now, it highlights nothing for half a second and then the correct item, which looks smoother in the eye.

brkalow · 2023-10-04T14:37:04Z

+ <>
+ <div ref={nodeRef}></div>
+ </>


Suggested change
<>
<divref={nodeRef}></div>
</>
<divref={nodeRef}/>

brkalow · 2023-10-04T14:38:40Z

+ if (isDevelopmentEnvironment()) {
+ checkForDuplicateUsageOfReorderingItems(customPages);
+ }


love the helpful error checks here 👏

brkalow · 2023-10-04T14:58:53Z

+};
+
+const checkForDuplicateUsageOfReorderingItems = (customPages: CustomPage[]) => {
+ const reorderItems = customPages.filter(cp => isAccountReorderItem(cp) || isSecurityReorderItem(cp));


Just thinking for the future, if we ever add another internal page that can be reordered, we'll have a few places that need updating. Is there a way we can consolidate that logic?

I have refactored this part. Thanks for pointing out.

brkalow · 2023-10-04T15:04:05Z

+const sanitizeCustomPageURL = (url: string): string => {
+ if (!url) {
+ throw new Error('URL is required for custom pages');
+ }
+ if (isValidUrl(url)) {
+ throw new Error('Absolute URLs are not supported for custom pages');
+ }
+ return (url as string).charAt(0) === '/' && (url as string).length > 1 ? (url as string).substring(1) : url;
+};
+
+const sanitizeCustomLinkURL = (url: string): string => {
+ if (!url) {
+ throw new Error('URL is required for custom links');
+ }
+ if (isValidUrl(url)) {
+ return url;
+ }
+ return (url as string).charAt(0) === '/' ? url : `/${url}`;
+};


❓ Why are we removing the leading / in one of these methods and prepending it in another?

We want the Custom Link items (external links) to have a leading / so that navigate works correctly, and on the other hand Custom Page items need a relative segment, to navigate inside the UserProfile/OrganizationProfile routing mechanism.

brkalow · 2023-10-04T15:05:21Z

+export function UserProfilePage({ children }: PropsWithChildren<UserProfilePageProps>) {
+ if (isDevelopmentEnvironment()) {
+ console.error(userProfilePageRenderedError);
+ }
+ return <div>{children}</div>;
+}
+
+export function UserProfileLink({ children }: PropsWithChildren<UserProfileLinkProps>) {
+ if (isDevelopmentEnvironment()) {
+ console.error(userProfileLinkRenderedError);
+ }
+ return <div>{children}</div>;
+}


Should we not export these instead of logging an error when they are used directly?

We don't export them from our package. We do this so we can import it in the useCustomPages hook, and check if this is the component used as a child inside the UserProfile
ref: https://github.com/clerkinc/javascript/blob/3bf4d1a78916f24b47d094cbf97065e510d3f337/packages/react/src/utils/useCustomPages.tsx#L69

brkalow · 2023-10-04T15:07:34Z

+ Page: ({ children }: PropsWithChildren<UserProfilePageProps>) => React.JSX.Element;
+ Link: ({ children }: PropsWithChildren<UserProfileLinkProps>) => React.JSX.Element;


Does this work?
Suggested change
Page: ({ children }: PropsWithChildren<UserProfilePageProps>)=>React.JSX.Element;
Link: ({ children }: PropsWithChildren<UserProfileLinkProps>)=>React.JSX.Element;
Page: typeofUserProfilePage;
Link: typeofUserProfileLink;

It might also be helpful to place these types at the top of the file, instead of interleaved with the source.

brkalow · 2023-10-04T15:14:12Z

+ if (isDevelopmentEnvironment()) {
+ console.error(userProfilePageRenderedError);
+ }


Your errorInDevMode helper could be used here.

anagstef · 2023-10-05T09:25:54Z

!snapshot

clerk-cookie · 2023-10-05T09:30:29Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	0.30.2-snapshot.3bf4d1a
@clerk/chrome-extension	0.4.5-snapshot.3bf4d1a
@clerk/clerk-js	4.60.0-snapshot.3bf4d1a
@clerk/clerk-expo	0.19.7-snapshot.3bf4d1a
@clerk/fastify	0.6.12-snapshot.3bf4d1a
gatsby-plugin-clerk	4.4.13-snapshot.3bf4d1a
@clerk/localizations	1.26.3-snapshot.3bf4d1a
@clerk/nextjs	4.25.2-snapshot.3bf4d1a
@clerk/clerk-react	4.27.0-snapshot.3bf4d1a
@clerk/remix	3.0.4-snapshot.3bf4d1a
@clerk/clerk-sdk-node	4.12.11-snapshot.3bf4d1a
@clerk/shared	0.24.2-snapshot.3bf4d1a
@clerk/themes	1.7.7-snapshot.3bf4d1a
@clerk/types	3.54.0-snapshot.3bf4d1a

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.30.2-snapshot.3bf4d1a

# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.5-snapshot.3bf4d1a

# @clerk/clerk-js
npm i @clerk/clerk-js@4.60.0-snapshot.3bf4d1a

# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.7-snapshot.3bf4d1a

# @clerk/fastify
npm i @clerk/fastify@0.6.12-snapshot.3bf4d1a

# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.13-snapshot.3bf4d1a

# @clerk/localizations
npm i @clerk/localizations@1.26.3-snapshot.3bf4d1a

# @clerk/nextjs
npm i @clerk/nextjs@4.25.2-snapshot.3bf4d1a

# @clerk/clerk-react
npm i @clerk/clerk-react@4.27.0-snapshot.3bf4d1a

# @clerk/remix
npm i @clerk/remix@3.0.4-snapshot.3bf4d1a

# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.11-snapshot.3bf4d1a

# @clerk/shared
npm i @clerk/shared@0.24.2-snapshot.3bf4d1a

# @clerk/themes
npm i @clerk/themes@1.7.7-snapshot.3bf4d1a

# @clerk/types
npm i @clerk/types@3.54.0-snapshot.3bf4d1a

anagstef · 2023-10-06T10:19:27Z

!snapshot

clerk-cookie · 2023-10-06T10:23:19Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	0.30.3-snapshot.09b5917
@clerk/chrome-extension	0.4.6-snapshot.09b5917
@clerk/clerk-js	4.61.0-snapshot.09b5917
@clerk/clerk-expo	0.19.8-snapshot.09b5917
@clerk/fastify	0.6.13-snapshot.09b5917
gatsby-plugin-clerk	4.4.14-snapshot.09b5917
@clerk/localizations	1.26.4-snapshot.09b5917
@clerk/nextjs	4.25.3-snapshot.09b5917
@clerk/clerk-react	4.27.0-snapshot.09b5917
@clerk/remix	3.0.5-snapshot.09b5917
@clerk/clerk-sdk-node	4.12.12-snapshot.09b5917
@clerk/shared	0.24.3-snapshot.09b5917
@clerk/types	3.55.0-snapshot.09b5917

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.30.3-snapshot.09b5917

# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.6-snapshot.09b5917

# @clerk/clerk-js
npm i @clerk/clerk-js@4.61.0-snapshot.09b5917

# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.8-snapshot.09b5917

# @clerk/fastify
npm i @clerk/fastify@0.6.13-snapshot.09b5917

# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.14-snapshot.09b5917

# @clerk/localizations
npm i @clerk/localizations@1.26.4-snapshot.09b5917

# @clerk/nextjs
npm i @clerk/nextjs@4.25.3-snapshot.09b5917

# @clerk/clerk-react
npm i @clerk/clerk-react@4.27.0-snapshot.09b5917

# @clerk/remix
npm i @clerk/remix@3.0.5-snapshot.09b5917

# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.12-snapshot.09b5917

# @clerk/shared
npm i @clerk/shared@0.24.3-snapshot.09b5917

# @clerk/types
npm i @clerk/types@3.55.0-snapshot.09b5917

desiprisg · 2023-10-09T10:00:03Z


 export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof ProfileCardContent>) => {
+ const { pages } = useOrganizationProfileContext();
+ const isMembersPageRoot = pages.routes[0].id === 'members';


Any chance this array is empty?

No chance; it always appends Clerk default routes.

❓ is there a way to use a constant or enum instead of hard-coding members?

desiprisg · 2023-10-09T10:01:07Z

- path='profile'
- flowStart
+ index={!isPredefinedPageRoot && index === 0}
+ path={!isPredefinedPageRoot && index === 0 ? undefined : customPage.url}


Can we extract this condition and give it some context with a good variable name?

panteliselef · 2023-10-11T14:00:57Z

-export type NavbarItemId = 'account' | 'security' | 'members' | 'settings';
-


If we are interested in keeping this we could do
exporttypeNavbarItemId='account'|'security'|'members'|'settings'|(string&{});

Does it make sense to keep this?

panteliselef · 2023-10-11T14:08:53Z

+
+ const portal = () => <>{nodes[index] ? createPortal(el.component, nodes[index] as Element) : null}</>;


🤔 Is it a common pattern to have a react hook returning JSX ?

I think it's not that common, but we need this to be updated on each render. Do you have any suggestions on different approaches?

panteliselef · 2023-10-11T14:29:00Z

+type UserProfileCustomPage = {
+ label: string;
+ url: string;
+ mountIcon: (el: HTMLDivElement) => void;
+ unmountIcon: (el?: HTMLDivElement) => void;
+ mount: (el: HTMLDivElement) => void;
+ unmount: (el?: HTMLDivElement) => void;
+};


🙃
Suggested change
typeUserProfileCustomPage={
label: string;
url: string;
mountIcon: (el: HTMLDivElement)=>void;
unmountIcon: (el?: HTMLDivElement)=>void;
mount: (el: HTMLDivElement)=>void;
unmount: (el?: HTMLDivElement)=>void;
};
typeUserProfileCustomPage=CustomPage

This is a different type. CustomPage is more generic for all three types of custom items (pages, links, reordering), which is why all of its properties except label are optional.

anagstef · 2023-10-13T14:35:59Z

!snapshot

clerk-cookie · 2023-10-13T14:37:40Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	0.30.3-snapshot.93fdf20
@clerk/chrome-extension	0.4.6-snapshot.93fdf20
@clerk/clerk-js	4.61.0-snapshot.93fdf20
@clerk/clerk-expo	0.19.8-snapshot.93fdf20
@clerk/fastify	0.6.13-snapshot.93fdf20
gatsby-plugin-clerk	4.4.14-snapshot.93fdf20
@clerk/localizations	1.26.4-snapshot.93fdf20
@clerk/nextjs	4.25.3-snapshot.93fdf20
@clerk/clerk-react	4.27.0-snapshot.93fdf20
@clerk/remix	3.0.5-snapshot.93fdf20
@clerk/clerk-sdk-node	4.12.12-snapshot.93fdf20
@clerk/shared	0.24.3-snapshot.93fdf20
@clerk/types	3.55.0-snapshot.93fdf20

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.30.3-snapshot.93fdf20

# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.4.6-snapshot.93fdf20

# @clerk/clerk-js
npm i @clerk/clerk-js@4.61.0-snapshot.93fdf20

# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.19.8-snapshot.93fdf20

# @clerk/fastify
npm i @clerk/fastify@0.6.13-snapshot.93fdf20

# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.4.14-snapshot.93fdf20

# @clerk/localizations
npm i @clerk/localizations@1.26.4-snapshot.93fdf20

# @clerk/nextjs
npm i @clerk/nextjs@4.25.3-snapshot.93fdf20

# @clerk/clerk-react
npm i @clerk/clerk-react@4.27.0-snapshot.93fdf20

# @clerk/remix
npm i @clerk/remix@3.0.5-snapshot.93fdf20

# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.12.12-snapshot.93fdf20

# @clerk/shared
npm i @clerk/shared@0.24.3-snapshot.93fdf20

# @clerk/types
npm i @clerk/types@3.55.0-snapshot.93fdf20

…n the custom pages in dev

…amically

…ionProfile

…onents

…ofileRoutes to be more readable

…mments

clerk-cookie · 2024-10-24T00:01:37Z

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

anagstef requested a review from a team as a code owner October 3, 2023 14:45

clerk-cookie added types clerk-js react labels Oct 3, 2023

anagstef force-pushed the js-621-rfc-poc branch from 4f147e1 to 19a6314Compare October 3, 2023 14:55

anagstef changed the title ~~Custom Pages for UserProfile~~Custom Pages for UserProfile componentOct 3, 2023

anagstef requested review from desiprisg and panteliselef October 3, 2023 14:59

anagstef self-assigned this Oct 3, 2023

dimkl reviewed Oct 4, 2023
View reviewed changes

Comment threadpackages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

panteliselef reviewed Oct 4, 2023
View reviewed changes

brkalow reviewed Oct 4, 2023
View reviewed changes

anagstef changed the title ~~Custom Pages for UserProfile component~~Custom Pages for UserProfile and OrganizationProfile componentsOct 5, 2023

anagstef requested review from LekoArts, dimkl and nikosdouvlis October 5, 2023 09:35

anagstef force-pushed the js-621-rfc-poc branch from fadab47 to 09b5917Compare October 6, 2023 10:18

desiprisg reviewed Oct 9, 2023
View reviewed changes

anagstef mentioned this pull request Oct 9, 2023
Custom Pages for <UserProfile /> and <OrganizationProfile />clerk/clerk-docs#404
Merged

panteliselef reviewed Oct 11, 2023
View reviewed changes

anagstef force-pushed the js-621-rfc-poc branch from 3e4efab to 198cfa1Compare October 12, 2023 14:44

anagstef changed the title ~~Custom Pages for UserProfile and OrganizationProfile components~~Custom Pages for <UserProfile /> and <OrganizationProfile /> componentsOct 12, 2023

anagstef force-pushed the js-621-rfc-poc branch from 93fdf20 to 593194cCompare October 16, 2023 09:51

desiprisg approved these changes Oct 16, 2023
View reviewed changes

anagstef force-pushed the js-621-rfc-poc branch from 6bef329 to 2053d26Compare October 24, 2023 01:26

clerk-cookie added the nextjs label Oct 24, 2023

Stefanos Anagnostou added 16 commits October 23, 2023 18:29

feat(clerk-js,clerk-react,types): Introduce Custom Pages in UserProfile
c731a72

fix(clerk-js): Fix top-level localizationKeys evaluation
b5d5e94

fix(clerk-react): Fix issue with useCustomPages when making changes o…
ee3d735
…n the custom pages in dev

chore(clerk-js): Update bundlewatch.config.json
02c870c

fix(clerk-react): Fix issue when changing the custom pages length dyn…
0bd423c
…amically

feat(clerk-react,clerk-js): Add support for custom pages in Organizat…
94d18d2
…ionProfile

fix(clerk-react,clerk-js): Resolve comments for custom pages
66c0af4

test(clerk-js): Add tests for OrganizationProfile custom pages
436eef3

fix(clerk-js): Add navbar menu for mobile on custom pages
9dd53b7

fix(clerk-react): Omit customPages property from React package comp…
ef379a8
…onents

refactor(clerk-js): Refactor the UserProfileRoutes and OrganizationPr…
6b4e6a8
…ofileRoutes to be more readable

refactor(clerk-react,types): Apply minor refactors suggested by PR co…
579ab9a
…mments

refactor(clerk-react,types): Resolve PR comments
4331688

chore(clerk-js): Lint OrganizationProfileRoutes
82ed0bc

fix(clerk-js): Fix custom icons props
21fbeda

fix(nextjs): Fix typings issue
3d8b86a

anagstef force-pushed the js-621-rfc-poc branch from 2053d26 to 3d8b86aCompare October 24, 2023 01:33

anagstef added this pull request to the merge queue Oct 24, 2023

Merged via the queue into main with commit 51861adOct 24, 2023

anagstef deleted the js-621-rfc-poc branch October 24, 2023 01:47

clerk-cookie mentioned this pull request Oct 24, 2023
Version Packages #1915
Merged

clerk locked as resolved and limited conversation to collaborators Oct 24, 2024

-<>
-<divref={nodeRef}></div>
-</>
+<divref={nodeRef}/>

		Page: ({ children }: PropsWithChildren<UserProfilePageProps>) => React.JSX.Element;
		Link: ({ children }: PropsWithChildren<UserProfileLinkProps>) => React.JSX.Element;

- Page: ({ children }: PropsWithChildren<UserProfilePageProps>)=>React.JSX.Element;
- Link: ({ children }: PropsWithChildren<UserProfileLinkProps>)=>React.JSX.Element;
+ Page: typeofUserProfilePage;
+ Link: typeofUserProfileLink;

		export type NavbarItemId = 'account' \| 'security' \| 'members' \| 'settings';


		const portal = () => <>{nodes[index] ? createPortal(el.component, nodes[index] as Element) : null}</>;

-typeUserProfileCustomPage={
- label: string;
- url: string;
- mountIcon: (el: HTMLDivElement)=>void;
- unmountIcon: (el?: HTMLDivElement)=>void;
- mount: (el: HTMLDivElement)=>void;
- unmount: (el?: HTMLDivElement)=>void;
-};
+typeUserProfileCustomPage=CustomPage

Uh oh!

Conversation

anagstef commented Oct 3, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

UserProfile

Custom Pages

Custom Links

Advanced

Reordering Default Routes

Using custom pages with the UserButton component

OrganizationProfile

Custom Pages

Custom Links

Advanced

Reordering Default Routes

Using custom pages with the OrganizationSwitcher component

Caveats

Checklist

Type of change

Packages affected

Uh oh!

changeset-botBot commented Oct 3, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

anagstef commented Oct 3, 2023

Uh oh!

clerk-cookie commented Oct 3, 2023

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brkalow left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anagstef commented Oct 5, 2023

Uh oh!

clerk-cookie commented Oct 5, 2023

Uh oh!

anagstef commented Oct 6, 2023

Uh oh!

clerk-cookie commented Oct 6, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anagstef commented Oct 3, 2023•
edited
Loading

changeset-botBot commented Oct 3, 2023•
edited
Loading