limit-cover-ui

React component for wallet-based access control. Wrap your app with <AccessGate> to restrict access to whitelisted wallet addresses.

Install

bun add limit-cover-ui

Quick Start

import { AccessGate } from "limit-cover-ui";

function App() {
  return (
    <AccessGate apiUrl="https://limit-cover-api.vercel.app">
      <YourProtectedContent />
    </AccessGate>
  );
}

When an unauthorized user visits your site, they'll see a full-screen gate page prompting them to connect their wallet. After connecting and signing, the component verifies their address against the whitelist via the API. Authorized users see your content; others are blocked.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | required | URL of your limit-cover-api deployment | | signMessage | string | "Access limit-cover" | Message the user signs with their wallet | | storageKey | string | "limit-cover-token" | localStorage key for persisting the JWT | | gatePage | React.ComponentType<GatePageProps> | built-in | Custom gate page component | | loading | React.ReactNode | null | Shown while validating an existing token |

Custom Gate Page

import { AccessGate } from "limit-cover-ui";
import type { GatePageProps } from "limit-cover-ui";

function MyGatePage({ onConnect, status, error }: GatePageProps) {
  return (
    <div>
      <h1>Members Only</h1>
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button onClick={onConnect} disabled={status === "signing"}>
        {status === "error" ? "Retry" : "Connect Wallet"}
      </button>
    </div>
  );
}

function App() {
  return (
    <AccessGate apiUrl="https://your-api.vercel.app" gatePage={MyGatePage}>
      <ProtectedContent />
    </AccessGate>
  );
}

Using the Hook Directly

For more control, use the useWalletAuth hook:

import { useWalletAuth } from "limit-cover-ui";

function MyComponent() {
  const { status, error, address, connect, disconnect } = useWalletAuth({
    apiUrl: "https://your-api.vercel.app",
    signMessage: "Access limit-cover",
    storageKey: "limit-cover-token",
  });

  if (status === "authorized") {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return <button onClick={connect}>Connect</button>;
}

Status Values

| Status | Description | |--------|-------------| | loading | Validating existing token on mount | | idle | No token, waiting for user action | | connecting | Requesting wallet connection | | signing | Waiting for user to sign the message | | verifying | Sending signature to API for verification | | authorized | Access granted | | error | Something went wrong (see error string) |

Backend Setup

This package requires a limit-cover-api deployment. See that project's README for setup instructions.

License

MIT