<UserProfile />

User profile settings

<UserProfile /> is the account settings surface. It combines the profile, email, linked account, API key, and delete-account flows into one editable component.

Most apps render it through <UserProfileHost />, which opens the dialog when the user selects their profile from <UserButton />.

Quick start

In the default scaffold, the host is mounted once in the root layout:

You can also render the profile directly inside your own settings page:

What it includes

  • Profile info – update name and avatar.
  • Email settings – show and manage the user’s email state.
  • Linked accounts – connect and disconnect OAuth providers.
  • API keys – shown when apiKeys: true is enabled.
  • Delete account – destructive account deletion flow.

Convex behavior

Profile updates use Convex mutations and optimistic updates where immediate feedback helps, such as name and avatar changes. Server-loaded initial data can be used to avoid flicker while the live Convex query hydrates.

Props

  • <UserButton /> – opens the profile dialog from the app header.
  • <UserProfileHost /> – URL-backed dialog host for the profile.
  • <ApiKeys /> – API key management section shown when enabled.