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

```sh
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.

---

$3

Show users how to use the package with a simple example.

`md

🔧 Basic Usage

$3

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 (



);
}

export default MyApp;




---

$3

Explain how to use Signin and Signup components from your package.

`md

🔑 Authentication Components

$3

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 (

{showSignup ? (
setShowSignup(false)} />
) : (

)}

);
}



---

$3

Your package includes route protection to restrict access to logged-in users.

`md

🔐 Protecting Routes

$3

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 (

Dashboard

Welcome to your dashboard!

);
};

export default Dashboard;



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

---

$3

Explain how users can access authentication state using the useAuth hook.

`md

🔄 Managing Authentication State

$3

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 (

);
};

export default Navbar;



---

$3

Allow developers to customize how the package works.

`md

🎯 Customization

$3

By default, users are redirected to "/dashboard". You can override this:

`jsx




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

$3

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

$3

Try reinstalling dependencies:

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


Ensure you pass a redirectTo prop like:



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



---

$3

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

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

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

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

function MyApp({ Component, pageProps }) {
return ;
}

export default MyApp;
`

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

``javascript
// 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(, document.getElementById('root'));