Admin panel with a real login

The mistake it removes

Rebuilt in ~14/20 projects and flagged every time. Vibe Coder: '/admin is guarded only by robots noindex… the URL is guessable' and 'descriptions are trusted HTML at render time'. Coaching App: 'access tiers are cosmetic, not enforced'.

What the audit found

Named rather than summarized. The reasoning behind each one ships inside the block, so it travels with the code instead of living on a page you have to trust.

• Brute-force limiter is in-memory, so serverless coverage is per-instance minor · API cost & abuse safety
• Bearer token in sessionStorage is readable by any XSS on the same origin minor · Security

What you still have to do

A copied file cannot own your secrets, your host or your legal obligations. This is the part the block deliberately does not claim.

• Serve /admin over HTTPS only and put ADMIN_SECRET and ADMIN_PASSWORD_HASH in your host's secret store (Vercel/Netlify/Fly environment, or a secrets manager). The block enforces the auth check and escapes at render time; it cannot supply the transport or the credential, and a guessable secret defeats both.
• A keyboard-and-screen-reader pass on YOUR page. The block ships the wiring it can ship — aria-live on the status region, aria-label on the controls, aria-current on the active section and autocomplete on the password field — but color contrast, heading order and the focus order across everything around it are properties of the page you drop this into, and no test here can see them. Run one manual keyboard pass and one screen-reader pass before you launch.
• A rate limiter backed by a shared store (Redis/Upstash) or by your edge (Cloudflare, Vercel firewall). The brute-force limiter shipped here is in-memory, so on serverless it only slows an attacker who keeps hitting the same warm instance.
• Requires a server. There is no client-only mode on purpose — that is the failure this block exists to end.

What lands in your project

What you supply

• ADMIN_SECRET — <64 random hex chars — node -e "console.log(require('crypto').randomBytes(32).toString('hex'))">
• ADMIN_PASSWORD_HASH — <output of hashPassword('your-password') — never the password itself. SINGLE-QUOTE IT: the value contains `$`, which a shell, a sourced .env and docker-compose all expand, collapsing it to just `scrypt` (measured). A hash that does not arrive whole is REFUSED loudly — it is never treated as a wrong password>

Licensed MIT. It is a starting point, not a finished product.

Questions

Is Admin panel with a real login audited?

Yes. A full due-diligence audit was run on 2026-07-17 and the verdict was a pass.

What do I still have to do myself?

Serve /admin over HTTPS only and put ADMIN_SECRET and ADMIN_PASSWORD_HASH in your host's secret store (Vercel/Netlify/Fly environment, or a secrets manager). The block enforces the auth check and escapes at render time; it cannot supply the transport or the credential, and a guessable secret defeats both.

How do I get this code?

Download the Playground, start a new app, and tick “An admin back office to manage it”. The block is written into your project as ordinary source you can read and edit.