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. Learn more about the <UserProfile/> component, what it does, and how it is used by reading our User Profile component guide.

Usage

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>

Interested in using path-based routing instead of the default hash-based routing? Check out the example code here.

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