ReactUserProfile

A full-featured user profile dashboard that loads session data on mount. It supports profile editing, avatar updates, password change, email verification, and account deletion—all inside a single interface.

Usage

Wrap the component inside AuthixProvider before using it.

Jsx

1import { AuthixProvider, ReactUserProfile } from "@neuctra/authix";
2
3export default function ProfilePage() {
4  return (
5    <AuthixProvider authix={authix}>
6      <ReactUserProfile
7        darkMode={true}
8        primaryColor="#00C212"
9        homeUrl="/"
10        onLogout={async () => {
11          await authix.logoutUser();
12        }}
13        onVerify={(user) => console.log("Verified:", user)}
14      />
15    </AuthixProvider>
16  );
17};

Props

Configuration options for the profile dashboard.

Prop	Type	Default	Description
`darkMode`	`boolean`	true	Enable dark theme.
`homeUrl`	`string`	—	Redirect URL for home navigation.
`primaryColor`	`string`	"#00C212"	Primary accent color.
`onLogout`	`() => void`	—	Called when user clicks logout.
`onVerify`	`(user: UserInfo) => void`	—	Called after email verification success.

SDK Methods Used

Internally used Neuctra Authix SDK methods for profile management.

checkUserSession()getUserProfile({ userId })checkIfUserExists(userId)updateUser({ userId, ...fields })requestEmailVerificationOTP({ userId, email })verifyEmail({ email, otp })

Notes

Username and role fields are read-only in edit mode. Changing email resets verification status. A fallback initials avatar is generated when no avatar is provided.