Skip to main content

Stop building account management

<UserProfile/> centralizes profile, security, billing, and API keys in one component.

Start buildingView docs

Account

Manage your account info.

Profile

Security

Billing

API Keys

Custom Page

Secured by

Profile details

Profile
User avatar

Andy Smith

Update profile

Email addresses

andy@gmail.com

Primary

Add email address

Phone number

+1 (555) 123-4567

Primary

Add phone number

Connected accounts

Google

·

andy@gmail.com

Connect account

Use saved passkey for Acme

Touch ID to continue

User profile management

Give users control over their profiles.

User profile management

Full profile control

Ensure accurate, up-to-date profiles across every session.

  • Profile details prefilled from sign-up
  • Fully editable with real-time validation
  • Synced across all active sessions
User profile management

Support for multiple contact identifiers

Allow users to configure ways to sign in, verify their account, and recover access.

User profile management

OAuth account management

Built-in tools for users to link and manage third-party identity providers.

  • Link or unlink OAuth providers
  • View connected accounts at a glance
  • Real-time auth state synchronization

Security controls

Used to configure account protections.

Security controls

Password management

Guided password updates with built-in validation and session safety.

Security controls

Passkeys verification

Users can configure passkeys to sign in without passwords. Registration and lifecycle management are handled automatically.

Security controls

Two-step verification

Users can configure multi-factor authentication for added account protection, manage recovery codes, and complete a guided setup flow.

Security controls

Device management

Active devices and sessions can be viewed and managed in one place.

  • Revoke access from specific devices
  • Sync updates in real time

Billing controls

When billing is enabled, subscriptions, payments, and statements are fully manageable.

Billing controls

Subscription management

<UserProfile /> automatically includes subscription management.

  • View current subscription
  • Upgrade or downgrade plans
  • Start trials and change plans
Billing controls

Payment methods

Payment methods can be securely added, updated, and removed from the account.

  • Multiple payment methods supported
  • Automatic card validation
  • Card metadata handled
Billing controls

Statement and payment history

Itemized statements, past payments, and transaction status are all easily available.

API Key controls

When enabled, allow users to control to create, rotate, and revoke API keys.

API Key controls

API Keys management

Everything needed to create, monitor, and control API access is available from a single interface.

  • Generate scoped API keys
  • Reveal keys securely
  • View active keys and usage
  • Rotate or revoke access instantly

Add custom links and pages

Extend Clerk's management UI by adding custom links, pages and styles.

Customizable to your brand

Modify the appearance of the <UserProfile /> component with custom CSS, and pass props to override default behavior.

Account

Manage your account info.

Profile

Security

Billing

API Keys

Custom Page

Secured by

Profile details

Profile
User avatar

Andy Smith

Update profile

Email addresses

andy@gmail.com

Primary

Add email address

Phone number

+1 (555) 123-4567

Primary

Add phone number

Connected accounts

Google

·

andy@gmail.com

Connect account

Use saved passkey for Acme

Touch ID to continue

Implement a user profile in minutes

Drop-in <UserProfile />

Build secure, scalable authentication in minutes with Clerk's SDKs. Drop in pre-built UI components and onboard users instantly, without friction or security concerns

Start buildingExplore all frameworks

Get started today

Next.js
React
TanStack React Start
Expo
iOS
Android

Complete user management

Full feature set of <UserProfile />

User profile management

  • Auto-populated profile details
  • Multiple contact methods
  • Connected OAuth/SSO accounts
  • Account verification and recovery
  • Data synced across sessions

Security controls

  • Validated password updates
  • Passkey authentication
  • Two-step verification
  • Account recovery codes
  • Active device and session tracking
  • Device-level access revocation

Billing controls

  • Subscription lifecycle management
  • Upgrades, downgrades, and trials
  • Multiple payment methods
  • Automatic card validation
  • Statements and payment history
  • Transaction and status visibility

API Key control

  • Scoped API key generation
  • Secure key reveal and storage
  • Active key visibility and search
  • Key usage and last-used tracking
  • Instant key rotation and revocation

Clerk API

Custom flows

Want full control over your onboarding experience? Our headless APIs give you the flexibility to build exactly what you need.

View custom flows documentation
import { useUser } from "@clerk/react"
import { Avatar } from "@base-ui-components/react/avatar"
import { Button } from "@base-ui-components/react/button"
import { Field } from "@base-ui-components/react/field"
import { Form } from "@base-ui-components/react/form"

export default function CustomUserProfile() {
  const { user } = useUser()

  return (
    <Form
      onFormSubmit={async values => {
        await user.update({
          firstName: values.firstName,
          lastName: values.lastName,
        })
      }}
    >
      <Avatar.Root>
        <Avatar.Image
          src={user.imageUrl}
          alt="Avatar"
          width={48}
          height={48}
        />
      </Avatar.Root>

      <h3>{user.fullName}</h3>
      <p>{user.primaryEmailAddress?.emailAddress}</p>

      <Field.Root name="firstName">
        <Field.Label>First name</Field.Label>
        <Field.Control defaultValue={user.firstName ?? ""} />
      </Field.Root>

      <Field.Root name="lastName">
        <Field.Label>Last name</Field.Label>
        <Field.Control defaultValue={user.lastName ?? ""} />
      </Field.Root>

      <Button type="submit">Save changes</Button>
    </Form>
  )
}