Skip to main content

​
<UserButton />

The <UserButton /> component renders a sleek, interactive, and fully-featured avatar that opens a session management dropdown. It serves as the easiest and fastest way to give your users access to account settings, profile management, and a secure sign-out pathway without engineering a bespoke UI. It automatically fetches the user’s profile image (or generates a fallback based on their initials) and keeps the internal state perfectly synchronized with Wacht’s backend.

​
Import

import { UserButton } from "@wacht/react-router";

​
Usage

The <UserButton /> is typically placed in the top-right corner of your application’s global navigation or header layout. 
import { UserButton } from "@wacht/react-router";

export function ApplicationHeader() {
  return (
    <header className="flex justify-between items-center px-6 py-4 border-b border-gray-100 bg-white">
      <div className="text-xl font-bold tracking-tight text-zinc-900">
        Acme Corp
      </div>
      
      {/* Renders the user's avatar, or returns null if unauthenticated */}
      <UserButton />
    </header>
  );
}

​
Built-in Protection

You do not need to wrap the <UserButton /> in conditional logic to check if a user is currently logged in. The component is inherently session-aware at its core. If there is no active session (i.e., the user is logged out or their session has expired), the component gracefully returns null and remains completely invisible. This prevents layout shift and eliminates runtime errors related to missing user data.

​
Interacting with the Session Programmatically

The <UserButton /> is exceptional for a drop-in UI, but often you need to access the underlying user data (like their name, email, or avatar URL) to display a personalized greeting or utilize ID tokens in your API requests. Use our primitive hooks to directly access this contextual data: