ReactEmailVerification

A standalone OTP email verification component with a simple two-step flow: send OTP → verify OTP → confirmation success. Requires AuthixProvider and a valid user object.

Usage

Wrap the component inside AuthixProvider before using it.

Jsx

1import { AuthixProvider, ReactEmailVerification } from "@neuctra/authix";
2
3const user = {
4  id: "user_123",
5  name: "John",
6  email: "[email protected]",
7};
8
9export default function Page() {
10  return (
11    <AuthixProvider authix={authix}>
12      <ReactEmailVerification
13        user={user}
14        primaryColor="#00C212"
15        onVerify={(updatedUser) => console.log("Verified:", updatedUser)}
16      />
17    </AuthixProvider>
18  );
19};

Props

Available configuration options for the verification component.

Prop	Type	Default	Description
`user`	`UserInfo \| null`	—	User object used for email verification. Shows warning UI if missing.
`darkMode`	`boolean`	true	Enable dark theme.
`primaryColor`	`string`	"#00C212"	Primary accent color.
`onVerify`	`(updatedUser: UserInfo) => void`	—	Called after successful email verification.

UserInfo Type

Typescript

1export interface UserInfo {
2  id: string;
3  name: string;
4  email: string;
5}

SDK Methods Used

Internally used Neuctra Authix SDK methods for email verification flow.

requestEmailVerificationOTP({ userId, email })verifyEmail({ email, otp })

The email is automatically taken from user.email. OTP flow is fully handled inside the component.