ReactUserButton

A fully customizable authenticated user avatar button with dropdown menu, session-based user detection, responsive positioning, and built-in logout handling.

Usage

Wrap the component inside AuthixProvider and pass your logout handler.

Jsx

1import { AuthixProvider, ReactUserButton } from "@neuctra/authix";
2import { authix } from "./neuctraAuthixInit";
3
4export default function App() {
5  const handleLogout = async () => {
6    await authix.logoutUser();
7  };
8
9  return (
10    <AuthixProvider authix={authix}>
11      <div className="flex justify-end p-6">
12        <ReactUserButton
13          onLogout={handleLogout}
14          menuItems={[
15            {
16              label: "Profile",
17              icon: "👤",
18              href: "/profile",
19            },
20            {
21              label: "Settings",
22              icon: "⚙️",
23              href: "/settings",
24            },
25            { type: "divider" },
26            {
27              label: "Support",
28              icon: "💬",
29              onClick: () => console.log("Support clicked"),
30            },
31          ]}
32        />
33      </div>
34    </AuthixProvider>
35  );
36};

Props

Configuration options for customizing the user button.

Prop	Type	Default	Description
`menuItems`	`MenuItem[]`	[]	Custom dropdown menu items (links, buttons, dividers).
`darkMode`	`boolean`	true	Enables dark theme styling.
`onLogout`	`() => void`	—	Called when user clicks logout button.
`propUser`	`UserInfo \| null`	null	Manually provide user data (overrides session).
`logoutLabel`	`string`	"Sign Out"	Label for logout button.
`wrapperClassName`	`string`	—	Custom wrapper styling.
`avatarClassName`	`string`	—	Custom avatar button styling.
`dropdownClassName`	`string`	—	Custom dropdown container styling.
`menuItemClassName`	`string`	—	Custom menu item styling.
`logoutButtonClassName`	`string`	—	Custom logout button styling.

Features

Auto user detection from Neuctra Authix session
Supports manual user override via propUser
Responsive avatar sizing (mobile + desktop)
Smart dropdown positioning (viewport aware)
Click-outside, ESC key, and scroll auto-close
Custom menu items (links, buttons, dividers)
Dark mode support

MenuItem Type

1type MenuItem = {
2  label: string;
3  href?: string;
4  icon?: React.ReactNode;
5  onClick?: () => void;
6  type?: "link" | "button" | "divider";
7};

SDK Methods Used

authix.checkUserSession()authix.logoutUser()

The component automatically resolves the user session on mount and updates UI accordingly. Logout is fully controlled via the providedonLogout handler.