<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.
1import {2ClerkProvider,3SignedIn,4SignedOut,5UserProfile,6RedirectToSignIn,7} from "@clerk/clerk-react";8import { useNavigate, BrowserRouter } from "react-router-dom";910function AppWithRoutes() {11// Get the navigate method from12// the router your app is using. For this13// example we will use 'react-router-dom'.14const navigate = useNavigate();1516return (17// Pass the navigate method to ClerkProvider18<ClerkProvider19frontendApi={"[your-frontend-api]"}20navigate={(to) => navigate(to)}21>22{/* If a user is signed in, they will see23the user profile, otherwise thet will get24redirected to the sign in page */}25<SignedIn>26<UserProfile />27</SignedIn>28<SignedOut>29<RedirectToSignIn />30</SignedOut>31</ClerkProvider>32);33}3435function App() {36return (37<BrowserRouter>38<AppWithRoutes />39</BrowserRouter>40);41}4243export default App;44
1<html>2<body>3<div id="user-profile"></div>45<script>6const el = document.getElementById("user-profile");7// Mount the pre-built Clerk UserProfile component8// in an HTMLElement on your page.9window.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
):
- If using Clerk React, ensure your ClerkProvider component has its navigate prop configured.
- 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:
1import {2ClerkProvider, SignedIn, SignedOut,3UserProfile, RedirectToSignIn,4} from "@clerk/clerk-react";5import {6useNavigate, Switch, Route,7BrowserRouter, Link,8} from "react-router-dom";910function AppWithRoutes() {11// Get the navigate method from12// the router your app is using. For this13// example we will use 'react-router-dom'.14const navigate = useNavigate();1516return (17// Pass the navigate method to ClerkProvider18<ClerkProvider19frontendApi={"[your-frontend-api]"}20navigate={(to) => navigate(to)}21>22<Switch>23{/* Define a /user route.24If a user is signed in, they will see25the user profile, otherwise thet will get26redirected 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}4546function App() {47return (48<BrowserRouter>49<AppWithRoutes />50</BrowserRouter>51);52}5354export default App;
1// In _app.jsx:2// Your usual NextJS root component, wrapped by ClerkProvider3import '../styles/globals.css';4import { ClerkProvider } from '@clerk/clerk-react';5import { useRouter } from 'next/router';67function MyApp({ Component, pageProps }) {8// Get the navigate/push method from9// the NextJS router10const { push } = useRouter();1112return (13// Pass the push method to ClerkProvider14<ClerkProvider15frontendApi={"[your-frontend-api]"}16navigate={to => push(to)}17>18<Component {...pageProps} />19</ClerkProvider>20);21}2223export default MyApp;242526// In pages/user/[[..index]].tsx27// This is your catch all route that renders the UserProfile component28import { UserProfile } from '@clerk/clerk-react';2930export default function UserProfilePage() {31// Finally, mount the UserProfile component under "/user" 🎉32// Don't forget to set the "routing" and "path" props33return <UserProfile routing='path' path='/user' />;34}
1<html>2<body>3<div id="user-profile"></div>45<script>6const el = document.getElementById("user-profile");7// Mount the pre-built Clerk UserProfile component8// in an HTMLElement on your page.9window.Clerk.mountUserProfile(el, {10routing: 'path',11path: '/user',12});13</script>14</body>15</html>
For more information, see Routing.
Props
Name | Type | 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:
|
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.