🔐 nap-auth-react

A lightweight React wrapper for the nap-auth behavioral authentication Web Component. It enables seamless, passwordless login and registration based on how users interact — not what they type.

📦 Installation

npm install nap-auth-react nap-auth react react-dom

🚀 Usage

import NapAuth from 'nap-auth-react';

function App() {
  return (
    <NapAuth
      username="demo"
      mode="register" // or "login"
      onSuccess={(data) => console.log("✅ Auth success:", data)}
      onFail={(data) => console.log("❌ Auth failed:", data)}
      onProgress={(data) => console.log("⏳ Training progress:", data)}
    />
  );
}

⚙️ Props

| Prop | Type | Description | |------|------|-------------| | username | string | Unique identifier for the user | | mode | string | Either 'register' or 'login' | | onSuccess | func | Triggered when authentication succeeds | | onFail | func | Triggered when authentication fails | | onProgress | func | Triggered during training mode to show progress state |

📚 Events

Internally listens for:

• auth-success: when behavior matches learned pattern
• auth-fail: when confidence is too low
• auth-progress: when registering a new user

These are forwarded as React callbacks (onSuccess, onFail, onProgress).

🧠 How It Works

• Presents a drag-and-drop challenge inside a <canvas>
• Tracks mouse velocity, hesitation, click pressure, and more
• Feeds those patterns into a lightweight neural network
• Uses confidence scoring to determine identity without passwords

🛠 Tech Stack

• React + Web Components
• Canvas interaction API
• Custom JavaScript Neural Network
• Vite for packaging
• Optional TypeScript typings for autocomplete

🧪 Development

npm install
npm run dev

To build the library:

npm run build

📄 License

MIT © Pratik Acharya