> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ouim.me/llms.txt
> Use this file to discover all available pages before exploring further.
# UserCenter
> Pre-built dropdown user menu component with sign-in/sign-out functionality
## 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
```bash theme={null}
npm install @ouim/logto-authkit
```
## Basic Usage
```tsx theme={null}
import { UserCenter } from '@ouim/logto-authkit'
function Header() {
return (
)
}
```
## Props
Additional CSS classes to apply to the avatar element. \`\`\`tsx
````
Whether to perform a global sign-out (logs out from entire Logto ecosystem) or local-only sign-out. ```tsx
````
URL to redirect to after sign-out. Defaults to current page. \`\`\`tsx
````
Custom theme classes for the dropdown menu styling. ```tsx
````
Additional menu items to show in the dropdown before the sign-out button.
```typescript theme={null}
interface AdditionalPage {
link: string // URL to navigate to
text: string // Display text for the menu item
icon?: React.ReactNode // Optional icon component
}
```
```tsx theme={null}
import { Settings, CreditCard } from 'lucide-react'
},
{
link: '/billing',
text: 'Billing',
icon:
}
]}
/>
```
## States
### Loading State
While authentication state is loading, displays a pulsing skeleton:
```tsx theme={null}
```
### 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
```tsx theme={null}
import { UserCenter } from '@ouim/logto-authkit'
export default function Header() {
return (
My App
)
}
```
### With Custom Pages
```tsx theme={null}
import { UserCenter } from '@ouim/logto-authkit'
import { Settings, User, CreditCard } from 'lucide-react'
export default function Navigation() {
return (
)
}
```
### Custom Styling
```tsx theme={null}
import { UserCenter } from '@ouim/logto-authkit'
export default function ThemedHeader() {
return (
)
}
```
### Local Sign-Out Only
```tsx theme={null}
import { UserCenter } from '@ouim/logto-authkit'
export default function Header() {
return (
)
}
```
## 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
```typescript theme={null}
// User object structure
interface LogtoUser {
id: string
name?: string
email?: string
avatar?: string
[key: string]: any
}
```
## Behavior
### Sign-In Flow
1. User clicks on the guest avatar
2. Dropdown shows "Sign in to your account"
3. Click "Sign in" button
4. Triggers `signIn()` from `useAuth` hook
5. Redirects to Logto authentication
### Sign-Out Flow
1. User clicks "Sign out" button
2. Calls `signOut({ callbackUrl, global })` from `useAuth` hook
3. If `globalSignOut={true}`: Logs out from entire Logto ecosystem
4. If `globalSignOut={false}`: Only clears local session
5. Redirects to `signoutCallbackUrl` or current page
## Customization
### Custom Icons
You can use any icon library with `additionalPages`:
```tsx theme={null}
import { UserCenter } from '@ouim/logto-authkit'
import { IoSettingsOutline, IoCreditCardOutline } from 'react-icons/io5'
;,
},
{
link: '/billing',
text: 'Billing',
icon: ,
},
]}
/>
```
### Dark Mode Support
The default theme classes support dark mode:
```tsx theme={null}
// Default theme
themeClassnames = 'dark:bg-[#171717] dark:text-slate-200 bg-white text-slate-900'
```
Customize for your design system:
```tsx theme={null}
```
## SSR Considerations
The component includes built-in SSR handling to prevent hydration mismatches. It waits for client-side mounting before rendering
user-specific content.
```tsx theme={null}
// Internal handling
const [hasMounted, setHasMounted] = useState(false)
useEffect(() => {
setHasMounted(true)
}, [])
if (!hasMounted || isLoadingUser) {
return
}
```
## Dependencies
The component requires these shadcn/ui components:
* `Avatar`, `AvatarFallback`, `AvatarImage`
* `DropdownMenu` family
* `Button`
Icons from `lucide-react`:
* `User`
* `LogOut`
* `UserCircle`
## Best Practices
Ensure `UserCenter` is used within an `AuthProvider` to access authentication context.
Set `signoutCallbackUrl` to control where users land after signing out.
Keep `globalSignOut={true}` (default) for better security, clearing all sessions across devices.
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.
## Related
Main authentication provider
Access authentication in any component
Handle authentication callbacks
Protect routes from unauthorized access