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

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
      publishableKey="clerk-pub-key"
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):

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
Ensure the UserProfile component renders on all subpaths of the path.

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

With Next.js, use an optional catch-all route like pages/user/[[...index]].js
With React Router >= 6, use a wildcard path like /user/*
With React Router <= 5, use a wildcard path like /user/?.*) or simply /user

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="{{fapi}}"
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

Name	Type	Description
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 path where the component is mounted when path-based routing is used. -e.g. /user-profile. This prop is ignored in hash and virtual based routing.
additionalOAuthScopes?	Record<OAuthProvider, string[]>	Specify additional scopes per OAuth provider that your users would be prompted to approve if not already done so e.g. `<UserProfile additionalOAuthScopes={{google: ['foo', 'bar'], github: ['qux']}} />`

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.