{"_id":"@chandra_mohan_chauhan/auth-ui","_rev":"2-5b84fce8190e9d197ec99be14791db55","name":"@chandra_mohan_chauhan/auth-ui","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@chandra_mohan_chauhan/auth-ui","version":"1.0.0","keywords":["react","auth","authentication","login","ui","components","typescript"],"author":{"name":"Chandra Mohan Chauhan"},"license":"MIT","_id":"@chandra_mohan_chauhan/auth-ui@1.0.0","maintainers":[{"name":"chandra_mohan_chauhan","email":"chandramohan@infinitelocus.com"}],"homepage":"https://github.com/chandra_mohan_chauhan/auth-ui#readme","bugs":{"url":"https://github.com/chandra_mohan_chauhan/auth-ui/issues"},"dist":{"shasum":"10ea566c0f33403ebaf8cdc0d499b3727fc786fb","tarball":"https://registry.npmjs.org/@chandra_mohan_chauhan/auth-ui/-/auth-ui-1.0.0.tgz","fileCount":11,"integrity":"sha512-I3ZoZew78AfMV/C5ZuwEOhqmub12tk9RO3FR2tRmMWPlqPHJ/4GidfVwSx4jnAUrN8b1YAyMEzg80nhK9rV7hg==","signatures":[{"sig":"MEQCIBNAQbTcH+ASaMVT3J5XuiJQthfBmhdalezhUOm3ofWaAiBXaJsB7P9FiJ/eFHpODlUZA2aH1Uk1dBqQ6AeqfrgfAw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":124479},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"67c731092bacca97baa893722d3853023cd769d2","scripts":{"test":"vitest","build":"tsup && cpy src/styles/auth.css dist/styles.css --flat","clean":"rimraf dist","prepare":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"chandra_mohan_chauhan","email":"chandramohan@infinitelocus.com"},"repository":{"url":"git+https://github.com/chandra_mohan_chauhan/auth-ui.git","type":"git"},"_npmVersion":"10.9.3","description":"A reusable, customizable auth UI component library for React","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^6.7.0","react":"^18.2.0","rimraf":"^5.0.10","vitest":"^0.34.0","cpy-cli":"^3.1.1","@swc/core":"^1.13.5","react-dom":"^18.2.0","storybook":"^9.1.5","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@storybook/addon-docs":"^9.1.5","@storybook/react-vite":"^9.1.5","@storybook/addon-onboarding":"^9.1.5"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/auth-ui_1.0.0_1757843977186_0.9976805838239919","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@chandra_mohan_chauhan/auth-ui","version":"1.0.1","description":"A reusable, customizable auth UI component library for React","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"tsup && cpy src/styles/auth.css dist/styles.css --flat","clean":"rimraf dist","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepare":"npm run build","test":"vitest"},"keywords":["react","auth","authentication","login","ui","components","typescript"],"author":{"name":"Chandra Mohan Chauhan"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/chandra_mohan_chauhan/auth-ui.git"},"homepage":"https://github.com/chandra_mohan_chauhan/auth-ui#readme","bugs":{"url":"https://github.com/chandra_mohan_chauhan/auth-ui/issues"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@storybook/addon-docs":"^9.1.5","@storybook/addon-onboarding":"^9.1.5","@storybook/react-vite":"^9.1.5","@swc/core":"^1.13.5","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","cpy-cli":"^3.1.1","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^5.0.10","storybook":"^9.1.5","tsup":"^6.7.0","typescript":"^5.0.0","vitest":"^0.34.0"},"_id":"@chandra_mohan_chauhan/auth-ui@1.0.1","gitHead":"67c731092bacca97baa893722d3853023cd769d2","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-r0qUYwwaJ7Wsi0DVPSXsudTvf+Is3d519Oj23alWBs7Rf6vfswvl5YnvNnElkH+rdCsXdVlJ6P5pm9MlvIWuxw==","shasum":"6ac5604c29127f4099950804f1be10b4b064c3b4","tarball":"https://registry.npmjs.org/@chandra_mohan_chauhan/auth-ui/-/auth-ui-1.0.1.tgz","fileCount":11,"unpackedSize":124394,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHC7lKpvzWIITetJ6L90pfaXIFp/1oXjSjmVTze6l7q5AiATSW67XhxdRnMLOnE8CWc221HudPczjOZwl13U9/L/DQ=="}]},"_npmUser":{"name":"chandra_mohan_chauhan","email":"chandramohan@infinitelocus.com"},"directories":{},"maintainers":[{"name":"chandra_mohan_chauhan","email":"chandramohan@infinitelocus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/auth-ui_1.0.1_1757870283762_0.26626105291564484"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-14T09:59:37.101Z","modified":"2025-09-14T17:18:04.135Z","1.0.0":"2025-09-14T09:59:37.365Z","1.0.1":"2025-09-14T17:18:03.955Z"},"bugs":{"url":"https://github.com/chandra_mohan_chauhan/auth-ui/issues"},"author":{"name":"Chandra Mohan Chauhan"},"license":"MIT","homepage":"https://github.com/chandra_mohan_chauhan/auth-ui#readme","keywords":["react","auth","authentication","login","ui","components","typescript"],"repository":{"type":"git","url":"git+https://github.com/chandra_mohan_chauhan/auth-ui.git"},"description":"A reusable, customizable auth UI component library for React","maintainers":[{"name":"chandra_mohan_chauhan","email":"chandramohan@infinitelocus.com"}],"readme":"# 🔐 Auth-UI\n\nA beautiful, highly customizable authentication UI component library for React applications. Build stunning login, registration, and password reset forms with minimal effort.\n\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## ✨ Features\n\n- 🎨 **Fully Customizable** - Style every element with CSS-in-JS or CSS classes\n- 📝 **Configurable Text** - Multi-language support and custom messaging\n- 🔧 **Flexible Fields** - Define any form fields with validation rules\n- 🎯 **TypeScript Ready** - Complete type safety out of the box\n- 📱 **Responsive Design** - Works beautifully on all devices\n- ♿ **Accessible** - ARIA compliant and keyboard navigation\n- 🎭 **Multiple Themes** - Built-in themes or create your own\n- 🔌 **API Agnostic** - Works with any authentication backend\n- 📚 **Storybook Docs** - Interactive component documentation\n\n## 📦 Installation\n\n```bash\nnpm install @chandra_mohan_chauhan/auth-ui\n# or\nyarn add @chandra_mohan_chauhan/auth-ui\n# or\npnpm add @chandra_mohan_chauhan/auth-ui\n```\n\n## 🚀 Quick Start\n\n```tsx\nimport React from \"react\";\nimport { Login } from \"@chandra_mohan_chauhan/auth-ui\";\n\nconst App = () => {\n  const authAdapter = {\n    login: async (credentials) => {\n      const response = await fetch(\"/api/login\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(credentials),\n      });\n\n      if (response.ok) {\n        return { success: true, user: await response.json() };\n      } else {\n        throw new Error(\"Invalid credentials\");\n      }\n    },\n  };\n\n  const handleSuccess = (result) => {\n    console.log(\"Login successful!\", result);\n    // Redirect user or update app state\n  };\n\n  return (\n    <Login\n      authAdapter={authAdapter}\n      onSuccess={handleSuccess}\n      texts={{\n        title: \"Welcome Back!\",\n        submitButton: \"Sign In\",\n        subtitle: \"Please sign in to your account\",\n      }}\n    />\n  );\n};\n\nexport default App;\n```\n\n## 🎯 Components\n\n### Login Component\n\nThe main login form component with email/password authentication.\n\n```tsx\nimport { Login } from \"@yourcompany/auth-ui\";\n\n<Login\n  authAdapter={authAdapter}\n  onSuccess={handleSuccess}\n  showRemember={true}\n  texts={{\n    title: \"Welcome Back\",\n    submitButton: \"Sign In\",\n    rememberMe: \"Keep me logged in\",\n  }}\n  styles={{\n    button: { backgroundColor: \"#007bff\" },\n    container: { borderRadius: \"12px\" },\n  }}\n/>;\n```\n\n### Custom Fields Example\n\n```tsx\n<Login\n  authAdapter={authAdapter}\n  fields={[\n    {\n      name: \"username\",\n      label: \"Username\",\n      type: \"text\",\n      required: true,\n      placeholder: \"Enter your username\",\n    },\n    {\n      name: \"password\",\n      label: \"Password\",\n      type: \"password\",\n      required: true,\n      placeholder: \"Enter your password\",\n    },\n  ]}\n/>\n```\n\n### Phone Authentication\n\n```tsx\n<Login\n  authAdapter={phoneAuthAdapter}\n  texts={{\n    title: \"Phone Verification\",\n    submitButton: \"Send Code\",\n    subtitle: \"We'll send you a verification code\",\n  }}\n  fields={[\n    {\n      name: \"phone\",\n      label: \"Phone Number\",\n      type: \"tel\",\n      required: true,\n      placeholder: \"+1 (555) 123-4567\",\n    },\n    {\n      name: \"otp\",\n      label: \"Verification Code\",\n      type: \"text\",\n      required: true,\n      placeholder: \"Enter 6-digit code\",\n    },\n  ]}\n/>\n```\n\n## 🎨 Styling & Themes\n\n### Custom Styles\n\n```tsx\n<Login\n  authAdapter={authAdapter}\n  styles={{\n    container: {\n      backgroundColor: \"#f8f9fa\",\n      borderRadius: \"16px\",\n      padding: \"2rem\",\n      boxShadow: \"0 4px 20px rgba(0,0,0,0.1)\",\n    },\n    button: {\n      backgroundColor: \"#28a745\",\n      color: \"white\",\n      padding: \"14px 28px\",\n      borderRadius: \"25px\",\n      border: \"none\",\n      fontWeight: \"600\",\n    },\n    input: {\n      borderRadius: \"8px\",\n      padding: \"12px 16px\",\n      border: \"1px solid #ced4da\",\n    },\n    title: {\n      color: \"#28a745\",\n      fontSize: \"24px\",\n      fontWeight: \"bold\",\n    },\n  }}\n/>\n```\n\n### Dark Theme\n\n```tsx\n<Login\n  authAdapter={authAdapter}\n  styles={{\n    container: {\n      backgroundColor: \"#1a1a2e\",\n      color: \"white\",\n      border: \"1px solid #16213e\",\n    },\n    button: {\n      backgroundColor: \"#4ecdc4\",\n      color: \"white\",\n    },\n    input: {\n      backgroundColor: \"#16213e\",\n      color: \"white\",\n      border: \"1px solid #4ecdc4\",\n    },\n    label: {\n      color: \"#4ecdc4\",\n    },\n  }}\n/>\n```\n\n## 🌍 Internationalization\n\n```tsx\n// Spanish\n<Login\n  authAdapter={authAdapter}\n  texts={{\n    title: \"Iniciar Sesión\",\n    subtitle: \"Ingresa a tu cuenta\",\n    submitButton: \"Entrar\",\n    submitButtonLoading: \"Entrando...\",\n    rememberMe: \"Recordarme\",\n    footer: \"¿No tienes cuenta? Regístrate aquí\"\n  }}\n  fields={[\n    {\n      name: \"email\",\n      label: \"Correo Electrónico\",\n      type: \"email\",\n      required: true,\n      placeholder: \"Ingresa tu correo\"\n    },\n    {\n      name: \"password\",\n      label: \"Contraseña\",\n      type: \"password\",\n      required: true,\n      placeholder: \"Ingresa tu contraseña\"\n    }\n  ]}\n/>\n\n// French\n<Login\n  authAdapter={authAdapter}\n  texts={{\n    title: \"Se Connecter\",\n    submitButton: \"Connexion\",\n    rememberMe: \"Se souvenir de moi\"\n  }}\n/>\n```\n\n## 🔧 Advanced Usage\n\n### Custom Render Props\n\nFor complete control over the form layout:\n\n```tsx\n<Login authAdapter={authAdapter}>\n  {({ form, onChange }) => (\n    <div className=\"custom-form-layout\">\n      <h2>Custom Login Form</h2>\n      <input\n        type=\"text\"\n        placeholder=\"Username\"\n        value={form.username || \"\"}\n        onChange={(e) => onChange(\"username\", e.target.value)}\n        className=\"custom-input\"\n      />\n      <input\n        type=\"password\"\n        placeholder=\"Password\"\n        value={form.password || \"\"}\n        onChange={(e) => onChange(\"password\", e.target.value)}\n        className=\"custom-input\"\n      />\n      <div className=\"custom-actions\">\n        <button type=\"submit\">Login</button>\n      </div>\n    </div>\n  )}\n</Login>\n```\n\n### Error Handling\n\n```tsx\nconst authAdapter = {\n  login: async (credentials) => {\n    try {\n      const response = await api.login(credentials);\n      return { success: true, user: response.user };\n    } catch (error) {\n      // Component will automatically display this error\n      throw new Error(\"Invalid email or password. Please try again.\");\n    }\n  },\n};\n\n<Login\n  authAdapter={authAdapter}\n  texts={{\n    errorPrefix: \"⚠️ Login failed:\",\n  }}\n  styles={{\n    error: {\n      backgroundColor: \"#fee2e2\",\n      border: \"1px solid #fecaca\",\n      borderRadius: \"6px\",\n      padding: \"12px\",\n      color: \"#dc2626\",\n    },\n  }}\n/>;\n```\n\n## 📋 API Reference\n\n### Login Props\n\n| Prop           | Type                    | Default             | Description                   |\n| -------------- | ----------------------- | ------------------- | ----------------------------- |\n| `authAdapter`  | `AuthAdapter`           | **required**        | Authentication methods object |\n| `onSuccess`    | `(result: any) => void` | -                   | Called when login succeeds    |\n| `className`    | `string`                | -                   | Additional CSS class          |\n| `showRemember` | `boolean`               | `true`              | Show \"Remember me\" checkbox   |\n| `fields`       | `FieldConfig[]`         | `[email, password]` | Form field configuration      |\n| `styles`       | `AuthStyles`            | `{}`                | Style overrides               |\n| `texts`        | `LoginTexts`            | `{}`                | Text customization            |\n| `children`     | `RenderProp`            | -                   | Custom render function        |\n\n### AuthAdapter Interface\n\n```tsx\ninterface AuthAdapter {\n  login: (data: FormData) => Promise<{ success: boolean; error?: string }>;\n  register?: (data: FormData) => Promise<{ success: boolean; error?: string }>;\n  forgotPassword?: (\n    data: FormData\n  ) => Promise<{ success: boolean; error?: string }>;\n}\n```\n\n### FieldConfig Interface\n\n```tsx\ninterface FieldConfig {\n  name: string;\n  label: string;\n  type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\";\n  required?: boolean;\n  placeholder?: string;\n}\n```\n\n### LoginTexts Interface\n\n```tsx\ninterface LoginTexts {\n  title?: string; // \"Sign in\"\n  subtitle?: string; // \"\"\n  submitButton?: string; // \"Sign in\"\n  submitButtonLoading?: string; // \"Signing in...\"\n  rememberMe?: string; // \"Remember me\"\n  footer?: string; // \"\"\n  errorPrefix?: string; // \"\"\n}\n```\n\n### AuthStyles Interface\n\n```tsx\ninterface AuthStyles {\n  container?: React.CSSProperties;\n  title?: React.CSSProperties;\n  subtitle?: React.CSSProperties;\n  field?: React.CSSProperties;\n  label?: React.CSSProperties;\n  input?: React.CSSProperties;\n  button?: React.CSSProperties;\n  error?: React.CSSProperties;\n  checkbox?: React.CSSProperties;\n  footer?: React.CSSProperties;\n}\n```\n\n## 🎭 Built-in Themes\n\n### Corporate Theme\n\n```tsx\nconst corporateStyles = {\n  container: {\n    backgroundColor: \"#f8f9fa\",\n    border: \"1px solid #dee2e6\",\n  },\n  button: {\n    backgroundColor: \"#0d6efd\",\n    borderRadius: \"6px\",\n  },\n  title: {\n    color: \"#0d6efd\",\n    fontSize: \"24px\",\n  },\n};\n```\n\n### Gaming Theme\n\n```tsx\nconst gamingStyles = {\n  container: {\n    backgroundColor: \"#1a1a2e\",\n    color: \"white\",\n    border: \"2px solid #16213e\",\n  },\n  button: {\n    background: \"linear-gradient(45deg, #ff6b6b, #4ecdc4)\",\n    borderRadius: \"25px\",\n    textTransform: \"uppercase\",\n  },\n  title: {\n    color: \"#4ecdc4\",\n    textTransform: \"uppercase\",\n    letterSpacing: \"2px\",\n  },\n};\n```\n\n## 🔌 Framework Integration\n\n### Next.js\n\n```tsx\n// pages/login.tsx\nimport { Login } from \"@yourcompany/auth-ui\";\nimport { useRouter } from \"next/router\";\n\nexport default function LoginPage() {\n  const router = useRouter();\n\n  const authAdapter = {\n    login: async (credentials) => {\n      const response = await fetch(\"/api/auth/login\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify(credentials),\n      });\n\n      if (response.ok) {\n        return { success: true };\n      } else {\n        throw new Error(\"Login failed\");\n      }\n    },\n  };\n\n  const handleSuccess = () => {\n    router.push(\"/dashboard\");\n  };\n\n  return <Login authAdapter={authAdapter} onSuccess={handleSuccess} />;\n}\n```\n\n### React Router\n\n```tsx\nimport { Login } from \"@yourcompany/auth-ui\";\nimport { useNavigate } from \"react-router-dom\";\n\nfunction LoginPage() {\n  const navigate = useNavigate();\n\n  const handleSuccess = () => {\n    navigate(\"/dashboard\");\n  };\n\n  return <Login authAdapter={authAdapter} onSuccess={handleSuccess} />;\n}\n```\n\n## 🧪 Testing\n\n```tsx\nimport { render, screen, fireEvent, waitFor } from \"@testing-library/react\";\nimport { Login } from \"@yourcompany/auth-ui\";\n\ntest(\"handles successful login\", async () => {\n  const mockAdapter = {\n    login: jest.fn().mockResolvedValue({ success: true }),\n  };\n  const onSuccess = jest.fn();\n\n  render(<Login authAdapter={mockAdapter} onSuccess={onSuccess} />);\n\n  fireEvent.change(screen.getByLabelText(/email/i), {\n    target: { value: \"test@example.com\" },\n  });\n  fireEvent.change(screen.getByLabelText(/password/i), {\n    target: { value: \"password123\" },\n  });\n  fireEvent.click(screen.getByRole(\"button\", { name: /sign in/i }));\n\n  await waitFor(() => {\n    expect(mockAdapter.login).toHaveBeenCalledWith({\n      email: \"test@example.com\",\n      password: \"password123\",\n    });\n    expect(onSuccess).toHaveBeenCalled();\n  });\n});\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🔗 Links\n\n- [NPM Package](https://www.npmjs.com/package/@chandra_mohan_chauhan/auth-ui)\n- [GitHub Repository](https://github.com/chandra_mohan_chauhan/auth-ui)\n- [Storybook Documentation](https://chandra_mohan_chauhan.github.io/auth-ui)\n- [Issue Tracker](https://github.com/chandra_mohan_chauhan/auth-ui/issues)\n\n---\n\nMade with ❤️ by [Chandra Mohan Chauhan](https://github.com/chandra_mohan_chauhan)\n","readmeFilename":"README.md"}