UserProfile

The <UserProfile> component provides a tabbed account management interface: profile editing, security (MFA, passkeys), active sessions, connected accounts, and organisation memberships. It requires apiUrl on your auth provider for Customer API calls.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { UserProfile } from "@wocha/ui";
import "@wocha/ui/styles.css";

Basic usage

<UserProfile
  sections={["profile", "security", "sessions", "connections", "organisations"]}
  passwordSettingsUrl="/account/password"
/>

Props

Prop	Type	Default	Description
`appearance`	`WochaAppearance`	—	Visual customisation
`className`	`string`	—	Additional class name
`sections`	`ProfileSection[]`	All built-in sections	Sections to display
`activeSection`	`ProfileNavId`	`"profile"`	Currently active section
`onSectionChange`	`(section) => void`	—	Called when the user changes section
`onSave`	`(data) => void`	—	Called after profile save
`passwordSettingsUrl`	`string`	—	URL for hosted password change flow
`hideNavigation`	`boolean`	`false`	Hide internal tab navigation (use with `UserPortal`)
`fallback`	`ReactNode`	—	Shown while profile data is loading
`children`	`ReactNode`	—	Composition children (`UserProfile.Page`, `UserProfile.Link`)

ProfileSection is "profile" | "security" | "sessions" | "connections" | "organisations".

Composition API

Add custom sidenav pages alongside built-in sections:

<UserProfile>
  <UserProfile.Page label="Billing" url="billing" icon={<CreditCard />}>
    <BillingPage />
  </UserProfile.Page>
  <UserProfile.Link label="Docs" url="https://docs.example.com" icon={<BookIcon />} />
</UserProfile>

Reorder built-in sections by using section keys as labels:

<UserProfile>
  <UserProfile.Page label="security" />
  <UserProfile.Page label="profile" />
</UserProfile>

Theming

<WochaThemeProvider
  appearance={{
    userProfile: {
      variables: { "--wocha-color-card": "#1a1a1a" },
    },
  }}
>
  <UserProfile />
</WochaThemeProvider>

Framework notes

Framework	Requirement
React SPA	Set `apiUrl` in `WochaProvider` config
Next.js	Pass `apiUrl` to `WochaSessionProvider` and `WochaThemeProvider sdk="nextjs"`

UserButton — opens profile in modal mode
UserPortal — sidebar layout wrapper