3.0.0
Component Reference
API Reference
Learning Center
<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:- Name and profile image management
- Email address and phone number management
- Social sign-in account management
- Multi-factor authentication management
- Trusted device management
Control the look and feel of the
<UserProfile/> component and match it to your using the Theme Settings, theming props or plain CSS.Usage
Make sure you've followed the installation guide for Clerk React or ClerkJS before running the snippets below.
Mounting in your app
Once you set up the desired functionality and look and feel for the
<UserProfile/> component, all that's left is to render it inside your page. The default rendering is simple but powerful enough to cover most use-cases. The theme configuration (look and feel) that you've set up on the Theme page will work out of the box.Clerk React
ClerkJS
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 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
{/* If a user is signed in, they will see
23
the user profile, otherwise thet will get
24
redirected to the sign in page */}
25
<SignedIn>
26
<UserProfile />
27
</SignedIn>
28
<SignedOut>
29
<RedirectToSignIn />
30
</SignedOut>
31
</ClerkProvider>
32
);
33
}
34
​
35
function App() {
36
return (
37
<BrowserRouter>
38
<AppWithRoutes />
39
</BrowserRouter>
40
);
41
}
42
​
43
export default App;
44
​
Copied!
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>
Copied!
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.
- 2.Add the path and routing props to your UserProfile component. Set path to the path where the component renders
When using path-based routing, the
<UserProfile/> component must render on path and all of it's subpaths:Clerk React
Clerk Next
ClerkJS
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;
Copied!
1
// In _app.jsx:
2
// Your usual NextJS root component, wrapped by ClerkProvider
3
import '../styles/globals.css';
4
import { ClerkProvider } from '@clerk/clerk-react';
5
import { useRouter } from 'next/router';
6
​
7
function MyApp({ Component, pageProps }) {
8
// Get the navigate/push method from
9
// the NextJS router
10
const { push } = useRouter();
11
​
12
return (
13
// Pass the push method to ClerkProvider
14
<ClerkProvider
15
frontendApi={"[your-frontend-api]"}
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]].tsx
27
// This is your catch all route that renders the UserProfile component
28
import { UserProfile } from '@clerk/clerk-react';
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
}
Copied!
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>
Copied!
Props
Name
Description
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 Instance settings on the Theme page. This document will be updated soon with all necessary details.Last modified 1mo ago