Back to templates
Add a shared password gate to a page using a Netlify Edge Function. Not per-user auth — a single password anyone with access can use. Set `PROTECTED_PAGE_PASSWORD` with the password value in the Netlify dashboard under Site configuration > Environment variables for this to work.
Using your project's framework and a Netlify Edge Function, add simple password protection to a page on this site.
Page to protect: {{PAGE_PATH}}
The implementation should:
1. Create a Netlify Edge Function that intercepts requests to `{{PAGE_PATH}}`.
2. Check for a valid session cookie. If not present, show a password form instead of the page content.
3. When the correct password is submitted, set a session cookie (HttpOnly, Secure, SameSite=Strict, with a reasonable expiry like 24 hours) and redirect to the protected page.
4. The password form should match the site's design and include a clear error message for wrong passwords.
5. Read the password from a Netlify environment variable called `PROTECTED_PAGE_PASSWORD`.
6. **IMPORTANT: If the environment variable is not set, block access to the page entirely and show a message: "This page is not yet configured. The site owner needs to set the PROTECTED_PAGE_PASSWORD environment variable."** Never fail open.
7. Use the Web Crypto API (`SubtleCrypto`) to hash and compare passwords — do not compare plaintext.
8. Add the edge function configuration to `netlify.toml`.
9. Include a logout mechanism (e.g., a "Log out" link on the protected page that clears the cookie).
Do NOT set the environment variable.
This is a shared password — anyone with the password can access the page. This is NOT per-user authentication. It's suitable for early previews, internal pages, or staging content, not for protecting sensitive personal data.
Variables
The URL path to password-protect. Only this path will require a password.
Did you find this doc useful?
Your feedback helps us improve our docs.