react-access-kit

A secure, customizable React access-control wrapper. Protect pages or components with passwords and roles, with optional auto-lock and persistent storage.

🔒 You can even rotate/change keys to invalidate old sessions.

Features

• Role-based access control (admin, viewer, etc.)
• Password-protected wrapper component (<AccessGate>)
• Optional persistent storage (encrypted in localStorage)
• Timeout auto-lock per role
• Fully customizable prompt UI with <PasswordPrompt> or your own component
• Optional secretKey to rotate/change keys for security

Installation

npm install react-access-kit
# or
yarn add react-access-kit

Basic Usage

import React from "react";
import { AccessGate, PasswordPrompt } from "react-access-kit";

export default function App() {
  return (
    <AccessGate
      roles={{ admin: "1234", viewer: "abcd" }}
      role="admin"
      timeoutMinutes={5}
      secretKey="my-custom-key"
      renderPrompt={({ role, onSubmit, error }) => (
        <PasswordPrompt
          role={role}
          onSubmit={onSubmit}
          error={error}
          title="Admin Login"
        />
      )}
    >
      <h1>Secret Admin Area 🚀</h1>
      <p>Only visible if you know the password.</p>
    </AccessGate>
  );
}

AccessGate Props

| Prop | Type | Default | Description | | ---------------- | ---------------------- | ------------------ | --------------------------------------- | | roles | Record<string, string> | required | Role-password map ({ admin: "1234" }) | | role | string | required | Current role to check | | title | string | "Enter Password" | Default title for password prompt | | persist | boolean | true | Store unlocked roles in localStorage | | secretKey | string | optional | Custom encryption key for storage | | timeoutMinutes | number | optional | Auto-lock after X minutes | | onSuccess | () => void | optional | Callback when unlock succeeds | | renderPrompt | function | optional | Render custom password prompt |

useAccess Hook

const { unlockedRoles, hasAccess, unlock, lock, loading } = useAccess({
  roles: { admin: "1234" },
  persist: true,
  secretKey: "my-key",
  timeoutMinutes: 5,
});

• unlockedRoles: array of unlocked roles
• hasAccess(role): boolean if role is unlocked
• unlock(role, password): try to unlock role
• lock(role?): lock one or all roles
• loading: boolean, true while restoring state from storage

PasswordPrompt Component

Simple default password form; can be used standalone or via renderPrompt:

<PasswordPrompt
  role="admin"
  onSubmit={(password) => unlock("admin", password)}
  title="Enter Admin Password"
  error="Invalid password"
/>

Props:

• role: string, role name
• onSubmit: (password: string) => void
• title: string
• placeholder: string
• buttonLabel: string
• error: string
• style: React.CSSProperties

Notes

• Rotation / changing keys: Use secretKey to rotate/change encryption keys. Old sessions will automatically be invalidated.
• Works in static hosting (Netlify, GitHub Pages, Vercel).
• Fully customizable UI via renderPrompt or <PasswordPrompt>.

Example: Custom Prompt

<AccessGate
  roles={{ admin: "1234" }}
  role="admin"
  renderPrompt={({ role, onSubmit, error }) => (
    <div style={{ padding: 20, border: "1px solid red" }}>
      <h2>{role} Login</h2>
      {error && <p>{error}</p>}
      <input type="password" onChange={(e) => onSubmit(e.target.value)} />
    </div>
  )}
>
  <h1>Protected Content</h1>
</AccessGate>