→ How it works
Protect a page in five steps
No account, no backend to stand up first. Local mode is deterrence, not protection — see the security model for the honest threat model, and swap in a verify function for server-mode protection later without changing your markup.
Hash your code
Every template page has a live hash generator built in — type or generate a code there, get the hash back. The plaintext never touches a file, only the hash does.
Copy the template
Pick a style, then copy the one file it ships as — or run its install command. There's no package to add to node_modules.
Set the hash as an env var
Store the hash (never the code) in your framework's public env var — VITE_KNOCK_CODES_HASH, NEXT_PUBLIC_KNOCK_CODES_HASH, or equivalent. The generator gives you this line pre-filled.
Choose storage and timeout behavior
Pick where the unlocked session lives (memory, localStorage, or sessionStorage) and how long it lasts — a fixed timeout, or one that slides forward on activity. Session Provider and every template default to something reasonable; override via props when they don't fit.
Upgrade to server verification when needed
If bypassing this gate would actually matter, swap expectedHash for a verify function pointing at a small endpoint — same component, same markup, one prop different. See the security model for reference server templates and rate-limiting guidance.
Never commit or ship the plaintext code — not in an env file, not in a comment, not in a commit message. Only the hash from step 1 should ever leave your local machine.
import { KnockCodesTemplate } from "@/components/knock-codes/react/KnockCodesTemplate";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<KnockCodesTemplate expectedHash={process.env.NEXT_PUBLIC_KNOCK_CODES_HASH}>
{children}
</KnockCodesTemplate>
</body>
</html>
);
}