<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.

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

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):

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:

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
// 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
}

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>

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: 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.