🔐 Auth-UI

A beautiful, highly customizable authentication UI component library for React applications. Build stunning login, registration, and password reset forms with minimal effort.

✨ Features

• 🎨 Fully Customizable - Style every element with CSS-in-JS or CSS classes
• 📝 Configurable Text - Multi-language support and custom messaging
• 🔧 Flexible Fields - Define any form fields with validation rules
• 🎯 TypeScript Ready - Complete type safety out of the box
• 📱 Responsive Design - Works beautifully on all devices
• ♿ Accessible - ARIA compliant and keyboard navigation
• 🎭 Multiple Themes - Built-in themes or create your own
• 🔌 API Agnostic - Works with any authentication backend
• 📚 Storybook Docs - Interactive component documentation

📦 Installation

npm install @chandra_mohan_chauhan/auth-ui
# or
yarn add @chandra_mohan_chauhan/auth-ui
# or
pnpm add @chandra_mohan_chauhan/auth-ui

🚀 Quick Start

import React from "react";
import { Login } from "@chandra_mohan_chauhan/auth-ui";

const App = () => {
  const authAdapter = {
    login: async (credentials) => {
      const response = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(credentials),
      });

      if (response.ok) {
        return { success: true, user: await response.json() };
      } else {
        throw new Error("Invalid credentials");
      }
    },
  };

  const handleSuccess = (result) => {
    console.log("Login successful!", result);
    // Redirect user or update app state
  };

  return (
    <Login
      authAdapter={authAdapter}
      onSuccess={handleSuccess}
      texts={{
        title: "Welcome Back!",
        submitButton: "Sign In",
        subtitle: "Please sign in to your account",
      }}
    />
  );
};

export default App;

🎯 Components

Login Component

The main login form component with email/password authentication.

import { Login } from "@yourcompany/auth-ui";

<Login
  authAdapter={authAdapter}
  onSuccess={handleSuccess}
  showRemember={true}
  texts={{
    title: "Welcome Back",
    submitButton: "Sign In",
    rememberMe: "Keep me logged in",
  }}
  styles={{
    button: { backgroundColor: "#007bff" },
    container: { borderRadius: "12px" },
  }}
/>;

Custom Fields Example

<Login
  authAdapter={authAdapter}
  fields={[
    {
      name: "username",
      label: "Username",
      type: "text",
      required: true,
      placeholder: "Enter your username",
    },
    {
      name: "password",
      label: "Password",
      type: "password",
      required: true,
      placeholder: "Enter your password",
    },
  ]}
/>

Phone Authentication

<Login
  authAdapter={phoneAuthAdapter}
  texts={{
    title: "Phone Verification",
    submitButton: "Send Code",
    subtitle: "We'll send you a verification code",
  }}
  fields={[
    {
      name: "phone",
      label: "Phone Number",
      type: "tel",
      required: true,
      placeholder: "+1 (555) 123-4567",
    },
    {
      name: "otp",
      label: "Verification Code",
      type: "text",
      required: true,
      placeholder: "Enter 6-digit code",
    },
  ]}
/>

🎨 Styling & Themes

Custom Styles

<Login
  authAdapter={authAdapter}
  styles={{
    container: {
      backgroundColor: "#f8f9fa",
      borderRadius: "16px",
      padding: "2rem",
      boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
    },
    button: {
      backgroundColor: "#28a745",
      color: "white",
      padding: "14px 28px",
      borderRadius: "25px",
      border: "none",
      fontWeight: "600",
    },
    input: {
      borderRadius: "8px",
      padding: "12px 16px",
      border: "1px solid #ced4da",
    },
    title: {
      color: "#28a745",
      fontSize: "24px",
      fontWeight: "bold",
    },
  }}
/>

Dark Theme

<Login
  authAdapter={authAdapter}
  styles={{
    container: {
      backgroundColor: "#1a1a2e",
      color: "white",
      border: "1px solid #16213e",
    },
    button: {
      backgroundColor: "#4ecdc4",
      color: "white",
    },
    input: {
      backgroundColor: "#16213e",
      color: "white",
      border: "1px solid #4ecdc4",
    },
    label: {
      color: "#4ecdc4",
    },
  }}
/>

🌍 Internationalization

// Spanish
<Login
  authAdapter={authAdapter}
  texts={{
    title: "Iniciar Sesión",
    subtitle: "Ingresa a tu cuenta",
    submitButton: "Entrar",
    submitButtonLoading: "Entrando...",
    rememberMe: "Recordarme",
    footer: "¿No tienes cuenta? Regístrate aquí"
  }}
  fields={[
    {
      name: "email",
      label: "Correo Electrónico",
      type: "email",
      required: true,
      placeholder: "Ingresa tu correo"
    },
    {
      name: "password",
      label: "Contraseña",
      type: "password",
      required: true,
      placeholder: "Ingresa tu contraseña"
    }
  ]}
/>

// French
<Login
  authAdapter={authAdapter}
  texts={{
    title: "Se Connecter",
    submitButton: "Connexion",
    rememberMe: "Se souvenir de moi"
  }}
/>

🔧 Advanced Usage

Custom Render Props

For complete control over the form layout:

