user-auth-pkg

Under Development

🧾 LoginForm Component | React Login Form | Customizable Login Form

A highly customizable and reusable login form component built with React Hook Form, Yup, and Material UI, supporting image uploads, file inputs, CAPTCHA validation, and flexible UI overrides.

---

✨ Features | Login Form Features | Customizable Form Fields

• 🔄 Dynamic field rendering via configuration (custom field creation and dynamic fields)
• 🔐 Validation using Yup for strong form input validation
• 🧠 Smart form handling with react-hook-form for seamless form processing
• 🖼️ Built-in support for image uploads for profile pictures or other media
• 📄 File input support for document uploads
• 🔒 Google reCAPTCHA integration (v2) for CAPTCHA validation to prevent bots
• 🎨 Customizable components for form inputs and buttons (UI flexibility)
• 📡 Axios integration for form submission to a backend or API

---

💡 Example Usage

Below is an example of how to use the AuthRegisterForm component for a registration form:

import { Stack, Grid } from '@mui/material';
import { useRouter } from 'next/router';
import RegisterForm from 'user-auth-pkg';
import RegisterFormConfig from './RegisterFormConfig';
import { CustomInput, CustomButton, CustomImageInput, CustomSelect } from './CustomComponents';

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

  const handleSuccess = (response) => {
    console.log('✅ Registration response:', response);

    router.push({
      pathname: '/verify-code',
    });
  };

  const handleError = (err) => {
    console.error('❌ Registration Error:', err);
  };

  return (
    <Stack spacing={3}>
      <RegisterForm
        config={RegisterFormConfig().fields}
        onSuccess={handleSuccess}
        onError={handleError}
        buttonText="Sign Up"
        isLoadingText="Sending Request..."
        textFieldComponent={CustomInput}
        imageFieldComponent={CustomImageInput}
        buttonComponent={CustomButton}
        selectFieldComponent={CustomSelect}
        axiosConfig={{
          url: 'your-api-url',
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
        }}
        enableCaptcha
        captchaSiteKey="your-captcha-site-key"
      />
    </Stack>
  );
}

## 📂 GitHub Repository

Check out the source code and contribute to the project on [GitHub](https://github.com/Abdul-rehman-pwr/user-auth-pkg.git).

---

## 🚀 Installation | Install LoginForm React

To install the package and required dependencies, run the following commands:

```bash
npm install user-auth-pkg  # Install the package
npm install react react-dom react-hook-form yup axios react-google-recaptcha  # Install dependencies