Custom Pages in User Profile

Clerk provides a fully pre-built User Profile component that offers user a self-service portal for user functionality like managing emails, OAuth connections, signed in devices, etc. But if you want to provide additional user-specific functionality, instead of building a separate UI, you can build that interface directly into Clerk’s User Profile!

Let’s start with the out-of-the-box UserProfile component.

User Profile Component1
<UserProfile />

We can create a new page simply like this

New User Profile Page1
<UserProfile>  // Pass the page as children
2
  <UserProfile.Page
3
		label="New page"
4
		url="new"  // URL for the page within Clerk's internal routing
5
		labelIcon={<FaStar />}
6
	>
7
    New Page
8
  </UserProfile.Page>
9
</UserProfile>

We can use this page for things like subscription plans

User Profile page for Subscription plan1
<UserProfile>
2
  <UserProfile.Page label="Plan" url="plan" labelIcon={<FaStar />}>
3
    <div>
4
      <h3 className="text-3xl font-semibold">Plans</h3>
5
      <p className=" text-gray-600">Manage your subscription plans</p>
6
      <h4 className="mt-8 border-b py-1">Personal subscription</h4>
7
      <p className="px-4 py-2">You are currently on the free plan.</p>
8
      <button className="rounded border bg-blue-300 p-2 px-4 py-2">
9
        Upgrade to Pro for $10/month
10
      </button>
11
    </div>
12
  </UserProfile.Page>
13
</UserProfile>

We can access state and context in these components as expected

Custom pages can access state and context1
<UserProfile>
2
  <UserProfile.Page label="Plan" url="plan" labelIcon={<FaStar />}>
3
    <PlanPage />
4
  </UserProfile.Page>
5
</UserProfile>
6

7
...
8

9
const PlanPage = () => {
10
  const { isPro } = useUser(); // example custom hook
11

12
  return (
13
    <div>
14
      <h3 className="text-3xl font-semibold">Plans</h3>
15
      <p className=" text-gray-600">Manage your subscription plans</p>
16
      <h4 className="mt-8 border-b py-1">Personal subscription</h4>
17
      <p className="px-4 py-2">
18
        You are currently on the {isPro ? `pro` : `free`} plan.
19
      </p>
20
      {isPro ? (
21
        <button className="rounded border bg-gray-50 px-4 py-2">
22
          Downgrade
23
        </button>
24
      ) : (
25
        <button className="rounded border bg-blue-300 p-2 px-4 py-2">
26
          Upgrade to Pro for $10/month
27
        </button>
28
      )}
29
    </div>
30
  );
31
};

In Next.js App Router, <UserProfile> and <UserProfile.Page> has to be rendered in a client component. However, we can use a server component to render the page inside through render props (lifting content up).

Custom pages can be server components1
// profile.tsx (client component)
2
"use client"
3

4
export const CustomUserProfile = (props: { PlanPage: React.ReactNode }) => {
5
  return (
6
    <UserProfile>
7
      <UserProfile.Page label="Plan" url="plan" labelIcon={<FaStar />}>
8
        {props.PlanPage}
9
      </UserProfile.Page>
10
    </UserProfile>
11
  );
12
};
13

14
// page.tsx (server component)
15
export default async function Page() {
16
  const { isPro } = await getSubscription();  // data fetching on the server
17

18
  return (
19
    <main>
20
      <CustomUserProfile
21
        PlanPage={
22
          <div>
23
            <h3 className="text-3xl font-semibold">Plans</h3>
24
            <p className=" text-gray-600">Manage your subscription plans</p>
25
            <h4 className="mt-8 border-b py-1">Personal subscription</h4>
26
            <p className="px-4 py-2">
27
              You are currently on the {isPro ? `pro` : `free`} plan.
28
            </p>
29
            {isPro ? (
30
              <button className="rounded border bg-gray-50 px-4 py-2">
31
                Downgrade
32
              </button>
33
            ) : (
34
              <button className="rounded border bg-blue-300 p-2 px-4 py-2">
35
                Upgrade to Pro for $10/month
36
              </button>
37
            )}
38
          </div>
39
        }
40
      />
41
    </main>
42
  );
43
}

Custom Pages can also be added to the Organization Profile in the same way.

Custom pages in Organization Profile1
<OrganizationProfile>
2
  <OrganizationProfile.Page label="New page" url="new" labelIcon={<FaStar />}>
3
    New Page
4
  </OrganizationProfile.Page>
5
</OrganizationProfile>;

Custom pages allows you to extend the already powerful User and Organization Profile components with additional features specific to your use case. Combined with the appearance prop, this level of customization eliminates the effort spent into building entirely custom UIs for user and org management to support extra functionality.

Check out the full documentation on Custom Pages.

Drop-in, Pre-built, Customizable UI

Clerk’s components work out of the box, handle every authentication and user management workflow, and are highly customizable and extendable. Learn more about Clerk’s Components, and get started with authentication in your Next.js app within minutes!

Need help?

Guide

Guide

Custom Pages in User Profile

Drop-in, Pre-built, Customizable UI

Start now,
no strings attached

Pricing built for
businesses of all sizes.

Newsletter!

Guide

Guide

Custom Pages in User Profile

Start now,no strings attached

Pricing built for.css-qa8l2m{color:var(--chakra-colors-primary-500);}businesses of all sizes.

Newsletter!

Start now,
no strings attached

Pricing built for
businesses of all sizes.