ReactUserLogin

A ready-to-use email/password authentication component with a built-in password reset flow using OTP verification. Wrap the component inside AuthixProvider before using it.

Usage

Import the component and wrap it with the Neuctra Authix provider.

Jsx

1import { AuthixProvider, ReactUserLogin } from "@neuctra/authix";
2import { authix } from "./neuctraAuthixInit";
3
4export default function LoginPage() {
5  return (
6    <AuthixProvider authix={authix}>
7      <ReactUserLogin
8        title="Welcome Back"
9        signupUrl="/signup"
10        onSuccess={(user) => console.log("Logged in:", user)}
11        onError={(err) => console.error(err)}
12      />
13    </AuthixProvider>
14  );
15}

Props

Available configuration options.

Prop	Type	Default	Description
`logoUrl`	`string`	—	Logo image URL
`logoLinkUrl`	`string`	/	Logo link destination.
`title`	`string`	"Sign In to Your Account"	Heading displayed above the form.
`subtitle`	`string`	"Welcome back!..."	Supporting text below the title.
`primaryColor`	`string`	"#00C214"	Primary accent color.
`gradient`	`string`	green gradient	Background gradient.
`darkMode`	`boolean`	true	Enable dark theme.
`signupUrl`	`string`	—	Signup page URL.
`onSuccess`	`(user) => void`	—	Called after successful login.
`onError`	`(error) => void`	—	Called when login fails.

SDK Methods Used

Internally, the component calls the following Neuctra Authix SDK methods.

loginUser({ email, password })requestResetUserPasswordOTP({ email })resetUserPassword({ email, otp, newPassword })

The password recovery flow is fully integrated. Users first request an OTP using their email, then verify the OTP and set a new password—all within the same component.