How to password protect a website or web app

Vercel

1. Open the project in the Vercel dashboard and go to Settings, then Deployment Protection.
2. In Password Protection, turn the toggle on.
3. Choose what to protect. Standard Protection leaves your production domain open, so pick All Deployments to cover the main address too.
4. Enter a password and select Save. Visitors type it once per deployment, and a cookie remembers it.

What it costs Pro plan only: $20 a month for each protected project. Included on Enterprise, not available on Hobby.

The free option on every plan is Vercel Authentication, which now covers production too. Visitors sign in with a Vercel account that has access to the project, so each coworker needs one.

Netlify

1. Open the site and go to Project configuration, General, Visitor access, Password Protection.
2. Select Configure Password Protection, then Basic password protection, and enter the password.
3. Select All deploys so the live site is covered as well as previews, then Save.
4. On newer credit-based Pro plans the same setting is under Visitor access, Project visibility: choose Password.

/*  Basic-Auth: dana:a-long-password sam:another-long-password

What it costs Pro plan ($20 a month, unlimited members) or Enterprise. Not available on Free or Personal.

For a username and password on part of the site, Pro and Enterprise also accept a Basic-Auth rule in a _headers file, like the one below. Netlify notes that basic auth has no way to log out.

Cloudflare Access

1. Your domain has to be on Cloudflare. In the dashboard, go to Zero Trust, Integrations, Identity providers, and add One-time PIN.
2. Go to Access controls, Applications, select Create new application, then Self-hosted and private, and add your site’s hostname.
3. Add an Allow policy. Use Emails ending in with @yourcompany.com for a whole company, or Emails for named people. Access denies everyone else by default.
4. Select Create. Visitors type their email, get a PIN that works once for 10 minutes, and are let in.

What it costs Free for up to 50 users, then $7 per user a month, billed yearly.

This isn’t a shared password: each person proves they read their own inbox, so you can see and remove people one by one.

A Cloudflare Worker with basic auth

1. Start from Cloudflare’s basic auth example for Workers. It asks the browser for a username and password and compares them in a way that doesn’t leak the password through timing.
2. Store the password as a secret, not in the code, with the command below.
3. Serve it over HTTPS only. Basic auth sends the password unencrypted otherwise.

npx wrangler secret put PASSWORD

What it costs Workers Free covers 100,000 requests a day. Workers Paid starts at $5 a month.

Cloudflare marks its example as not suitable for production and points to Cloudflare Access instead.

Your own server

1. Install the htpasswd tool (package apache2-utils on Debian and Ubuntu, httpd-tools on Red Hat) and create a password file with one line per person.
2. In nginx, add auth_basic and auth_basic_user_file to the site, as below. In Apache, use AuthType Basic, AuthUserFile and Require valid-user.
3. Keep the password file outside the web folder, and use HTTPS. Apache’s docs warn that basic auth sends the password unencrypted.

sudo htpasswd -c /etc/apache2/.htpasswd dana

# nginx
location / {
    auth_basic           "Staff only";
    auth_basic_user_file /etc/apache2/.htpasswd;
}

What it costs Free on a server you already run.

Basic auth can hold a separate password for each person, which is better than one shared password. You still add and remove people by hand on the server.