# How to password protect a website or web app

> Canonical: https://teamonly.dev/guides/password-protect-a-website

Last updated 25 October 2026. Written by TeamOnly. We make a company-login host, so every price and step below links to the vendor's own pages.

**Quick answer:** Turn on the host's password feature: Password Protection on Vercel Pro ($20 a month per project) or Netlify Pro, a Cloudflare Access policy in front of the site, or HTTP basic auth on your own server. The password has to be checked by the host, not by the site's own code.

A shared password is fine for showing a draft to a client. For a tool your coworkers use every day, a company login works better. Steps for each host are below, then the difference between the two.

## Where can I add a password, and what does it cost?

Every common host can do it. The difference is the plan you need and whether visitors type one shared password or sign in as themselves.

| Host | How it works | Plan you need | Cost |
|---|---|---|---|
| Vercel | Password Protection: one password per project | Pro or Enterprise. Not on Hobby | $20 a month per protected project on Pro, plus the Pro plan |
| Netlify | Site-wide password, or basic auth in a _headers file | Pro or Enterprise. Not on Free or Personal | Pro is $20 a month, unlimited members |
| Cloudflare Access | Each person gets a one-time PIN by email, or signs in with your identity provider | Your domain on Cloudflare | Free to 50 users, then $7 per user a month, billed yearly |
| Cloudflare Worker | HTTP basic auth written in the Worker | Any Workers plan | Free up to 100,000 requests a day. Paid starts at $5 a month |
| Your own server | HTTP basic auth in nginx or Apache | None | Free on a server you already run |

Checked 25 October 2026. Sources: [Vercel Password Protection](https://vercel.com/docs/deployment-protection/methods-to-protect-deployments/password-protection), [Vercel Deployment Protection](https://vercel.com/docs/deployment-protection), [Vercel changelog, 9 September 2026](https://vercel.com/changelog/protect-production-deployments-for-free-on-every-plan), [Vercel pricing](https://vercel.com/pricing), [Netlify password protection](https://docs.netlify.com/manage/security/secure-access-to-sites/password-protection/), [Netlify basic authentication](https://docs.netlify.com/manage/security/secure-access-to-sites/basic-authentication-with-custom-http-headers/), [Netlify pricing](https://www.netlify.com/pricing/), [Cloudflare Access plans](https://www.cloudflare.com/zero-trust/products/access/), [Cloudflare one-time PIN](https://developers.cloudflare.com/cloudflare-one/integrations/identity-providers/one-time-pin/), [Cloudflare self-hosted applications](https://developers.cloudflare.com/cloudflare-one/access-controls/applications/http-apps/self-hosted-public-app/), [Cloudflare Workers basic auth example](https://developers.cloudflare.com/workers/examples/basic-auth/), [Workers pricing](https://developers.cloudflare.com/workers/platform/pricing/), [nginx basic authentication](https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-http-basic-authentication/), [Apache authentication](https://httpd.apache.org/docs/2.4/howto/auth.html).

## How to turn it on, host by host

Pick the host your site is on. Each one takes a few minutes.

### 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**.

*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. Netlify notes that basic auth has no way to log out.

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

### 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.

**Front-end code:** A password check inside a React, Vue or plain JavaScript page doesn't protect anything. That code is downloaded to every visitor's browser, so the password and everything behind it can be read. The check has to happen on the host, before the page is sent.

## When is a password enough?

A shared password is fine for:

- A draft or demo for a client or someone outside the company, for a few days.
- A staging copy of a public site you don't want indexed yet.
- Anything where it doesn't matter who looked, only that strangers didn't.

Use a company login for:

- A tool coworkers use every day, like an expense approver or an inventory tracker.
- Anything with customer, staff or money data in it.
- Any app that should know who did what, or that people should lose access to when they leave.

## Shared password vs company login

A company login means each person signs in with the work account your company already gives them: Google, Microsoft, or a code sent to their work email.

| | Shared password | Company login |
|---|---|---|
| Who gets in | Anyone who has the password, wherever they got it | Only people with an account on your company's email domain |
| Removing one person | Change the password and send the new one to everyone else | Take them off the list, or turn off their work account when they leave |
| Knowing who used it | No. Everyone looks the same to the app | Yes. The app gets each person's name and email |
| If it leaks | It works for whoever finds it, in a chat thread, an email or a screenshot | There is nothing to leak. A stranger would need a working account at your company |
| Cost | $20 a month per project on Vercel Pro. A Pro plan on Netlify. Free on your own server | Free to 50 users on Cloudflare Access, if you set it up. $19 a month on TeamOnly, with hosting included |

## How to put an internal app behind company login with TeamOnly

If the site is really an internal tool, you can skip the password. TeamOnly hosts the app and checks your company login before any of it loads.

1. **Start free with your work email.** Try it free for 14 days, no card needed. Then Builder is $19 a month for one builder and up to three apps. Your company's email domain becomes the door. https://teamonly.dev/pricing#trial
2. **Run `npx teamonly init` in your project.** It adds instructions for Claude Code and Cursor, and the small library your app uses for the signed-in person, the database and files.
3. **Sign in, then deploy.** Run `npx teamonly login` once, then `npx teamonly deploy`. You get a link like `expenses.acme.teamonly.app`.
4. **Send the link.** Coworkers sign in with their work Google or Microsoft account, or a code sent to their work email. You can narrow it to named people with `npx teamonly access only dana@acme.com`.

**Internal apps only:** TeamOnly is only for tools your coworkers use. Public websites aren't allowed, so for a public site with a password, use one of the hosts above. More: [how company login works](https://teamonly.dev/company-login), [sharing an AI-built app with your team](https://teamonly.dev/guides/share-an-ai-built-app-with-your-team).

## Questions people ask

### How do I password protect a website for free?

On your own server, HTTP basic auth costs nothing. On Cloudflare, Access is free for up to 50 users and can email each person a one-time PIN, but your domain has to be on Cloudflare. Vercel's Hobby plan and Netlify's Free and Personal plans don't offer password protection.

### How much is Vercel password protection?

On the Pro plan it costs $20 a month for each project you protect, on top of Pro itself. It is included on Enterprise and not available on Hobby. Vercel Authentication is free on every plan, but visitors need a Vercel account with access to the project.

### Does Netlify have password protection on the free plan?

No. Netlify's docs say password protection isn't available on the Free and Personal plans. It is on Pro, which is $20 a month with unlimited members, and on Enterprise.

### Can I password protect a React app?

Yes, but not from inside React. Anything in your React code is sent to the browser, so a password check there can be read and skipped. Put the password on the host instead (Vercel, Netlify, Cloudflare or your server), so nothing loads until it is entered.

### Is a shared password secure enough for an internal tool?

It keeps strangers and search engines out. It doesn't tell you who is using the tool, and you can't take one person's access away without changing it for everyone. For a tool coworkers use every day, a login with each person's work account is the safer choice.

### Can I password protect a public website with TeamOnly?

No. TeamOnly is only for internal apps that coworkers sign in to with their work account. Public sites aren't allowed. For a public site with a password, use one of the hosts on this page.

## Keep reading

- [Company-only login](https://teamonly.dev/company-login)
- [Share an AI-built app with your team](https://teamonly.dev/guides/share-an-ai-built-app-with-your-team)
- [Every option, side by side](https://teamonly.dev/compare)
- [Pricing](https://teamonly.dev/pricing)

Try it free for 14 days, no card: https://teamonly.dev/pricing#trial. Or subscribe: https://teamonly.dev/pricing#subscribe (Builder $19/mo, Team $249/mo)
Not ready? Get updates: https://teamonly.dev/waitlist