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

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

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.