→ Private previews, opened with a code.
The access screen you copy-paste and ship
A complete, single-file “enter a code to continue” screen for private previews, staging pages, and client links — verification logic included. No backend required to start, no vendor lock-in ever. You own every line.
→ How it works
Protected in four steps
No account, no backend to stand up first.
Hash your code
Locally, in your browser console. The plaintext never touches a file.
Copy the template
One file, straight into your project — no package to maintain.
Set the env var
The hash goes in your framework's public env var, never the code.
Ship it
Wrap what you're protecting. Upgrade to server mode later, same markup.
→ Use cases
Built for the times you don't need real auth
One shared code, no accounts, no backend to stand up first.
Share work before it's public
Send a link to a client or stakeholder without it ending up indexed, forwarded, or crawled — the code is the only thing standing between the link and the open internet.
Keep pre-prod off search engines
A staging or preview deploy needs to be reachable by your team, not discoverable by everyone else. One shared code is usually all that's called for.
Soft-gate a low-risk internal tool
Everyone who has the code is already trusted — you're not modeling per-user permissions, just keeping the tool off a public URL.
→ Local mode vs. server mode
Start local, upgrade when it matters
Same component, one prop different — the honest trade-offs, in brief.
| Local mode | Server mode | |
|---|---|---|
| Setup | Paste a template, drop in a hash | One prop swap + a small endpoint |
| Hash visibility | Ships in the client bundle | Stays on your server |
| Rate limiting | Not possible | Yes, per identifier |
| Stops | Casual visitors, crawlers, forwarded links | Determined visitors too |
→ Templates
Complete screens, ready to copy
Each one is a single file — background, card, form, and verification logic included. Pick the look, wire a hash, ship it.
Branded Access Template
A split-screen, logo-forward restricted-access screen — brand panel on one side, code entry on the other.
Knock Codes Template
A complete, single-file restricted-access screen — dark backdrop, centered card, segmented code entry, support link, footer help text.
Minimal Access Template
The leanest restricted-access screen — a single masked field, a small plain card, no default footer copy.
Modal Access Template
Gates one section of an already-visible page — content stays mounted and blurred behind a centered dialog instead of disappearing entirely.
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) stops determined visitors. This is a velvet rope, with an optional real lock — never marketed as more than that.