<UserProfile /> component
The <UserProfile /> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile, security, and billing settings.
Properties
All props are optional.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
routing- Type
'hash' | 'path'- Description
The routing strategy for your pages. Defaults to
'path'for frameworks that handle routing, such as Next.js and Remix. Defaults tohashfor all other SDK's, such as React.
- Name
path- Type
string- Description
The path where the component is mounted on when
routingis set topath. It is ignored in hash-based routing. For example:/user-profile.
- Name
additionalOAuthScopes- Type
object- Description
Specify additional scopes per OAuth provider that your users would like to provide if not already approved. For example:
{google: ['foo', 'bar'], github: ['qux']}.
- Name
customPages- Type
[]- Description
An array of custom pages to add to the user profile. Only available for the . To add custom pages with React-based SDK's, see the dedicated guide.
- Name
fallback?- Type
ReactNode- Description
An optional element to be rendered while the component is mounting.
The <UserProfile /> component must embedded using the Next.js optional catch-all route in order for the routing to work.
import { UserProfile } from '@clerk/nextjs'
const UserProfilePage = () => <UserProfile />
export default UserProfilePageimport { UserProfile } from '@clerk/clerk-react'
const UserProfilePage = () => <UserProfile />
export default UserProfilePage---
import { UserProfile } from '@clerk/astro/components'
---
<UserProfile />import { UserProfile } from '@clerk/clerk-expo/web'
export default function UserProfilePage() {
return <UserProfile />
}import { UserProfile } from '@clerk/remix'
export default function UserProfilePage() {
return <UserProfile />
}import { UserProfile } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/user-profile')({
component: UserProfilePage,
})
function UserProfilePage() {
return <UserProfile />
}<script setup>
import { UserProfile } from '@clerk/vue'
</script>
<template>
<UserProfile />
</template>Usage with JavaScript
The following methods available on an instance of the class are used to render and control the <UserProfile /> component:
The following examples assume that you have followed the in order to add Clerk to your JavaScript application.
mountUserProfile()
Render the <UserProfile /> component to an HTML <div> element.
function mountUserProfile(node: HTMLDivElement, props?: UserProfileProps): void- Name
node- Type
HTMLDivElement- Description
The
<div>element used to render in the<UserProfile />component
- Name
props?- Type
- UserProfileProps
- Description
The properties to pass to the
<UserProfile />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv = document.getElementById('user-profile')
clerk.mountUserProfile(userProfileDiv)unmountUserProfile()
Unmount and run cleanup on an existing <UserProfile /> component instance.
function unmountUserProfile(node: HTMLDivElement): void- Name
node- Type
HTMLDivElement- Description
The container
<div>element with a rendered<UserProfile />component instance.
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv = document.getElementById('user-profile')
clerk.mountUserProfile(userProfileDiv)
// ...
clerk.unmountUserProfile(userProfileDiv)openUserProfile()
Opens the <UserProfile /> component as an overlay at the root of your HTML body element.
function openUserProfile(props?: UserProfileProps): void- Name
props?- Type
- UserProfileProps
- Description
The properties to pass to the
<UserProfile />component
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv = document.getElementById('user-profile')
clerk.openUserProfile(userProfileDiv)closeUserProfile()
Closes the user profile overlay.
function closeUserProfile(): voidimport { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv = document.getElementById('user-profile')
clerk.closeUserProfile(userProfileDiv)Customization
To learn about how to customize Clerk components, see the customization documentation.
In addition, you also can add custom pages and links to the <UserProfile /> navigation sidenav. For more information, refer to the Custom Pages documentation.
Feedback
Last updated on