Embedded Gate
A copy-paste React access screen for gating a widget or section inside an existing layout — Knock Codes, fixed to the inline shell. Zero dependencies.
Best used for Gating one section of a longer page — a sidebar widget or a mid-page panel.
The section-level counterpart to Standalone Gate's whole-app usage — same component, contained footprint.
Minimal setup
<EmbeddedGate expectedHash={process.env.NEXT_PUBLIC_KNOCK_HASH}>
<SidebarWidget />
</EmbeddedGate>
Sits inline inside existing layout:
- components
- knock-codes
- core
- react
"use client";
import { KnockCodes, type KnockCodesProps } from "./KnockCodes.tsx";
export type EmbeddedGateProps = Omit<KnockCodesProps, "variant">;
/**
* `<KnockCodes>` fixed to the "inline" shell — sits naturally inside an
* existing layout (a sidebar widget, a section of a longer page) instead of
* taking over the full viewport like the page-variant default.
*/
export function EmbeddedGate(props: EmbeddedGateProps) {
return <KnockCodes {...props} variant="inline" />;
}
Add this block to your project
Recommended
npx shadcn@latest add @knock-codes/embedded-gateAlso installs
- Knock Codes Core
- Knock Codes Types
- useKnockCodes
- cx (classname helper)
- Gate Wrapper
- PIN Input
- Knock Codes
These install together as one atomic unit — even a presentational or read-only piece needs the full verification stack (hook, types, core) behind it to actually run.
Files created (12)
- 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/KnockCodesContext.tsx
- 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/EmbeddedGate.tsx
Other ways
GitHub shorthand
npx shadcn@latest add trivedi-vatsal/knock-codes/embedded-gateCopy 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.
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. |
| storage | "localStorage" | "sessionStorage" | "memory" | "localStorage" | Where the unlocked session persists. |
| timeout | number | 1800000 | Session lifetime in milliseconds. |
| children * | ReactNode | — | Rendered once unlocked. |
| labels | KnockCodesLabels | — | Overrides for every user-facing string. |
Exactly one of expectedHash or verify is required.
Accessibility
Identical to Knock Codes — only the outer positioning changes, not the semantics or keyboard flow.
Customization
Same full prop surface as Knock Codes, minus `variant` (fixed to "inline"). Use it for a sidebar widget or a gated section partway down a longer page, where a full-viewport takeover would be wrong.
Need a hash? Use the hash generator on Getting Started — computed locally, never sent anywhere.
The honest version
Knock Codes stops casual visitors, search engines, and forwarded links. Local mode does not stop anyone who opens DevTools — the hash ships in your client bundle by design. Server mode (swap one prop) hides the hash from the client; children you already bundled are still in the JavaScript, and a forged session works unless you wire validateSession. A velvet rope, with an optional real lock. Never marketed as more than that.
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.
- Knock CodesA copy-paste React access screen for gating a whole page or app root — local hash or server verification, one prop swap between them. Zero dependencies.
- Standalone GateA copy-paste React access screen for the fastest possible integration — wrap your app, pass a hash, done. Zero dependencies.
- Protected CardA copy-paste React access screen for gating one card in a dashboard grid — blurred preview, inline unlock. Zero dependencies.