Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

<UserProfile />

A full-featured account management component

Overview

The <UserProfile/> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security settings.

The <UserProfile/> comes with built-in support for managing the following:

  • Name and profile image
  • Email address and phone number
  • Social sign-in accounts
  • Multifactor authentication
  • Trusted devices

Control the look and feel of the <UserProfile/> component and match it to your application brand using the appearance prop.

<UserProfile /> component

Usage

Make sure you've followed the quickstart guide for Clerk Next.js or Clerk React before running the snippets below.

Mounting in your app

Once you set up your desired authentication options and have signed in as a user, you can render the <UserProfile/> component in your app. The theme configuration (look and feel) can be completely customized using the appearance prop.

1
import {
2
ClerkProvider,
3
RedirectToSignIn,
4
SignedIn,
5
SignedOut,
6
UserProfile
7
} from "@clerk/nextjs";
8
9
function MyApp({ pageProps }) {
10
return (
11
<ClerkProvider {...pageProps}>
12
<SignedIn>
13
{/* Signed in users will see their user profile */}
14
<UserProfile />
15
</SignedIn>
16
<SignedOut>
17
<RedirectToSignIn />
18
</SignedOut>
19
</ClerkProvider>
20
);
21
}
22
23
export default MyApp;
1
import {
2
ClerkProvider,
3
SignedIn,
4
SignedOut,
5
UserProfile,
6
RedirectToSignIn,
7
} from "@clerk/clerk-react";
8
import { useNavigate, BrowserRouter } from "react-router-dom";
9
10
function AppWithRoutes() {
11
// Get navigate method from the router
12
// This example uses 'react-router-dom'
13
const navigate = useNavigate();
14
15
return (
16
// Pass the navigate method to ClerkProvider
17
<ClerkProvider
18
frontendApi={"[your-frontend-api]"}
19
navigate={(to) => navigate(to)}
20
>
21
{/* Signed in users will see their user profile,
22
unauthenticated users will be redirected */}
23
<SignedIn>
24
<UserProfile />
25
</SignedIn>
26
<SignedOut>
27
<RedirectToSignIn />
28
</SignedOut>
29
</ClerkProvider>
30
);
31
}
32
33
function App() {
34
return (
35
<BrowserRouter>
36
<AppWithRoutes />
37
</BrowserRouter>
38
);
39
}
40
41
export default App;
1
<html>
2
<body>
3
<div id="user-profile"></div>
4
5
<script>
6
const el = document.getElementById("user-profile");
7
// Mount the pre-built Clerk UserProfile component
8
// in an HTMLElement on your page.
9
window.Clerk.mountUserProfile(el);
10
</script>
11
</body>
12
</html>

Using path-based routing

The mounted <UserProfile/> component uses hash-based routing by default: as the user goes through the different pages, the hash portion of the URL will update to reflect the current page (eg: example.com/#/account/first-name).

With additional configuration, the mounted component can use path-based routing instead (eg: example.com/account/first-name):

  1. If using Clerk React, ensure your ClerkProvider component has its navigate prop configured.
  2. Add the path and routing props to your UserProfile component. Set path to the path where the component renders
  3. Ensure the UserProfile component renders on all subpaths of the path.

To render the <UserProfile/> on all subpaths of the chosen path:

1
// In _app.jsx:
2
// The Next.js root component, wrapped by ClerkProvider
3
import "../styles/globals.css";
4
import { ClerkProvider } from "@clerk/nextjs";
5
import { useRouter } from "next/router";
6
7
function MyApp({ Component, pageProps }) {
8
// Get push method from the Next router
9
const { push } = useRouter();
10
11
return (
12
// Pass the push method to ClerkProvider
13
// along with spreading pageProps
14
<ClerkProvider
15
{...pageProps}
16
navigate={to => push(to)}
17
>
18
<Component {...pageProps} />
19
</ClerkProvider>
20
);
21
}
22
23
export default MyApp;
24
25
26
// In pages/user/[[..index]].jsx
27
// This is your catch all route that renders the UserProfile component
28
import { UserProfile } from "@clerk/nextjs";
29
30
export default function UserProfilePage() {
31
// Finally, mount the UserProfile component under "/user" 🎉
32
// Don't forget to set the "routing" and "path" props
33
return <UserProfile routing="path" path="/user" />;
34
}
1
import {
2
ClerkProvider, SignedIn, SignedOut,
3
UserProfile, RedirectToSignIn,
4
} from "@clerk/clerk-react";
5
import {
6
useNavigate, Switch, Route,
7
BrowserRouter, Link,
8
} from "react-router-dom";
9
10
function AppWithRoutes() {
11
// Get the navigate method from
12
// the router your app is using. For this
13
// example we will use 'react-router-dom'.
14
const navigate = useNavigate();
15
16
return (
17
// Pass the navigate method to ClerkProvider
18
<ClerkProvider
19
frontendApi={"[your-frontend-api]"}
20
navigate={(to) => navigate(to)}
21
>
22
<Switch>
23
{/* Define a /user route.
24
If a user is signed in, they will see
25
the user profile, otherwise thet will get
26
redirected to the sign in page */}
27
<Route path="/user">
28
<SignedIn>
29
<UserProfile routing="path" path="/user" />
30
</SignedIn>
31
<SignedOut>
32
<RedirectToSignIn />
33
</SignedOut>
34
</Route>
35
{/* Home route that links to user profile */}
36
<Route>
37
<Link to="/user">
38
<h1>Go to user profile</h1>
39
</Link>
40
</Route>
41
</Switch>
42
</ClerkProvider>
43
);
44
}
45
46
function App() {
47
return (
48
<BrowserRouter>
49
<AppWithRoutes />
50
</BrowserRouter>
51
);
52
}
53
54
export default App;
1
<html>
2
<body>
3
<div id="user-profile"></div>
4
5
<script>
6
const el = document.getElementById("user-profile");
7
// Mount the pre-built Clerk UserProfile component
8
// in an HTMLElement on your page.
9
window.Clerk.mountUserProfile(el, {
10
routing: 'path',
11
path: '/user',
12
});
13
</script>
14
</body>
15
</html>

Props

NameTypeDescription
appearance?Theme

Controls the overall look and feel

routing?RoutingStrategy

The routing strategy for your pages. Supported values are: hash: (default) Hash based routing. path: Path based routing. virtual: Virtual based routing.

path?string

The root URL where the component is mounted on.

hideNavigation?boolean

Hides the default navigation bar. Can be used when a custom navigation bar is built.

only?string

Renders only a specific page of the UserProfile component. Supported values are:

  • account: User account page.
  • security: User security page.

Customization

The <UserProfile/> component can be highly customized through the appearance prop and can be styled using CSS Modules, Tailwind, inline CSS objects, or global CSS.

Was this helpful?

Clerk © 2022