site-auth-react
v1.0.2
Published
Site auth react & next.js package
Downloads
11
Maintainers
Readme
Site Auth - Secure every deployment
Introduction
Site Auth is a unique authentication service designed to act as a secure gateway, ensuring that only specific, authorized users can access your website. It functions as an authentication layer that adds an extra level of security to any website by restricting access to verified users only.
Features
- Selective Access: Restrict access to your website to only authorized users.
- Seamless Integration: Easily integrates with your projects with our multi-framework support.
- Developer-Friendly: Designed for ease of use and quick implementation.
- Extensible: Easily extendable to meet your unique authentication needs.
- Dashboard Management: Provides an interface to manage website access, users, analytics, and more.
Installation
To install the SiteAuth package, run the following command:
npm install site-auth-react
Usage
Here's a step-by-step guide to quickly set up SiteAuth in your project. Choose the method that best suits your project and follow the instructions below.
React
Follow these steps to set up SiteAuth in your React app.
Note: TypeScript is also supported.
Create an account on Site Auth.
Get Website ID by adding your website and users to the SiteAuth dashboard.
Install Package:
npm install site-auth-react
Wrap your app with
SiteAuthProvider
inApp.js
:import { SiteAuthProvider } from "site-auth-react"; function App() { return ( <SiteAuthProvider> <YourAppComponents /> </SiteAuthProvider> ); }
Use the
SiteAuthScreen
component for authentication:import { SiteAuthScreen } from "site-auth-react"; function AuthPage() { return <SiteAuthScreen websiteId="your-website-id" />; }
Next.js
Follow these steps to set up Site Auth in your Next.js app.
Note: TypeScript is also supported.
Create an account on Site Auth.
Get Website ID by adding your website and users to the SiteAuth dashboard.
Install Package:
npm install site-auth-react
Use the
SiteAuthScreen
component for authentication:<SiteAuthScreen websiteId="your-website-id" />
Create a custom wrapper
SiteAuthWrapper
& useuseSiteAuth
hook to check authentication status:import { SiteAuthScreen, useSiteAuth } from "site-auth-react"; const SiteAuthWrapper = ({ children }) => { const { isAuthenticated, loading } = useSiteAuth(); if (loading) { // You can show a loading spinner here return <div>Loading...</div>; } return ( <> {!isAuthenticated && <SiteAuthScreen websiteId="your-website-id" />} {isAuthenticated && children} </> ); }; export default SiteAuthWrapper;
Wrap your app with
SiteAuthProvider
&SiteAuthWrapper
inlayout.js
:import { SiteAuthProvider } from "site-auth-react"; import SiteAuthWrapper from "./SiteAuthWrapper"; export default function RootLayout({ children }) { return ( <html lang="en"> <body> <SiteAuthProvider> <SiteAuthWrapper>{children}</SiteAuthWrapper> </SiteAuthProvider> </body> </html> ); }
Custom Hook
Site Auth provides a custom hook to help you manage authentication in your app.
useSiteAuth
A hook that provides authentication status and loading state.
import { useSiteAuth } from "site-auth-react";
function Dashboard() {
const { isAuthenticated, loading } = useSiteAuth();
if (loading) {
return <p>Loading...</p>;
}
if (!isAuthenticated) {
return <p>You need to log in</p>;
}
return <p>Welcome to the dashboard!</p>;
}
Dashboard
The SiteAuth dashboard provides a comprehensive interface for managing access control, websites, and users. Here’s an overview of its key features:
Access Control
Manage and restrict access to your website by specifying which users are allowed to authenticate and access the content.
- Define users and their respective passwords
Manage Websites
Easily manage multiple websites and control their authentication settings.
- Add new websites
- Edit website settings
- Delete websites
Analytics
View analytics on user activity, login attempts, and more.
- View user activity
- Track login attempts
- Date wise analytics
Profile Management
Manage user profile settings from the dashboard.
- Update profile information
- Change password
Examples
Here are some examples of how you can use SiteAuth in your projects.