🚀 Fiction Auth Package - A Reusable Authentication Solution for React

A simple and reusable authentication package for React applications. It provides built-in signup, signin, protected routes, and user authentication management.

📌 Features

✅ Easy Authentication - Pre-built signup and signin components
✅ JWT-based Authentication - Secure login system
✅ Protected Routes - Restrict access to authenticated users
✅ User Management - Fetch user profile automatically
✅ Uses HTTP-only Cookies - Secure session management
✅ No Hardcoded Routes - Developers can choose where to redirect

⚡ Installation

Install the package using npm or yarn:

npm install fiction-auth-package-


⚡ Step 3: Installation Instructions
Tell users how to install your package using npm or yarn.


## ⚡ Installation

Install the package using **npm** or **yarn**:

```sh
npm install fiction-auth-package-


or using yarn:
yarn add fiction-auth-package-



📌 **Tip:** If your package has **peer dependencies**, mention that they must be installed.

---

### 🔧 **Step 4: Basic Usage Guide**
Show users **how to use the package** with a **simple example**.

```md
## 🔧 Basic Usage

### 1️⃣ **Wrap Your App with `AuthProvider`**
The `AuthProvider` should **wrap your entire application** to manage authentication state.

#### Example (App.js or Layout.js)
```jsx
import { AuthProvider } from "fiction-auth-package-";

function MyApp({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

export default MyApp;




---

### 📌 **Step 5: Explain the Authentication Components**
Explain how to use **Signin and Signup components** from your package.

```md
## 🔑 Authentication Components

### 2️⃣ **Use Built-in `Signin` & `Signup` Components**
Your package includes pre-built authentication components.

#### Example (Authentication Page)
```jsx
import { Signin, Signup } from "fiction-auth-package-";
import { useState } from "react";

export default function AuthPage() {
  const [showSignup, setShowSignup] = useState(false);

  return (
    <div>
      {showSignup ? (
        <Signup onSignupSuccess={() => setShowSignup(false)} />
      ) : (
        <Signin />
      )}
    </div>
  );
}



---

### 🔐 **Step 6: Protect Routes with `ProtectedRoute`**
Your package includes **route protection** to restrict access to logged-in users.

```md
## 🔐 Protecting Routes

### 3️⃣ **Restrict Page Access Using `ProtectedRoute`**
Use `ProtectedRoute` to **protect pages** from unauthorized access.

#### Example (Dashboard Page)
```jsx
import { ProtectedRoute } from "fiction-auth-package-";
import { Navigation } from "fiction-auth-package-";

const Dashboard = () => {
  return (
    <ProtectedRoute>
      <div className="container mx-auto p-4">
        <Navigation />
        <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
        <p>Welcome to your dashboard!</p>
      </div>
    </ProtectedRoute>
  );
};

export default Dashboard;



📌 **If the user is not logged in, they will see the Signin component instead of the protected content.**

---

### 🔄 **Step 7: Manage User Authentication with `useAuth`**
Explain how users can **access authentication state** using the `useAuth` hook.

```md
## 🔄 Managing Authentication State

### 4️⃣ **Use `useAuth` Hook for Authentication**
The `useAuth` hook provides authentication functions.

#### Example (Show User Info & Logout Button)
```jsx
import { useAuth } from "fiction-auth-package-";

const Navbar = () => {
  const { user, logout } = useAuth();

  return (
    <nav className="p-4 bg-gray-800 text-white">
      {user ? (
        <div>
          <span>Welcome, {user.name}</span>
          <button onClick={logout} className="ml-4 bg-red-500 px-3 py-1 rounded">
            Logout
          </button>
        </div>
      ) : (
        <span>Not logged in</span>
      )}
    </nav>
  );
};

export default Navbar;



---

### 🎯 **Step 8: Customization Options**
Allow developers to **customize** how the package works.

```md
## 🎯 Customization

### 5️⃣ **Customize Redirection After Login**
By default, users are redirected to `"/dashboard"`. You can **override** this:

```jsx
<Signin redirectTo="/home" />



---
📌 Developers can pass a redirectTo prop to change where users go after logging in.

### 🛠 **Step 9: API Endpoints Required**
If your package relies on a backend, **list the required API endpoints**.

```md
## 🛠 Backend API Requirements

Your backend should have these endpoints:

| Method | Endpoint           | Description                           |
|--------|-------------------|--------------------------------------|
| POST   | `/api/auth/signup` | Register a new user                 |
| POST   | `/api/auth/signin` | Authenticate user & return session  |
| GET    | `/api/auth/profile` | Get authenticated user profile      |
| POST   | `/api/auth/logout` | Logout user & clear session         |

✅ **Ensure these endpoints return JSON responses** and use **HTTP-only cookies**.


❓ Step 10: Common Issues & Solutions
Provide a troubleshooting section for common problems.

## ❓ Common Issues & Solutions

### 1️⃣ Getting "Module Not Found" Error?
Try reinstalling dependencies:

```sh
rm -rf node_modules package-lock.json
npm install


Ensure you pass a redirectTo prop like:
<Signin redirectTo="/dashboard" />


3️⃣ Logout Not Clearing Session?
Your backend should clear cookies on logout:
res.clearCookie("token").json({ message: "Logged out successfully" });



---

### 🏆 **Step 11: Add License & Contribution Guidelines**
Encourage developers to **contribute** to your package.

```md
## 📜 License

This package is licensed under the **MIT License**.

---

## ⭐ Support & Contributions

- Found a bug? [Open an issue](https://github.com/your-username/react-auth-package/issues)
- Want a new feature? Submit a PR!
- Give a ⭐ if this package helps you! 🚀

🎨 Styling

This package includes built-in styles using Tailwind CSS. To use them:

1. Import the styles in your app's entry point (e.g., App.js or index.js):

import 'fiction-auth-package-/dist/styles.css';

2. If you're using Next.js, import the styles in _app.js:

// pages/_app.js
import 'fiction-auth-package-/dist/styles.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

3. If you're using Create React App, import the styles in index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'fiction-auth-package-/dist/styles.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));