<Login authAdapter={authAdapter}>
  {({ form, onChange }) => (
    <div className="custom-form-layout">
      <h2>Custom Login Form</h2>
      <input
        type="text"
        placeholder="Username"
        value={form.username || ""}
        onChange={(e) => onChange("username", e.target.value)}
        className="custom-input"
      />
      <input
        type="password"
        placeholder="Password"
        value={form.password || ""}
        onChange={(e) => onChange("password", e.target.value)}
        className="custom-input"
      />
      <div className="custom-actions">
        <button type="submit">Login</button>
      </div>
    </div>
  )}
</Login>

Error Handling

const authAdapter = {
  login: async (credentials) => {
    try {
      const response = await api.login(credentials);
      return { success: true, user: response.user };
    } catch (error) {
      // Component will automatically display this error
      throw new Error("Invalid email or password. Please try again.");
    }
  },
};

<Login
  authAdapter={authAdapter}
  texts={{
    errorPrefix: "⚠️ Login failed:",
  }}
  styles={{
    error: {
      backgroundColor: "#fee2e2",
      border: "1px solid #fecaca",
      borderRadius: "6px",
      padding: "12px",
      color: "#dc2626",
    },
  }}
/>;

📋 API Reference

Login Props

| Prop | Type | Default | Description | | -------------- | ----------------------- | ------------------- | ----------------------------- | | authAdapter | AuthAdapter | required | Authentication methods object | | onSuccess | (result: any) => void | - | Called when login succeeds | | className | string | - | Additional CSS class | | showRemember | boolean | true | Show "Remember me" checkbox | | fields | FieldConfig[] | [email, password] | Form field configuration | | styles | AuthStyles | {} | Style overrides | | texts | LoginTexts | {} | Text customization | | children | RenderProp | - | Custom render function |

AuthAdapter Interface

interface AuthAdapter {
  login: (data: FormData) => Promise<{ success: boolean; error?: string }>;
  register?: (data: FormData) => Promise<{ success: boolean; error?: string }>;
  forgotPassword?: (
    data: FormData
  ) => Promise<{ success: boolean; error?: string }>;
}

FieldConfig Interface

interface FieldConfig {
  name: string;
  label: string;
  type: "text" | "email" | "password" | "tel" | "url";
  required?: boolean;
  placeholder?: string;
}

LoginTexts Interface

interface LoginTexts {
  title?: string; // "Sign in"
  subtitle?: string; // ""
  submitButton?: string; // "Sign in"
  submitButtonLoading?: string; // "Signing in..."
  rememberMe?: string; // "Remember me"
  footer?: string; // ""
  errorPrefix?: string; // ""
}

AuthStyles Interface

interface AuthStyles {
  container?: React.CSSProperties;
  title?: React.CSSProperties;
  subtitle?: React.CSSProperties;
  field?: React.CSSProperties;
  label?: React.CSSProperties;
  input?: React.CSSProperties;
  button?: React.CSSProperties;
  error?: React.CSSProperties;
  checkbox?: React.CSSProperties;
  footer?: React.CSSProperties;
}

🎭 Built-in Themes

Corporate Theme

const corporateStyles = {
  container: {
    backgroundColor: "#f8f9fa",
    border: "1px solid #dee2e6",
  },
  button: {
    backgroundColor: "#0d6efd",
    borderRadius: "6px",
  },
  title: {
    color: "#0d6efd",
    fontSize: "24px",
  },
};

Gaming Theme

const gamingStyles = {
  container: {
    backgroundColor: "#1a1a2e",
    color: "white",
    border: "2px solid #16213e",
  },
  button: {
    background: "linear-gradient(45deg, #ff6b6b, #4ecdc4)",
    borderRadius: "25px",
    textTransform: "uppercase",
  },
  title: {
    color: "#4ecdc4",
    textTransform: "uppercase",
    letterSpacing: "2px",
  },
};

🔌 Framework Integration

Next.js

// pages/login.tsx
import { Login } from "@yourcompany/auth-ui";
import { useRouter } from "next/router";

export default function LoginPage() {
  const router = useRouter();

  const authAdapter = {
    login: async (credentials) => {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(credentials),
      });

      if (response.ok) {
        return { success: true };
      } else {
        throw new Error("Login failed");
      }
    },
  };

  const handleSuccess = () => {
    router.push("/dashboard");
  };

  return <Login authAdapter={authAdapter} onSuccess={handleSuccess} />;
}

React Router

import { Login } from "@yourcompany/auth-ui";
import { useNavigate } from "react-router-dom";

function LoginPage() {
  const navigate = useNavigate();

  const handleSuccess = () => {
    navigate("/dashboard");
  };

  return <Login authAdapter={authAdapter} onSuccess={handleSuccess} />;
}

🧪 Testing

import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { Login } from "@yourcompany/auth-ui";

test("handles successful login", async () => {
  const mockAdapter = {
    login: jest.fn().mockResolvedValue({ success: true }),
  };
  const onSuccess = jest.fn();

  render(<Login authAdapter={mockAdapter} onSuccess={onSuccess} />);

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: "[email protected]" },
  });
  fireEvent.change(screen.getByLabelText(/password/i), {
    target: { value: "password123" },
  });
  fireEvent.click(screen.getByRole("button", { name: /sign in/i }));

  await waitFor(() => {
    expect(mockAdapter.login).toHaveBeenCalledWith({
      email: "[email protected]",
      password: "password123",
    });
    expect(onSuccess).toHaveBeenCalled();
  });
});

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• NPM Package
• GitHub Repository
• Storybook Documentation
• Issue Tracker

Made with ❤️ by Chandra Mohan Chauhan