→ Routing & Layout
Standalone Gate
The fastest path to a working gate: wrap your app, pass a hash, done.
Best used for The fastest possible integration — wrapping an entire app with minimal configuration.
For the two-line integration: generate a hash, wrap your app, ship it. No config to reason about.
- components
- knock-codes
- core
- react
"use client";
import type { ReactNode } from "react";
import { KnockCodes } from "./KnockCodes.tsx";
import type { GateWrapperVariant } from "./GateWrapper.tsx";
import type { KnockCodesConfig } from "./types.ts";
export interface StandaloneGateProps extends Pick<KnockCodesConfig, "expectedHash" | "verify"> {
children: ReactNode;
/** @default "This page is protected" */
heading?: string;
/** Escape hatch for embedding a Standalone Gate somewhere other than a real app root (a demo, a docs page). @default "page" */
variant?: GateWrapperVariant;
}
/**
* The fastest path to a working gate: wrap your app, pass a hash, done.
* Deliberately exposes a smaller surface than `<KnockCodes>` — no storage,
* timeout, or activity-tracking props — reach for `<KnockCodes>` directly
* once you need those.
*/
export function StandaloneGate({ children, heading, expectedHash, verify, variant }: StandaloneGateProps) {
return (
<KnockCodes expectedHash={expectedHash} verify={verify} labels={heading ? { heading } : undefined} variant={variant}>
{children}
</KnockCodes>
);
}
Add this block to your project
CLI
npx shadcn@latest add http://localhost:3000/r/react/standalone-gate.jsonRunning this site somewhere other than localhost? Set NEXT_PUBLIC_SITE_URL and this command switches to that host automatically.
Also installs
- Knock Codes Core
- Knock Codes Types
- useKnockCodes
- cx (classname helper)
- Gate Wrapper
- PIN Input
- Knock Codes
Files created (11)
- components/knock-codes/core/hash.ts
- components/knock-codes/core/verify.ts
- components/knock-codes/core/session.ts
- components/knock-codes/core/storage.ts
- components/knock-codes/react/types.ts
- components/knock-codes/react/useKnockCodes.ts
- components/knock-codes/react/cx.ts
- components/knock-codes/react/GateWrapper.tsx
- components/knock-codes/react/PinInput.tsx
- components/knock-codes/react/KnockCodes.tsx
- components/knock-codes/react/StandaloneGate.tsx
No CLI? Copy the files by hand
- Open the Code tab in the preview above.
- Create each path listed below in your project and paste its contents in.
- Do the same for anything listed under “Also installs”, if present.
→ Props
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| expectedHash | string | — | SHA-256 hex hash to verify against, for local mode. |
| verify | VerifyFn | — | Custom async verification function, for server mode. |
| children * | ReactNode | — | Rendered once unlocked. |
| heading | string | "This page is protected" | Overrides just the heading — for everything else, use Knock Codes directly. |
| variant | "page" | "inline" | "page" | Escape hatch for embedding a demo somewhere other than a real app root — a docs page, this gallery's own preview. |
Accessibility
Same access-code entry UI as Knock Codes — full keyboard and screen-reader support inherited, none of it re-implemented.
Customization
Deliberately a smaller prop surface than Knock Codes — just `expectedHash`/`verify`, `children`, and an optional `heading`. Reach for `<KnockCodes>` directly the moment you need storage/timeout/activity-tracking control.
→ Compose with
Blocks that pair well with this one
These combine naturally with this block, whether as a shared shell, a shared session, or a common fallback.