<ManageAccount/> component
<ManageAccount /> is the fuller account settings surface. It covers profile details, security, sessions, and other user-owned settings.
Usage
The following example shows a basic usage of <ManageAccount />.
import { ManageAccount } from '@wacht/tanstack-router';export default function ManageAccountUsage() { return ( <> <ManageAccount /> </> );}Overview
Mount it on a dedicated account page or inside a dialog when the user needs the full account management surface instead of the compact menu from <UserButton />.
The component is not just a profile form. It is the complete account workspace for the signed-in user, built out of several tabs that appear or disappear based on deployment settings.
Behavior
The component waits for the user data to load, then renders tabbed sections for profile, email, phone, social connections, security, and sessions based on the deployment settings. Tabs only appear when the current deployment actually supports them, so the surface stays aligned with the current auth configuration.
Each tab is backed by a separate section component, which is why the page can stay compact at the top and still cover a large account surface without turning into one long form.
The active tab lives in local component state, so the user can move between sections without losing the values they already changed in the current tab.
Tabs
| Tab | What it covers |
|---|---|
| Profile | The profile section handles the user’s name, username, and profile picture. It is the first section the component opens because it is the most common account edit path. |
The email section is shown only when email is enabled for the deployment. It manages the user’s email addresses and the verification flow around them. | |
| Phone | The phone section appears only when phone auth is enabled. It follows the same pattern as email: show the data, manage the verification state, and keep the user inside the same account surface. |
| Connections | The connections section only appears when the deployment has social connections turned on. It is where linked external identities are shown and managed. |
| Security | The security section is conditional on the deployment’s password, authenticator, phone OTP, or backup-code settings. It is where the account’s password and second-factor controls live. |
| Sessions | The sessions section is always available. It exposes the active session list so the user can review or end browser sessions from the same page. |
Notes
If the deployment disables a feature, the corresponding tab never appears. That keeps the page honest about what the current app can actually manage.
The page is intentionally split across sections because the implementation is split the same way.