Cómo agregar login y formularios a tu web con IA

Supabase es una base de datos gratis que además trae el sistema de login casi hecho. Si nunca lo has usado, sigue el tutorial Cómo crear una base de datos con Supabase; toma 5 minutos.

1. Entra a https://supabase.com y crea una cuenta gratis.
2. Aprieta New project, ponle nombre y una contraseña para la base de datos (guárdala).
3. Cuando termine, ve a Project Settings → API y copia dos datos: la Project URL y la clave anon public. Los vas a necesitar en el paso 3.

No compartas la clave que dice service_role: esa es privada.

Abre tu proyecto en VS Code, abre Claude Code (✳) y pídele el formulario con un prompt claro. Mientras más específico, mejor:

Agrega un formulario de contacto a mi página con los campos
nombre, correo y mensaje. Que valide que el correo sea válido
y muestre un mensaje de "gracias" al enviar. Estilo simple y
limpio, que combine con el diseño actual.

Claude Code te va a mostrar los archivos que va a crear o cambiar. Léelos por encima y aprueba. Todavía no guarda nada: eso lo conectamos en el próximo paso.

Tip: pídele “explícame en una línea qué hace cada archivo” si quieres entender lo que creó.

Ahora conecta el formulario a Supabase para que cada mensaje se guarde en una tabla. Pásale a Claude Code tus datos y el prompt:

Conecta este formulario a Supabase. Crea una tabla "mensajes"
con columnas nombre, correo, mensaje y fecha, y guarda cada
envío ahí. Mi Project URL es <pega la URL> y mi anon key es
<pega la clave>. Guarda las claves en un archivo .env, no en
el código.

Fíjate en lo último: las claves van en un archivo .env, nunca dentro del código que subes a internet. Claude Code sabe hacerlo; solo recuérdaselo.

Cuando termine, entra a tu tabla en Supabase (Table Editor → mensajes) y verás las filas aparecer cada vez que alguien envía el formulario.

Supabase trae el login incluido (se llama Auth), así que no tienes que inventar nada de contraseñas: él las guarda cifradas por ti. Pídeselo a Claude Code:

Agrega login con Supabase Auth: una página para registrarse
(correo y contraseña) y otra para iniciar sesión. Usa la misma
Project URL y anon key del .env. Muestra el correo del usuario
cuando esté conectado y un botón para cerrar sesión.

En Supabase, ve a Authentication → Providers y confirma que Email esté activado (viene así por defecto). Ya con eso, la gente puede crear su cuenta y entrar.

Un login sin páginas protegidas no sirve de mucho. Dile a Claude Code cuáles páginas deben ser solo para gente conectada:

Haz que la página /panel solo se pueda ver si el usuario inició
sesión. Si alguien entra sin sesión, mándalo a la página de login.

Así separas lo público (tu página normal, el formulario) de lo privado (un panel, el perfil, lo que sea que quieras esconder).

Regla de oro: nunca confíes solo en “esconder el botón”. La protección de verdad la pone el login, no el diseño.

Si ya tienes tu proyecto de Supabase listo (Paso 1), puedes pedirle a Claude Code el paquete completo en un solo prompt y luego ir revisando:

En este proyecto quiero: 1) un formulario de contacto que guarde
los mensajes en una tabla de Supabase, 2) login con Supabase Auth
(registro e inicio de sesión por correo), y 3) que la página
/panel solo se vea con sesión iniciada. Guarda las claves en .env.
Hazlo paso a paso y explícame qué haces en cada uno.

Yo prefiero ir paso a paso (se entiende mejor lo que pasa), pero si tienes prisa, este atajo funciona.

1. Abre tu web y llena el formulario. Revisa que la fila aparezca en la tabla de Supabase.
2. Crea una cuenta en tu página de registro. Revisa que aparezca en Authentication → Users.
3. Cierra sesión e intenta entrar a tu página privada (/panel): debe mandarte al login.
4. Inicia sesión y entra otra vez: ahora sí debe dejarte ver el panel.

Si los cuatro pasos funcionan, ya tienes una web con formularios y login de verdad.

Problema	Solución
El formulario no guarda nada	Revisa que la Project URL y la anon key en .env estén bien copiadas
Error de “permiso” al guardar	Pídele a Claude Code que active una política de inserción (RLS) en la tabla
No me llega el correo de confirmación	En Supabase revisa Authentication → Providers → Email; en pruebas puedes desactivar “Confirm email”
Mis claves quedaron en el código	Pídele a Claude Code moverlas a .env y agregar .env al .gitignore