UserCenter

Overview

The UserCenter component is a ready-to-use dropdown menu that displays user information and provides authentication controls. It automatically adapts based on authentication state, showing either a sign-in button or user profile menu.

Installation

npm install @ouim/logto-authkit

Basic Usage

import { UserCenter } from '@ouim/logto-authkit'

function Header() {
  return (
    <header>
      <nav>
        {/* Your navigation items */}
        <UserCenter />
      </nav>
    </header>
  )
}

Props

className

string

Additional CSS classes to apply to the avatar element. ```tsx

</ParamField>

<ParamField path="globalSignOut" type="boolean" default="true">
Whether to perform a global sign-out (logs out from entire Logto ecosystem) or local-only sign-out. ```tsx
<UserCenter globalSignOut={false} />

signoutCallbackUrl

string

URL to redirect to after sign-out. Defaults to current page. ```tsx

</ParamField>

<ParamField path="themeClassnames" type="string" default="dark:bg-[#171717] dark:text-slate-200 bg-white text-slate-900">
Custom theme classes for the dropdown menu styling. ```tsx
<UserCenter themeClassnames="bg-gray-800 text-white" />

additionalPages

AdditionalPage[]

default:"[]"

Additional menu items to show in the dropdown before the sign-out button.

Show AdditionalPage type

interface AdditionalPage {
  link: string      // URL to navigate to
  text: string      // Display text for the menu item
  icon?: React.ReactNode  // Optional icon component
}

import { Settings, CreditCard } from 'lucide-react'

<UserCenter
  additionalPages={[
    {
      link: '/settings',
      text: 'Settings',
      icon: <Settings />
    },
    {
      link: '/billing',
      text: 'Billing',
      icon: <CreditCard />
    }
  ]}
/>

States

Loading State

While authentication state is loading, displays a pulsing skeleton:

<div className="h-8 w-8 rounded-full bg-slate-100 animate-pulse" />

Authenticated State

When a user is signed in, shows:

User avatar (if available) or initials
Dropdown menu with:
- User name and email
- Additional custom pages (if configured)
- Sign out button

Unauthenticated State

When no user is signed in, shows:

Generic user icon
Dropdown menu with sign-in button

Examples

Basic Implementation

import { UserCenter } from '@ouim/logto-authkit'

export default function Header() {
  return (
    <header className="flex items-center justify-between p-4">
      <h1>My App</h1>
      <UserCenter />
    </header>
  )
}

With Custom Pages

import { UserCenter } from '@ouim/logto-authkit'
import { Settings, User, CreditCard } from 'lucide-react'

export default function Navigation() {
  return (
    <nav className="flex items-center gap-4">
      <UserCenter
        additionalPages={[
          {
            link: '/profile',
            text: 'Profile',
            icon: <User className="h-4 w-4" />,
          },
          {
            link: '/settings',
            text: 'Settings',
            icon: <Settings className="h-4 w-4" />,
          },
          {
            link: '/billing',
            text: 'Billing',
            icon: <CreditCard className="h-4 w-4" />,
          },
        ]}
      />
    </nav>
  )
}

Custom Styling

import { UserCenter } from '@ouim/logto-authkit'

export default function ThemedHeader() {
  return (
    <header className="bg-slate-900">
      <UserCenter className="ring-2 ring-blue-500" themeClassnames="bg-slate-800 text-white border-slate-700" />
    </header>
  )
}

Local Sign-Out Only

import { UserCenter } from '@ouim/logto-authkit'

export default function Header() {
  return (
    <header>
      <UserCenter globalSignOut={false} signoutCallbackUrl="/login" />
    </header>
  )
}

User Data Display

The component automatically displays:

User Avatar: If user.avatar exists, shows the avatar image
User Initials: If no avatar, generates initials from user.name
User Name: Displays as the main label in the dropdown
User Email: Shows below the name in a smaller, muted text

// User object structure
interface LogtoUser {
  id: string
  name?: string
  email?: string
  avatar?: string
  [key: string]: any
}

Behavior

