simplesitepass-next
v0.1.0
Published
No-FOUC client-side app or page password protection via SimpleSitePass.com (Next.js/React).
Maintainers
vladracoareReadme
SimpleSitePass React/NextJS Component
Protect any page or your entire site with a simple authentication layer — ideal for Framer, Next.js, and other React-based sites.
This component wraps your content and only renders it if the visitor has been authenticated via SimpleSitePass.
Perfect for:
- Private pages (e.g., portfolio works, beta landing pages, documentation sites and so on)
- Internal tools
- Gated content previews
🚀 Features
- Quick setup – add one wrapper component to protect any React/NextJS page
- Auth + Token verification handled via SimpleSitePass
- No backend setup needed — works with your existing SimpleSitePass account
- Custom loading UI while verification happens
- Cookie-based session (default 2 hours)
- Works in Next.js, Framer, Create React App, etc.
📦 Installation
npm install simplesitepass-react🔑 How It Works
- You create a Site ID in your SimpleSitePass dashboard.
- You wrap your page (or the entire app) in the
<SimpleSitePass>component, passing yoursiteId. - On load, the component:
- Checks for a valid token in the URL or cookies
- If missing or invalid → redirects user to your SimpleSitePass auth page
- If valid → renders your content
- Tokens expire after 2 hours by default (configurable).
📖 Usage
"use client";
import SimpleSitePass from "simplesitepass-react";
export default function ProtectedPage() {
return (
<SimpleSitePass
siteId="YOUR_SITE_ID"
loadingComponent={<p>Checking access...</p>}
onAuthorized={() => console.log("User authorized!")}
>
<h1>Welcome to the private area</h1>
<p>This content is protected by SimpleSitePass.</p>
</SimpleSitePass>
);
}⚙️ Props
| Prop | Type | Default | Description |
|--------------------|-------------------|-----------------------------------------------------------------------------------------------|-------------|
| siteId | string | Required | Your SimpleSitePass Site ID (found in your dashboard) |
| loadingComponent | React.ReactNode | <p style="text-align:center;padding:24px;">Loading...</p> | What to display while verifying auth |
| cookieMaxAge | number | 7200 (2 hours) | How long the access token is valid (in seconds) |
| onAuthorized | () => void | undefined | Callback fired after user is successfully authorized |
| children | React.ReactNode | Required | The protected content to render once authorized |
🔍 Example: Protecting an Entire Next.js App
In app/layout.tsx:
"use client";
import SimpleSitePass from "simplesitepass-react";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<SimpleSitePass siteId="YOUR_SITE_ID" loadingComponent={<div>Loading...</div>}>
{children}
</SimpleSitePass>
</body>
</html>
);
}This ensures all pages are gated.
🔐 Security Notes
- The component hides your content until the token is validated.
- If JavaScript is disabled, the content will be visible — this is intentional for SEO compatibility. If you need complete blocking even with JS disabled, use a server-side auth method.
- Tokens are stored in cookies scoped to your domain.
🌐 Learn More
For more details, visit SimpleSitePass.com.