@hnb/auth-ui

🔐 HNB Central Authentication UI - Google-level authentication for all HNB products.

✨ Features

• 🎨 Premium Dark Theme - Sleek, professional design
• 📝 Multi-Step Signup - Google-style step-by-step registration
• 📧 Email OTP Verification - Secure email verification
• 📍 Location Detection - Automatic geolocation (no manual input)
• 🔐 Password Strength Meter - Real-time validation
• 📱 Fully Responsive - Mobile-first design
• 🚀 Redirect URI Support - Works across all HNB products
• 🎭 Smooth Animations - Premium micro-interactions

📦 Installation

npm install @hnb/auth-ui

🚀 Quick Start

Option 1: Full Auth System (Recommended)

import { HNBAuth } from "@hnb/auth-ui";
import "@hnb/auth-ui/styles";

function App() {
  return (
    <HNBAuth 
      backendUrl="https://auth.hnb.co.in"
      redirectUri="https://app.hnb.co.in/dashboard"
    />
  );
}

Option 2: Individual Components

import { HNBLogin, HNBSignup, authApi } from "@hnb/auth-ui";
import "@hnb/auth-ui/styles";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// Configure API URL
authApi.baseUrl = "https://auth.hnb.co.in";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<HNBLogin />} />
        <Route path="/signup" element={<HNBSignup />} />
      </Routes>
    </BrowserRouter>
  );
}

Option 3: "Sign in with HNB" Button

function YourApp() {
  const handleHNBLogin = () => {
    const redirectUri = encodeURIComponent(window.location.origin + "/callback");
    window.location.href = `https://auth.hnb.co.in?redirect_uri=${redirectUri}`;
  };

  return (
    <button onClick={handleHNBLogin} className="hnb-signin-btn">
      <img src="https://auth.hnb.co.in/logo.svg" alt="HNB" />
      Sign in with HNB
    </button>
  );
}

📋 Props

<HNBAuth />

| Prop | Type | Default | Description | |------|------|---------|-------------| | backendUrl | string | http://localhost:4000/auth | Backend API URL | | redirectUri | string | "" | URI to redirect after auth success | | theme | string | "dark" | Theme mode: "dark" or "light" | | logoUrl | string | "" | Custom logo URL (overrides default HNB logo) | | basePath | string | "" | Base path for routing | | onSuccess | function | null | Callback on successful auth | | onError | function | null | Callback on auth error | | embedded | boolean | false | Don't use BrowserRouter (for embedding) |

🔄 Signup Flow

The signup follows a strict 5-step process:

| Step | Name | Validation | |------|------|------------| | 1 | Name | First name (≥3 chars, no spaces), Last name (≥1 char) | | 2 | Email | Email format + OTP verification required | | 3 | Phone | Country code + valid phone number | | 4 | Location | Auto-detected via Geolocation API (no manual input) | | 5 | Password | ≥8 chars, 1 uppercase, 1 lowercase, 1 special char |

🔌 Backend API Requirements

Your backend must implement these endpoints:

POST /auth/send-otp
Body: { email: string }
Response: { message: "OTP sent" }

POST /auth/verify-otp
Body: { email: string, otp: string }
Response: { message: "OTP verified" }

POST /auth/register
Body: { firstName, lastName, email, phone, location, password }
Response: { message: "Registration successful" }

POST /auth/login
Body: { identifier: string, password: string }
Response: { token: string }

POST /auth/reset-password
Body: { email: string, newPassword: string }
Response: { message: "Password updated" }

🎨 Theming

Using with Tailwind CSS

Add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx}",
    "./node_modules/@hnb/auth-ui/**/*.{js,jsx}",
  ],
};

Color Palette

| Element | Color | |---------|-------| | Background | #0a0a0f | | Card | #12121a to #0e0e14 | | Border | #2a2a35 | | Primary | violet-600 / indigo-600 | | Success | emerald-500 | | Error | rose-500 |

📁 Exported Components

Pages

• HNBAuth - Full auth system wrapper
• HNBEntry / Entry - Landing page
• HNBLogin / Login - Login page
• HNBSignup / Signup - Multi-step signup
• HNBForgotPassword / ForgotPassword - Password reset
• HNBWelcome / Welcome - Success page

UI Components

• Logo - HNB branding
• Button - Styled button with variants
• Input - Enhanced input with validation
• Stepper - Multi-step progress indicator
• OTPInput - 6-digit OTP input
• CountrySelect - Country code dropdown
• PasswordStrengthMeter - Real-time password strength

Utilities

• authApi - API service (configurable)
• setApiUrl(url) - Configure API endpoint
• validation - Form validation helpers
• COUNTRIES - Country codes list
• SIGNUP_STEPS - Signup step definitions

🛠 Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Build library for npm
npm run build:lib

📄 License

MIT © HNB Inc.