Neuctra Authix SDK & UI Components

Neuctra Authix is an authentication SDK and UI component library for React and Vue. It provides ready-to-use APIs, authentication flows, and user management utilities with JWT, API Key, OTP verification, and extra user data management.

📦 Installation

# Install via npm
npm install neuctra-authix

# Or using yarn
yarn add neuctra-authix

# Or pnpm
pnpm add neuctra-authix

⚡ Features

• 🔑 Authentication SDK (Signup, Login, Profile, Password Reset, OTP)
• 👤 User Management (Update, Delete, Change Password, Extra Data)
• 📂 User Data Store (Flexible key/value objects per user)
• 🛡 Secure API Requests (JWT & API Key)
• 🎨 UI Components (React + Vue with TailwindCSS)

🛠 SDK Configuration

Before using the SDK, set up the global configuration.

import { setSdkConfig, getSdkConfig } from "neuctra-authix/sdk";

setSdkConfig({
  baseUrl: "https://api.neuctra.com",
  apiKey: "your-api-key",
  appId: "your-app-id",
});

console.log(getSdkConfig());
// { baseUrl: "...", apiKey: "...", appId: "..." }

Alternatively, you can use the class-based client:

import { NeuctraAuthix } from "neuctra-authix/sdk";

const client = new NeuctraAuthix({
  baseUrl: "https://api.neuctra.com",
  apiKey: "your-api-key",
  appId: "your-app-id",
});

🚀 Usage Examples

🔹 Signup a New User

await client.signup({
  name: "John Doe",
  email: "[email protected]",
  password: "strongpassword",
});

🔹 Login

const session = await client.login({
  email: "[email protected]",
  password: "strongpassword",
});
console.log(session.token);

🔹 Get Profile

await client.getProfile({ token: "user-jwt-token" });

🔹 Update User

await client.updateUser({
  userId: "12345",
  name: "Updated Name",
  phone: "+1234567890",
});

🔹 Change Password (Admin)

await client.changePassword({
  userId: "12345",
  currentPassword: "oldPass",
  newPassword: "newPass",
});

🔹 Delete User

await client.deleteUser({ userId: "12345" });

✉️ Email Verification & Password Reset

Send Verification OTP

await client.sendVerifyOTP({ token: "user-jwt-token" });

Verify Email

await client.verifyEmail({
  token: "user-jwt-token",
  otp: "123456",
});

Forgot Password

await client.forgotPassword({ email: "[email protected]" });

Reset Password

await client.resetPassword({
  email: "[email protected]",
  otp: "123456",
  newPassword: "newSecurePass",
});

📂 User Extra Data Management

Each user can store custom structured objects.

Get All Data

await client.getUserData({ userId: "12345" });

Get One Object

await client.getSingleUserData({ userId: "12345", dataId: "data123" });

Add Data

await client.addUserData({
  userId: "12345",
  data: { preferences: { theme: "dark" } },
});

Update Data

await client.updateUserData({
  userId: "12345",
  dataId: "data123",
  data: { preferences: { theme: "light" } },
});

Delete Data

await client.deleteUserData({ userId: "12345", dataId: "data123" });

🎨 UI Components

import { LoginForm, SignupForm } from "neuctra-authix/react";

<LoginForm onSuccess={(session) => console.log("Logged in:", session)} />
<SignupForm onSuccess={(user) => console.log("Signed up:", user)} />

Vue components are also supported:

<script setup>
import { LoginForm } from "neuctra-authix/vue";
</script>

<template>
  <LoginForm @success="(session) => console.log('Logged in:', session)" />
</template>

⚙️ Tech Stack

• TypeScript
• Vite
• React / Vue
• TailwindCSS
• Axios
• Lucide Icons

📄 License

MIT © 2025 Neuctra