user-auth-pkg/README.md

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.

# 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:

````jsx
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
````