A reusable React authentication package with Signup and Signin components.
npm install fiction-auth-package-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