<UserProfile /> component
The <UserProfile /> component is used to render a beautiful, full-featured account management UI that allows users to manage their profile and security 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' | 'virtual'- Description
The routing strategy for your pages.
- Name
path- Type
string- Description
The path where the component is mounted on when path-based routing is used e.g. /sign-in.
- Name
additionalOAuthScopes- Type
object- Description
Specify additional scopes per OAuth provider that your users would like to provide if not already approved.
e.g.{google: ['foo', 'bar'], github: ['qux']}.
You can embed the <UserProfile /> component using the Next.js optional catch-all route. This allows you to redirect the user inside your application.
import { UserProfile } from "@clerk/nextjs";
const UserProfilePage = () => (
<UserProfile path="/user-profile" routing="path" />
);
export default UserProfilePage;import { UserProfile } from "@clerk/nextjs";
const UserProfilePage = () => (
<UserProfile path="/user-profile" routing="path" />
);
export default UserProfilePage;import { UserProfile } from "@clerk/clerk-react";
const UserProfilePage = () => (
<UserProfile path="/user-profile" routing="path" />
);
export default UserProfilePage;import { UserProfile } from "@clerk/remix";
export default function UserProfilePage() {
return <UserProfile path="/user" routing="path" />;
}Usage with JavaScript
The following methods available on an instance of the Clerk class are used to render and control the <UserProfile /> component:
The following examples assume that you have followed the quickstart 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 clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();
document.getElementById("app").innerHTML = `
<div id="user-profile"></div>
`;
const userProfileDiv =
document.getElementById("user-profile");
clerk.mountUserProfile(userProfileDiv);<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
const userProfileDiv =
document.getElementById('user-profile');
Clerk.mountUserProfile(userProfileDiv);
});
</script>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 clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv =
document.getElementById('user-profile');
clerk.mountUserProfile(userProfileDiv);
// ...
clerk.unmountUserProfile(userProfileDiv);<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
const userProfileDiv =
document.getElementById('user-profile');
Clerk.mountUserProfile(userProfileDiv);
// ...
Clerk.unmountUserProfile(userProfileDiv);
});
</script>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 clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv =
document.getElementById('user-profile');
clerk.openUserProfile(userProfileDiv);<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
const userProfileDiv =
document.getElementById('user-profile');
Clerk.openUserProfile(userProfileDiv);
});
</script>closeUserProfile()
Closes the user profile overlay.
function closeUserProfile(): void;import Clerk from '@clerk/clerk-js';
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();
document.getElementById('app').innerHTML = `
<div id="user-profile"></div>
`
const userProfileDiv =
document.getElementById('user-profile');
clerk.closeUserProfile(userProfileDiv);<!-- Add a <div id="user-profile"> element to your HTML -->
<div id="user-profile"></div>
<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener("load", async function () {
await Clerk.load();
const userProfileDiv =
document.getElementById('user-profile');
Clerk.closeUserProfile(userProfileDiv);
});
</script>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 sidebar. For more information, refer to the Custom Pages documentation.
Feedback
Last updated on