Cómo proteger con contraseña un sitio web o una app web

Vercel

1. Abre el proyecto en el panel de Vercel y ve a Settings y luego a Deployment Protection.
2. En Password Protection, activa el interruptor.
3. Elige qué proteger. Standard Protection deja abierto tu dominio de producción, así que elige All Deployments para cubrir también la dirección principal.
4. Escribe una contraseña y selecciona Save. Los visitantes la escriben una vez por despliegue, y una cookie la recuerda.

Cuánto cuesta Solo en el plan Pro: $20 al mes por cada proyecto protegido. Incluida en Enterprise, no disponible en Hobby.

La opción gratis en todos los planes es Vercel Authentication, que ahora cubre también producción. Los visitantes inician sesión con una cuenta de Vercel que tenga acceso al proyecto, así que cada compañero necesita una.

Netlify

1. Abre el sitio y ve a Project configuration, General, Visitor access, Password Protection.
2. Selecciona Configure Password Protection, luego Basic password protection, y escribe la contraseña.
3. Selecciona All deploys para cubrir el sitio en línea además de las vistas previas, y luego Save.
4. En los planes Pro más nuevos basados en créditos, la misma opción está en Visitor access, Project visibility: elige Password.

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

Cuánto cuesta Plan Pro ($20 al mes, miembros ilimitados) o Enterprise. No disponible en Free ni Personal.

Para un usuario y contraseña en una parte del sitio, Pro y Enterprise también aceptan una regla Basic-Auth en un archivo _headers, como la de abajo. Netlify aclara que la autenticación básica no tiene forma de cerrar sesión.

Cloudflare Access

1. Tu dominio tiene que estar en Cloudflare. En el panel, ve a Zero Trust, Integrations, Identity providers, y agrega One-time PIN.
2. Ve a Access controls, Applications, selecciona Create new application, luego Self-hosted and private, y agrega el nombre de host de tu sitio.
3. Agrega una política Allow. Usa Emails ending in con @yourcompany.com para toda una empresa, o Emails para personas con nombre. Access rechaza a todos los demás por defecto.
4. Selecciona Create. Los visitantes escriben su correo, reciben un PIN que sirve una sola vez durante 10 minutos, y entran.

Cuánto cuesta Gratis hasta 50 usuarios, luego $7 por usuario al mes, con facturación anual.

No es una contraseña compartida: cada persona demuestra que lee su propia bandeja de entrada, así que puedes ver y quitar a las personas una por una.

Un Cloudflare Worker con autenticación básica

1. Parte del ejemplo de autenticación básica de Cloudflare para Workers. Le pide al navegador un usuario y una contraseña y los compara de una forma que no filtra la contraseña por el tiempo de respuesta.
2. Guarda la contraseña como secreto, no en el código, con el comando de abajo.
3. Sírvelo solo por HTTPS. De lo contrario, la autenticación básica envía la contraseña sin cifrar.

npx wrangler secret put PASSWORD

Cuánto cuesta Workers Free cubre 100,000 solicitudes al día. Workers Paid empieza en $5 al mes.

Cloudflare indica que su ejemplo no es apto para producción y recomienda Cloudflare Access en su lugar.

Tu propio servidor

1. Instala la herramienta htpasswd (paquete apache2-utils en Debian y Ubuntu, httpd-tools en Red Hat) y crea un archivo de contraseñas con una línea por persona.
2. En nginx, agrega auth_basic y auth_basic_user_file al sitio, como abajo. En Apache, usa AuthType Basic, AuthUserFile y Require valid-user.
3. Guarda el archivo de contraseñas fuera de la carpeta web, y usa HTTPS. La documentación de Apache advierte que la autenticación básica envía la contraseña sin cifrar.

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

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

Cuánto cuesta Gratis en un servidor que ya tienes.

La autenticación básica puede guardar una contraseña distinta para cada persona, lo cual es mejor que una sola contraseña compartida. Igual tienes que agregar y quitar personas a mano en el servidor.