nap-auth-react

🔐 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