--- title: Account & profile description: User profile, sessions, email/password, and 2FA management UI. --- Signed-in account management: profile editing, image upload, email change, password reset, 2FA enrollment, session list, and the user button. ### `ConvexChangeEmailForm` **Props** | Name | Type | Optional | Description | | ------------------- | --------------------------------- | -------- | ------------------------------------------------------------------------ | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexChangeEmailFormClassNames` | Yes | | | `copy` | `ConvexChangeEmailFormCopy` | Yes | | | `currentEmail` | `string \| None` | Yes | The user's current email, displayed read-only above the new-email field. | | `onRequested` | `(newEmail: string) => void` | Yes | | | `verifyCallbackUrl` | `string` | Yes | Absolute URL of the verify-email page on this app. The app | | appends | **classNames keys** | Key | Type | | -------------- | -------- | | `errorState` | `string` | | `field` | `string` | | `form` | `string` | | `input` | `string` | | `label` | `string` | | `root` | `string` | | `submitButton` | `string` | | `successState` | `string` | **copy keys** | Key | Type | | ---------------------- | -------- | | `currentEmailLabel` | `string` | | `description` | `string` | | `newEmailLabel` | `string` | | `newEmailPlaceholder` | `string` | | `sameAsCurrentMessage` | `string` | | `submit` | `string` | | `submitting` | `string` | | `successMessage` | `string` | | `title` | `string` | | `unavailable` | `string` | ### `ConvexEnableTwoFactorForm` **Props** | Name | Type | Optional | Description | | ------------ | ------------------------------------- | -------- | ----------------------------------------------------------------- | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexEnableTwoFactorFormClassNames` | Yes | | | `copy` | `ConvexEnableTwoFactorFormCopy` | Yes | | | `issuer` | `string` | Yes | Authenticator label shown alongside the account (e.g. "Pile"). | | `onEnrolled` | `() => void` | Yes | Fired once enrollment is fully confirmed (after the backup step). | | `renderQR` | `(totpURI: string) => ReactNode` | Yes | Optional QR renderer. Receives the | **classNames keys** | Key | Type | | -------------- | -------- | | `backupCode` | `string` | | `backupCodes` | `string` | | `errorState` | `string` | | `field` | `string` | | `form` | `string` | | `input` | `string` | | `label` | `string` | | `qr` | `string` | | `root` | `string` | | `secret` | `string` | | `submitButton` | `string` | | `successState` | `string` | **copy keys** | Key | Type | | --------------------- | -------- | | `backupDescription` | `string` | | `backupTitle` | `string` | | `codeLabel` | `string` | | `codePlaceholder` | `string` | | `description` | `string` | | `done` | `string` | | `passwordLabel` | `string` | | `passwordPlaceholder` | `string` | | `passwordSubmit` | `string` | | `secretLabel` | `string` | | `submitting` | `string` | | `title` | `string` | | `unavailable` | `string` | | `verifyDescription` | `string` | | `verifySubmit` | `string` | | `verifyTitle` | `string` | ### `ConvexForgotPasswordForm` **Props** | Name | Type | Optional | Description | | ------------------ | ------------------------------------ | -------- | ------------------------------------------------------------ | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexForgotPasswordFormClassNames` | Yes | | | `copy` | `ConvexForgotPasswordFormCopy` | Yes | | | `onRequested` | `(email: string) => void` | Yes | | | `resetPasswordUrl` | `string` | No | Absolute URL of the reset-password page on this app. The app | | appends | **classNames keys** | Key | Type | | -------------- | -------- | | `errorState` | `string` | | `field` | `string` | | `form` | `string` | | `input` | `string` | | `label` | `string` | | `root` | `string` | | `submitButton` | `string` | | `successState` | `string` | **copy keys** | Key | Type | | ------------------ | -------- | | `description` | `string` | | `emailLabel` | `string` | | `emailPlaceholder` | `string` | | `submit` | `string` | | `submitting` | `string` | | `successMessage` | `string` | | `title` | `string` | | `unavailable` | `string` | ### `ConvexProfileEditForm` **Props** | Name | Type | Optional | Description | | ------------------------------------------------------ | --------------------------------- | -------- | ------------------------------------------------------------- | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexProfileEditFormClassNames` | Yes | | | `copy` | `ConvexProfileEditFormCopy` | Yes | | | `initialImage` | `string` | Yes | | | `initialName` | `string` | Yes | | | `onUpdated` | `(next: __type) => void` | Yes | | | `showImageField` | `boolean` | Yes | Whether to show the image URL field. Defaults to true. Set to | | false for consumers that don't surface avatar editing. | **classNames keys** | Key | Type | | -------------- | -------- | | `errorState` | `string` | | `field` | `string` | | `form` | `string` | | `input` | `string` | | `label` | `string` | | `root` | `string` | | `submitButton` | `string` | | `successState` | `string` | **copy keys** | Key | Type | | ---------------- | -------- | | `description` | `string` | | `imageLabel` | `string` | | `nameLabel` | `string` | | `submit` | `string` | | `submitting` | `string` | | `successMessage` | `string` | | `title` | `string` | | `unavailable` | `string` | ### `ConvexProfileImageUploader` **Props** | Name | Type | Optional | Description | | -------------- | ------------------------------------------- | -------- | -------------------------------------------------------------- | | `accept` | `string` | Yes | File-input | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexProfileImageUploaderClassNames` | Yes | | | `copy` | `ConvexProfileImageUploaderCopy` | Yes | | | `initialImage` | `string \| None` | Yes | | | `onUploaded` | `(url: string) => void` | Yes | | | `uploadFile` | `(file: Blob \| string) => Promise` | No | Consumer-provided upload strategy. Receives the picked file (a | | browser | **classNames keys** | Key | Type | | -------------- | -------- | | `errorState` | `string` | | `noPreview` | `string` | | `pickButton` | `string` | | `preview` | `string` | | `root` | `string` | | `successState` | `string` | **copy keys** | Key | Type | | ---------------- | -------- | | `description` | `string` | | `noImage` | `string` | | `pick` | `string` | | `successMessage` | `string` | | `title` | `string` | | `unavailable` | `string` | | `uploading` | `string` | ### `ConvexResetPasswordForm` **Props** | Name | Type | Optional | Description | | ------------------------------------- | ----------------------------------- | -------- | --------------------------------------------------------------- | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexResetPasswordFormClassNames` | Yes | | | `copy` | `ConvexResetPasswordFormCopy` | Yes | | | `minPasswordLength` | `number` | Yes | Minimum new-password length to enforce client-side. Defaults to | | 12 (matches the package's server-side | | `onReset` | `() => void` | Yes | | | `token` | `string` | No | Reset token from the recovery email (typically | **classNames keys** | Key | Type | | -------------- | -------- | | `errorState` | `string` | | `field` | `string` | | `form` | `string` | | `input` | `string` | | `label` | `string` | | `root` | `string` | | `submitButton` | `string` | | `successState` | `string` | **copy keys** | Key | Type | | ---------------------- | -------- | | `confirmPasswordLabel` | `string` | | `description` | `string` | | `minLengthMessage` | `string` | | `mismatchMessage` | `string` | | `missingTokenMessage` | `string` | | `passwordLabel` | `string` | | `submit` | `string` | | `submitting` | `string` | | `successMessage` | `string` | | `title` | `string` | | `unavailable` | `string` | ### `ConvexSessionList` **Props** | Name | Type | Optional | Description | | ----------------------------------------------------- | ----------------------------------- | -------- | -------------------------------------------------------------- | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexSessionListClassNames` | Yes | | | `copy` | `ConvexSessionListCopy` | Yes | | | `formatTimestamp` | `(value: string \| Date) => string` | Yes | | | `showRevokeOthersAction` | `boolean` | Yes | Render a "Revoke all other sessions" button next to the title. | | Defaults to true. Hides when no other sessions exist. | **classNames keys** | Key | Type | | -------------- | -------- | | `emptyState` | `string` | | `errorState` | `string` | | `item` | `string` | | `itemCurrent` | `string` | | `itemMeta` | `string` | | `list` | `string` | | `loadingState` | `string` | | `revokeButton` | `string` | | `root` | `string` | **copy keys** | Key | Type | | ---------------------- | -------- | | `currentBadge` | `string` | | `description` | `string` | | `empty` | `string` | | `lastActivePrefix` | `string` | | `loading` | `string` | | `revoke` | `string` | | `revokeOthersButton` | `string` | | `revoking` | `string` | | `revokingOthersButton` | `string` | | `title` | `string` | | `unavailable` | `string` | ### `ConvexUserButton` **Props** | Name | Type | Optional | Description | | ------------------------ | --------------------------------------------------- | -------- | ----------- | | `classNames` | `ConvexUserButtonClassNames` | Yes | | | `copy` | `ConvexUserButtonCopy` | Yes | | | `currentOrganizationId` | `string \| None` | Yes | | | `onCreateOrganization` | `() => void \| Promise` | Yes | | | `onManageAccount` | `() => void \| Promise` | Yes | | | `onManageOrganization` | `() => void \| Promise` | Yes | | | `onSelectOrganization` | `(organizationId: string) => void \| Promise` | Yes | | | `onSignOut` | `() => void \| Promise` | Yes | | | `organizations` | `readonly ConvexUserButtonOrganizationItem[]` | Yes | | | `renderCustomTrigger` | `(args: __type) => ReactNode` | Yes | | | `showManageOrganization` | `boolean` | Yes | | | `user` | `ConvexUserButtonUser \| None \| undefined` | No | | **classNames keys** | Key | Type | | ---------------------- | -------- | | `avatar` | `string` | | `dropdown` | `string` | | `dropdownDivider` | `string` | | `dropdownItem` | `string` | | `dropdownItemActive` | `string` | | `dropdownItemLabel` | `string` | | `dropdownItemMeta` | `string` | | `dropdownPanel` | `string` | | `dropdownSection` | `string` | | `dropdownSectionTitle` | `string` | | `initials` | `string` | | `signOutButton` | `string` | | `trigger` | `string` | **copy keys** | Key | Type | | ------------------------- | -------- | | `createOrganizationLabel` | `string` | | `manageAccountLabel` | `string` | | `manageOrganizationLabel` | `string` | | `personalAccountLabel` | `string` | | `signedInAsLabel` | `string` | | `signOutLabel` | `string` | | `switchOrganizationLabel` | `string` | ### `ConvexUserProfile` **Props** | Name | Type | Optional | Description | | --------------------- | -------------------------------------------- | -------- | ----------- | | `classNames` | `ConvexUserProfileClassNames` | Yes | | | `copy` | `ConvexUserProfileCopy` | Yes | | | `errorMessage` | `string \| None` | Yes | | | `isAdmin` | `boolean` | Yes | | | `isLoading` | `boolean` | Yes | | | `onChangePassword` | `() => void \| Promise` | Yes | | | `onDeleteAccount` | `() => void \| Promise` | Yes | | | `onManageTwoFactor` | `() => void \| Promise` | Yes | | | `onUpdateProfile` | `(input: __type) => void \| Promise` | Yes | | | `renderDeleteConfirm` | `(args: __type) => ReactNode` | Yes | | | `user` | `ConvexUserProfileUser \| None \| undefined` | No | | **classNames keys** | Key | Type | | ------------------ | -------- | | `actions` | `string` | | `body` | `string` | | `card` | `string` | | `dangerButton` | `string` | | `description` | `string` | | `errorBanner` | `string` | | `field` | `string` | | `header` | `string` | | `image` | `string` | | `imagePlaceholder` | `string` | | `input` | `string` | | `label` | `string` | | `primaryButton` | `string` | | `providerItem` | `string` | | `providerLabel` | `string` | | `secondaryButton` | `string` | | `sectionBody` | `string` | | `sectionDivider` | `string` | | `sectionTitle` | `string` | | `title` | `string` | | `value` | `string` | **copy keys** | Key | Type | | -------------------------- | -------- | | `cancelLabel` | `string` | | `changePasswordLabel` | `string` | | `confirmDeleteDescription` | `string` | | `confirmDeleteTitle` | `string` | | `connectedAccountsLabel` | `string` | | `deleteAccountLabel` | `string` | | `description` | `string` | | `editLabel` | `string` | | `emailLabel` | `string` | | `imageUrlLabel` | `string` | | `imageUrlPlaceholder` | `string` | | `nameLabel` | `string` | | `nameRequiredError` | `string` | | `notVerifiedLabel` | `string` | | `saveLabel` | `string` | | `savingLabel` | `string` | | `securityLabel` | `string` | | `title` | `string` | | `twoFactorLabel` | `string` | | `verifiedLabel` | `string` | ### `ConvexVerifyEmailScreen` **Props** | Name | Type | Optional | Description | | ------------------- | ----------------------------------- | -------- | --------------------------------------------------------------------- | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexVerifyEmailScreenClassNames` | Yes | | | `copy` | `ConvexVerifyEmailScreenCopy` | Yes | | | `onVerified` | `() => void` | Yes | Called on successful verification (after the verify call returns ok). | | `resendCallbackUrl` | `string` | Yes | Absolute URL of this verify-email page on this app. The app | | appends a fresh | | `token` | `string` | No | Token from the verification email's | | `userEmail` | `string \| None` | Yes | The current user's email, if signed in. Required to enable the | resend-verification button. If absent, the resend button is hidden (no way to know which email to resend to). | **classNames keys** | Key | Type | | ------------------- | -------- | | `errorState` | `string` | | `missingTokenState` | `string` | | `resendButton` | `string` | | `root` | `string` | | `verifiedState` | `string` | | `verifyingState` | `string` | **copy keys** | Key | Type | | --------------------- | -------- | | `description` | `string` | | `errorPrefix` | `string` | | `missingTokenMessage` | `string` | | `resend` | `string` | | `resending` | `string` | | `resendSuccess` | `string` | | `title` | `string` | | `unavailable` | `string` | | `verified` | `string` | | `verifying` | `string` | ### `ConvexVerifyTwoFactorForm` **Props** | Name | Type | Optional | Description | | --------------------------------------------- | ------------------------------------- | -------- | ------------------------------------------------------------------- | | `authClient` | `ConvexAuthClient \| None` | Yes | | | `classNames` | `ConvexVerifyTwoFactorFormClassNames` | Yes | | | `copy` | `ConvexVerifyTwoFactorFormCopy` | Yes | | | `onVerified` | `() => void` | Yes | Fired once the second factor is satisfied and the session is live. | | `showTrustDevice` | `boolean` | Yes | Show the "trust this device" checkbox (skips 2FA on this device for | | the server's trust window). Defaults to true. | **classNames keys** | Key | Type | | -------------- | -------- | | `errorState` | `string` | | `field` | `string` | | `form` | `string` | | `input` | `string` | | `label` | `string` | | `root` | `string` | | `submitButton` | `string` | | `toggleButton` | `string` | | `trustToggle` | `string` | **copy keys** | Key | Type | | ----------------------- | -------- | | `backupCodeLabel` | `string` | | `backupCodePlaceholder` | `string` | | `codeLabel` | `string` | | `codePlaceholder` | `string` | | `description` | `string` | | `submit` | `string` | | `submitting` | `string` | | `title` | `string` | | `trustDeviceLabel` | `string` | | `unavailable` | `string` | | `useAuthenticator` | `string` | | `useBackupCode` | `string` |