{"_id":"@emmanuel-saleem/auth-ui","name":"@emmanuel-saleem/auth-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@emmanuel-saleem/auth-ui","version":"1.0.0","description":"A comprehensive, customizable authentication UI component library for React and Next.js applications","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","bin":{"auth-ui":"cli/publish.js"},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","test:ui":"vitest --ui","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepare":"npm run build"},"keywords":["react","nextjs","authentication","ui-components","tailwind","bootstrap","typescript","auth-ui","login-form","register-form","password-reset"],"author":{"name":"Emmanuel Saleem","url":"https://www.linkedin.com/in/es77"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/es-77/auth-ui.git"},"bugs":{"url":"https://github.com/es-77/auth-ui/issues"},"homepage":"https://github.com/es-77/auth-ui#readme","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-react":"^4.0.0","eslint":"^8.45.0","eslint-plugin-react":"^7.33.0","eslint-plugin-react-hooks":"^4.6.0","tsup":"^7.2.0","typescript":"^5.1.0","vitest":"^0.34.0","@testing-library/react":"^13.4.0","@testing-library/jest-dom":"^5.17.0","jest-axe":"^7.0.0"},"dependencies":{"clsx":"^2.0.0","react-hook-form":"^7.45.0","@hookform/resolvers":"^3.3.0","zod":"^3.22.0"},"_id":"@emmanuel-saleem/auth-ui@1.0.0","gitHead":"5c99b11948e0fc78ac1fa3bc94e7548937cff059","_nodeVersion":"20.16.0","_npmVersion":"10.6.0","dist":{"integrity":"sha512-4jWi6Gi5Vx1dg+B3axHyvQIDWswDFpS6YLC5NBfJ5k7dZCnm8pXkPAYjfQxmFtruwbk1XKHeOE+7usuH19mn8g==","shasum":"ea3a4784d7bd268ac49e05a14adaade91eee4628","tarball":"https://registry.npmjs.org/@emmanuel-saleem/auth-ui/-/auth-ui-1.0.0.tgz","fileCount":27,"unpackedSize":233887,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGsGU1HnCwcWBzYg2GwNGUzxqP5mVDiNUMzlyJcplkUVAiBDwT7wkf4xggotkDbajuqaaT0gTgOTOHr2SEn2cWWh2g=="}]},"_npmUser":{"name":"emmanuel-saleem","email":"emmanuelsaleem098765@gmail.com"},"directories":{},"maintainers":[{"name":"emmanuel-saleem","email":"emmanuelsaleem098765@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/auth-ui_1.0.0_1759787183314_0.8086995013508236"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-06T21:46:23.192Z","1.0.0":"2025-10-06T21:46:23.511Z","modified":"2025-10-06T21:46:23.838Z"},"maintainers":[{"name":"emmanuel-saleem","email":"emmanuelsaleem098765@gmail.com"}],"description":"A comprehensive, customizable authentication UI component library for React and Next.js applications","homepage":"https://github.com/es-77/auth-ui#readme","keywords":["react","nextjs","authentication","ui-components","tailwind","bootstrap","typescript","auth-ui","login-form","register-form","password-reset"],"repository":{"type":"git","url":"git+https://github.com/es-77/auth-ui.git"},"author":{"name":"Emmanuel Saleem","url":"https://www.linkedin.com/in/es77"},"bugs":{"url":"https://github.com/es-77/auth-ui/issues"},"license":"MIT","readme":"# @emmanuel-saleem/auth-ui\r\n\r\nA comprehensive, customizable authentication UI component library for React and Next.js applications. Built with TypeScript and supports multiple CSS frameworks including Tailwind CSS, Bootstrap, and vanilla CSS.\r\n\r\n## Features\r\n\r\n- 🔐 **Complete Auth Flow**: Login, Register, Forgot Password, Reset Password\r\n- 🎨 **Multiple CSS Frameworks**: Tailwind CSS, Bootstrap, and vanilla CSS\r\n- 📱 **Responsive Design**: Mobile-first approach with responsive layouts\r\n- ♿ **Accessibility**: ARIA labels, keyboard navigation, screen reader support\r\n- 🔧 **Customizable**: Publish and customize components easily\r\n- 📝 **TypeScript**: Full type definitions and type safety\r\n- ✅ **Form Validation**: Built-in validation with Zod schemas\r\n- 🎯 **Social Login**: Support for Google, GitHub, Facebook, Twitter\r\n- 🚀 **Easy Integration**: Works with React and Next.js out of the box\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @emmanuel-saleem/auth-ui\r\n```\r\n\r\n### Peer Dependencies\r\n\r\nMake sure you have the required peer dependencies installed:\r\n\r\n```bash\r\nnpm install react react-dom\r\n```\r\n\r\n## Quick Start\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\nimport { LoginForm } from '@emmanuel-saleem/auth-ui';\r\n\r\nfunction LoginPage() {\r\n  const handleLogin = async (data) => {\r\n    // Your authentication logic\r\n    console.log('Login data:', data);\r\n  };\r\n\r\n  return (\r\n    <LoginForm \r\n      onSubmit={handleLogin}\r\n      onForgotPassword={() => console.log('Forgot password')}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Publishing Customizable Templates\r\n\r\nTo publish customizable templates to your project:\r\n\r\n```bash\r\n# Publish Tailwind CSS templates (default)\r\nnpx @emmanuel-saleem/auth-ui publish\r\n\r\n# Publish Bootstrap templates\r\nnpx @emmanuel-saleem/auth-ui publish --framework=bootstrap\r\n\r\n# Publish vanilla CSS templates\r\nnpx @emmanuel-saleem/auth-ui publish --framework=vanilla\r\n\r\n# Custom output directory\r\nnpx @emmanuel-saleem/auth-ui publish --output=./custom-auth\r\n```\r\n\r\nThis will create the following structure in your project:\r\n\r\n```\r\nauth-ui/\r\n├── components/\r\n│   ├── LoginForm.tsx\r\n│   ├── RegisterForm.tsx\r\n│   ├── ForgotPasswordForm.tsx\r\n│   └── ResetPasswordForm.tsx\r\n├── styles/\r\n│   └── auth.css (for vanilla CSS)\r\n├── config.ts\r\n└── README.md\r\n```\r\n\r\n## Components\r\n\r\n### LoginForm\r\n\r\n```tsx\r\nimport { LoginForm } from '@emmanuel-saleem/auth-ui';\r\n\r\n<LoginForm\r\n  onSubmit={(data) => handleLogin(data)}\r\n  onForgotPassword={() => navigate('/forgot-password')}\r\n  redirectTo=\"/dashboard\"\r\n  showRememberMe={true}\r\n  showSocialLogin={true}\r\n  socialProviders={['google', 'github']}\r\n  customStyles={{\r\n    container: 'custom-class',\r\n    button: 'custom-btn-class'\r\n  }}\r\n/>\r\n```\r\n\r\n**Props:**\r\n- `onSubmit`: Function to handle login submission\r\n- `onForgotPassword?`: Function called when \"Forgot Password\" is clicked\r\n- `redirectTo?`: URL to redirect after successful login\r\n- `showRememberMe?`: Show \"Remember Me\" checkbox (default: true)\r\n- `showSocialLogin?`: Show social login buttons (default: true)\r\n- `socialProviders?`: Array of social providers to show\r\n- `customStyles?`: Custom CSS classes for styling\r\n- `isLoading?`: External loading state\r\n- `error?`: External error message\r\n\r\n### RegisterForm\r\n\r\n```tsx\r\nimport { RegisterForm } from '@emmanuel-saleem/auth-ui';\r\n\r\n<RegisterForm\r\n  onSubmit={(data) => handleRegister(data)}\r\n  onBackToLogin={() => navigate('/login')}\r\n  showSocialLogin={true}\r\n  socialProviders={['google', 'github']}\r\n/>\r\n```\r\n\r\n**Props:**\r\n- `onSubmit`: Function to handle registration submission\r\n- `onBackToLogin?`: Function called when \"Back to Login\" is clicked\r\n- `showSocialLogin?`: Show social login buttons (default: true)\r\n- `socialProviders?`: Array of social providers to show\r\n- `customStyles?`: Custom CSS classes for styling\r\n- `isLoading?`: External loading state\r\n- `error?`: External error message\r\n\r\n### ForgotPasswordForm\r\n\r\n```tsx\r\nimport { ForgotPasswordForm } from '@emmanuel-saleem/auth-ui';\r\n\r\n<ForgotPasswordForm\r\n  onSubmit={(email) => handleForgotPassword(email)}\r\n  onBackToLogin={() => navigate('/login')}\r\n  successMessage=\"Check your email for reset link\"\r\n/>\r\n```\r\n\r\n**Props:**\r\n- `onSubmit`: Function to handle forgot password submission\r\n- `onBackToLogin?`: Function called when \"Back to Login\" is clicked\r\n- `successMessage?`: Success message to display\r\n- `customStyles?`: Custom CSS classes for styling\r\n- `isLoading?`: External loading state\r\n- `error?`: External error message\r\n\r\n### ResetPasswordForm\r\n\r\n```tsx\r\nimport { ResetPasswordForm } from '@emmanuel-saleem/auth-ui';\r\n\r\n<ResetPasswordForm\r\n  token={token}\r\n  onSubmit={(data) => handleResetPassword(data)}\r\n  onSuccess={() => navigate('/login')}\r\n/>\r\n```\r\n\r\n**Props:**\r\n- `token`: Reset token from URL\r\n- `onSubmit`: Function to handle password reset submission\r\n- `onSuccess?`: Function called after successful reset\r\n- `customStyles?`: Custom CSS classes for styling\r\n- `isLoading?`: External loading state\r\n- `error?`: External error message\r\n\r\n## Configuration\r\n\r\nCreate an `auth-ui.config.js` file in your project root to customize default behavior:\r\n\r\n```javascript\r\nexport default {\r\n  theme: 'tailwind', // or 'bootstrap', 'vanilla'\r\n  pages: {\r\n    login: {\r\n      showSocialLogin: true,\r\n      showRememberMe: true,\r\n      redirectAfterLogin: '/dashboard'\r\n    },\r\n    register: {\r\n      requireEmailVerification: true,\r\n      fields: ['name', 'email', 'password', 'password_confirmation']\r\n    }\r\n  },\r\n  validation: {\r\n    passwordMinLength: 8,\r\n    passwordRequireSpecialChar: true\r\n  },\r\n  styling: {\r\n    primaryColor: '#3b82f6',\r\n    borderRadius: '0.5rem'\r\n  }\r\n}\r\n```\r\n\r\n## Styling\r\n\r\n### Tailwind CSS (Default)\r\n\r\nThe components use Tailwind CSS classes by default. You can customize the appearance by:\r\n\r\n1. **Custom Classes**: Use the `customStyles` prop\r\n2. **CSS Variables**: Override CSS custom properties\r\n3. **Tailwind Config**: Extend your Tailwind configuration\r\n\r\n```tsx\r\n<LoginForm\r\n  customStyles={{\r\n    container: 'max-w-lg mx-auto',\r\n    button: 'bg-purple-600 hover:bg-purple-700',\r\n    input: 'border-purple-300 focus:border-purple-500'\r\n  }}\r\n/>\r\n```\r\n\r\n### Bootstrap\r\n\r\nFor Bootstrap styling, publish Bootstrap templates:\r\n\r\n```bash\r\nnpx @emmanuel-saleem/auth-ui publish --framework=bootstrap\r\n```\r\n\r\nMake sure to include Bootstrap CSS in your project:\r\n\r\n```html\r\n<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\r\n```\r\n\r\n### Vanilla CSS\r\n\r\nFor vanilla CSS styling, publish vanilla templates:\r\n\r\n```bash\r\nnpx @emmanuel-saleem/auth-ui publish --framework=vanilla\r\n```\r\n\r\nInclude the generated CSS file:\r\n\r\n```tsx\r\nimport './auth-ui/styles/auth.css';\r\n```\r\n\r\nCustomize using CSS variables:\r\n\r\n```css\r\n:root {\r\n  --auth-primary-color: #your-color;\r\n  --auth-border-radius: 0.75rem;\r\n  --auth-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n}\r\n```\r\n\r\n## Form Validation\r\n\r\nThe package includes built-in validation using Zod schemas:\r\n\r\n```tsx\r\nimport { loginSchema, registerSchema } from '@emmanuel-saleem/auth-ui';\r\n\r\n// Validation schemas are automatically applied\r\n// Custom validation rules can be added by extending the schemas\r\n```\r\n\r\n### Custom Validation\r\n\r\n```tsx\r\nimport { z } from 'zod';\r\nimport { loginSchema } from '@emmanuel-saleem/auth-ui';\r\n\r\nconst customLoginSchema = loginSchema.extend({\r\n  email: z.string().email().refine(\r\n    (email) => email.endsWith('@yourcompany.com'),\r\n    'Must use company email'\r\n  )\r\n});\r\n```\r\n\r\n## Social Login\r\n\r\nSupported social providers:\r\n\r\n- Google\r\n- GitHub\r\n- Facebook\r\n- Twitter\r\n\r\n```tsx\r\n<LoginForm\r\n  socialProviders={['google', 'github']}\r\n  onSocialLogin={(provider) => {\r\n    // Handle social login\r\n    window.location.href = `/auth/${provider}`;\r\n  }}\r\n/>\r\n```\r\n\r\n## TypeScript Support\r\n\r\nThe package is built with TypeScript and includes full type definitions:\r\n\r\n```tsx\r\nimport type { \r\n  LoginFormData, \r\n  RegisterFormData, \r\n  AuthConfig,\r\n  CustomStyles \r\n} from '@emmanuel-saleem/auth-ui';\r\n```\r\n\r\n## Examples\r\n\r\n### Next.js App Router\r\n\r\n```tsx\r\n// app/login/page.tsx\r\n'use client';\r\n\r\nimport { LoginForm } from '@emmanuel-saleem/auth-ui';\r\nimport { useRouter } from 'next/navigation';\r\n\r\nexport default function LoginPage() {\r\n  const router = useRouter();\r\n\r\n  const handleLogin = async (data) => {\r\n    try {\r\n      const response = await fetch('/api/auth/login', {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application/json' },\r\n        body: JSON.stringify(data)\r\n      });\r\n      \r\n      if (response.ok) {\r\n        router.push('/dashboard');\r\n      }\r\n    } catch (error) {\r\n      console.error('Login failed:', error);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"min-h-screen flex items-center justify-center\">\r\n      <LoginForm onSubmit={handleLogin} />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### React with React Router\r\n\r\n```tsx\r\n// LoginPage.tsx\r\nimport { LoginForm } from '@emmanuel-saleem/auth-ui';\r\nimport { useNavigate } from 'react-router-dom';\r\n\r\nexport function LoginPage() {\r\n  const navigate = useNavigate();\r\n\r\n  const handleLogin = async (data) => {\r\n    // Your authentication logic\r\n    navigate('/dashboard');\r\n  };\r\n\r\n  return (\r\n    <div className=\"login-container\">\r\n      <LoginForm \r\n        onSubmit={handleLogin}\r\n        onForgotPassword={() => navigate('/forgot-password')}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## CLI Commands\r\n\r\n### Publish Templates\r\n\r\n```bash\r\n# Basic usage\r\nnpx @emmanuel-saleem/auth-ui publish\r\n\r\n# With options\r\nnpx @emmanuel-saleem/auth-ui publish --framework=bootstrap --output=./auth-components\r\n\r\n# Help\r\nnpx @emmanuel-saleem/auth-ui publish --help\r\n```\r\n\r\n**Options:**\r\n- `--framework, -f`: CSS framework (tailwind, bootstrap, vanilla)\r\n- `--output, -o`: Output directory for published files\r\n- `--help, -h`: Show help message\r\n\r\n## Migration Guide\r\n\r\n### From Other Auth Libraries\r\n\r\n#### From React Hook Form + Custom Components\r\n\r\n```tsx\r\n// Before\r\nimport { useForm } from 'react-hook-form';\r\nimport { zodResolver } from '@hookform/resolvers/zod';\r\n\r\nfunction LoginForm() {\r\n  const { register, handleSubmit, formState: { errors } } = useForm({\r\n    resolver: zodResolver(loginSchema)\r\n  });\r\n  \r\n  // Custom form implementation...\r\n}\r\n\r\n// After\r\nimport { LoginForm } from '@emmanuel-saleem/auth-ui';\r\n\r\nfunction LoginPage() {\r\n  return <LoginForm onSubmit={handleLogin} />;\r\n}\r\n```\r\n\r\n#### From UI Libraries (Material-UI, Ant Design)\r\n\r\n```tsx\r\n// Before\r\nimport { TextField, Button } from '@mui/material';\r\n\r\n// After\r\nimport { LoginForm } from '@emmanuel-saleem/auth-ui';\r\n```\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.\r\n\r\n## Author\r\n\r\n[Emmanuel Saleem](https://www.linkedin.com/in/es77)\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## Support\r\n\r\n- 📖 [Documentation](https://github.com/es-77/auth-ui)\r\n- 🐛 [Issue Tracker](https://github.com/es-77/auth-ui/issues)\r\n- 💬 [Discussions](https://github.com/es-77/auth-ui/discussions)\r\n\r\n## Changelog\r\n\r\nSee [CHANGELOG.md](CHANGELOG.md) for a list of changes and version history.\r\n","readmeFilename":"README.md","_rev":"1-8907e0445bdd88f966c36081fb355b95"}