# Passcode For Testing
> Add a 3-digit combination lock passcode screen to a Meta Display Glasses webapp to gate public access during testing. Offered as an opt-in step within /test-on-device since Vercel deployment protection is disabled for glasses browser compatibility.
- Skill: `facebook/passcode-for-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add facebook/passcode-for-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/facebook/passcode-for-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: facebook (https://skillmd.com/u/facebook)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/facebook/passcode-for-testing
---
# Passcode for Testing
Add a combination lock screen that gates access to your webapp during Vercel preview deployments. Since `/test-on-device` disables Vercel's deployment protection, this prevents the public from accessing your app.
This skill is offered as an opt-in by `/test-on-device` (Step 0.5) — it is not auto-invoked. `/publish-to-vercel` will not add a passcode, and if one already exists it will offer to disable the routing for production (the lock files stay on disk).
## Prerequisites
- Existing webapp with `index.html` (created via `/create-webapp` or manually)
- The app directory must have `server.js` and `vercel.json` (created by `/create-webapp` or `/test-on-device`)
## Steps
### 1. Gather Information
Ask the user:
- **Passcode** — 3 digits, each 0-9 (e.g. 2-4-7)
### 2. Create `lock.html`
Read [templates/lock.html](templates/lock.html) and write it to the app directory.
Replace the two placeholder values in the `
```
Replace `` with the same key used in `lock.html` (e.g. `ipl_live_scores_unlocked`).
This prevents bypassing the lock by navigating directly to `index.html`.
## Verify
- [ ] `lock.html` exists in the app directory
- [ ] Passcode digits and `STORAGE_KEY` are set correctly in `lock.html`
- [ ] `server.js` serves `lock.html` on root path `/`
- [ ] `vercel.json` has the `/` → `/lock.html` rewrite before the catch-all
- [ ] `index.html` has the localStorage guard script in ``
- [ ] Correct passcode shows green digits, "Unlocked" animation, and redirects
- [ ] After unlock, refreshes and new tabs skip the lock (localStorage persists)
- [ ] Direct navigation to `/index.html` redirects back to lock if not unlocked
## Troubleshooting
| Issue | Solution |
|-------|----------|
| Lock screen doesn't appear | Check `server.js` serves `lock.html` on `/` and `vercel.json` has the rewrite |
| Can bypass lock via `/index.html` | Ensure the localStorage guard script is in `index.html` `` |
| Wrong passcode unlocks | Verify `PASSCODE` array in `lock.html` matches the user's chosen digits |
| Unlock doesn't redirect | Ensure `STORAGE_KEY` is consistent between `lock.html` and `index.html` guard |
## Related Skills
- `/test-on-device` — Offers this skill as an opt-in (Step 0.5) before deploying
- `/create-webapp` — Create a new webapp before adding passcode protection
- `/publish-to-vercel` — Will not add a passcode; if one already exists, offers to disable the routing for production while leaving the lock files on disk