<UserButton />

User button menu

<UserButton /> is the account entry point for your app header. It shows a sign-in button when the visitor is logged out, a loading placeholder while auth state is syncing, and the active user’s avatar once the session is ready.

For signed-in users, the menu opens account settings and exposes sign-out.

Quick start

What it does

  • Logged out – renders a sign-in button and opens the sign-in dialog.
  • Loading – renders an avatar-sized skeleton while auth state is synchronizing.
  • Logged in – renders the active user’s avatar and a menu with profile and sign-out actions.
  • Profile dialog – opens <UserProfile /> through the URL-backed profile host.
  • SSR-friendly data – can use server-loaded user data to avoid an empty state during hydration.

Props

  • popoverPlacement – controls where the account menu opens. Defaults to 'bottom'.
  • initialData – passes server-loaded data in SvelteKit so the avatar and account menu render immediately.

Behavior

Opening the profile pushes the profile dialog state into the URL. This lets reloads and browser back behavior work naturally instead of losing the dialog state.

The component reads the active user through Convex, so avatar, name, and email changes update as Convex data changes.

  • <UserProfile /> – account settings, emails, providers, API keys, and delete-account flows.
  • <SignIn /> – sign-in form used when no session exists.
  • <SignOutButton /> – sign-out action used inside the menu.