User clicks on the guest avatar
Dropdown shows “Sign in to your account”
Click “Sign in” button
Triggers signIn() from useAuth hook
Redirects to Logto authentication

Sign-Out Flow

User clicks “Sign out” button
Calls signOut({ callbackUrl, global }) from useAuth hook
If globalSignOut={true}: Logs out from entire Logto ecosystem
If globalSignOut={false}: Only clears local session
Redirects to signoutCallbackUrl or current page

Customization

Custom Icons

You can use any icon library with additionalPages:

import { UserCenter } from '@ouim/logto-authkit'
import { IoSettingsOutline, IoCreditCardOutline } from 'react-icons/io5'

;<UserCenter
  additionalPages={[
    {
      link: '/settings',
      text: 'Settings',
      icon: <IoSettingsOutline />,
    },
    {
      link: '/billing',
      text: 'Billing',
      icon: <IoCreditCardOutline />,
    },
  ]}
/>

Dark Mode Support

The default theme classes support dark mode:

// Default theme
themeClassnames = 'dark:bg-[#171717] dark:text-slate-200 bg-white text-slate-900'

Customize for your design system:

<UserCenter
  themeClassnames="
    dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700
    bg-white text-gray-900 border-gray-200
  "
/>

SSR Considerations

The component includes built-in SSR handling to prevent hydration mismatches. It waits for client-side mounting before rendering user-specific content.

// Internal handling
const [hasMounted, setHasMounted] = useState(false)

useEffect(() => {
  setHasMounted(true)
}, [])

if (!hasMounted || isLoadingUser) {
  return <LoadingSkeleton />
}

Dependencies

The component requires these shadcn/ui components:

Avatar, AvatarFallback, AvatarImage
DropdownMenu family
Button

Icons from lucide-react:

User
LogOut
UserCircle

Best Practices

Always wrap with AuthProvider

Ensure UserCenter is used within an AuthProvider to access authentication context.

Configure sign-out redirect

Set signoutCallbackUrl to control where users land after signing out.

Use global sign-out for security

Keep globalSignOut={true} (default) for better security, clearing all sessions across devices.

Add relevant pages

Use additionalPages to provide quick access to user-related pages like settings, profile, and billing.

Troubleshooting

If the component doesn’t show user information after sign-in, ensure the AuthProvider is properly configured and wrapping your app.

For popup sign-in, make sure your /signin page properly handles the ?popup=true query parameter.

AuthProvider

Main authentication provider

useAuth Hook

Access authentication in any component

CallbackPage

Handle authentication callbacks

Route Protection

Protect routes from unauthorized access

Get Started

Frontend

Server

Configuration

Examples

API Reference

Overview

Installation

Basic Usage

Props

States

Loading State

Authenticated State

Unauthenticated State

Examples

Basic Implementation

With Custom Pages

Custom Styling

Local Sign-Out Only

User Data Display

Behavior

Sign-Out Flow

Customization

Custom Icons

Dark Mode Support

SSR Considerations

Dependencies

Best Practices

Troubleshooting

AuthProvider

useAuth Hook

CallbackPage

Route Protection

​Overview

​Installation

​Basic Usage

​Props

​States

​Loading State

​Authenticated State

​Unauthenticated State

​Examples

​Basic Implementation

​With Custom Pages

​Custom Styling

​Local Sign-Out Only

​User Data Display

​Behavior

​Sign-In Flow

​Sign-Out Flow

​Customization

​Custom Icons

​Dark Mode Support

​SSR Considerations

​Dependencies

​Best Practices

​Troubleshooting

​Related

AuthProvider

useAuth Hook

CallbackPage

Route Protection

Overview

Installation

Basic Usage

Props

States

Loading State

Authenticated State

Unauthenticated State

Examples

Basic Implementation

With Custom Pages

Custom Styling

Local Sign-Out Only

User Data Display

Behavior

Sign-In Flow

Sign-Out Flow

Customization

Custom Icons

Dark Mode Support

SSR Considerations

Dependencies

Best Practices

Troubleshooting

Related