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

Casi toda página web de verdad necesita dos cosas: un formulario (para que la gente te escriba o se registre) y a veces un login (para que solo ciertas personas entren a ciertas páginas). Suenan difíciles, pero con IA los agregas describiéndolos en palabras, sin pelear con código.

En esta guía vas a agregar login y formularios a una web que ya estés construyendo, usando Claude Code para escribir el código y Supabase para guardar los datos y manejar las cuentas. Toca cada paso para abrirlo.

Almost every real website needs two things: a form (so people can write to you or sign up) and sometimes a login (so only certain people reach certain pages). They sound hard, but with AI you add them by describing them in words, no fighting with code.

In this guide you’ll add login and forms to a site you’re already building, using Claude Code to write the code and Supabase to store the data and handle accounts. Tap each step to open it.

Antes de empezar: necesitas un proyecto web y Claude Code ya instalado. Si aún no lo tienes, sigue primero Cómo conectar Claude a VS Code y tu primera web con Claude Code.Before you start: you need a web project and Claude Code already installed. If you don’t have it yet, first follow How to connect Claude to VS Code and your first website with Claude Code.

1 Crea tu proyecto en SupabaseCreate your Supabase project

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.

Entra a https://supabase.com y crea una cuenta gratis.
Aprieta New project, ponle nombre y una contraseña para la base de datos (guárdala).
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.

Supabase is a free database that also brings the login system almost done. If you’ve never used it, follow the tutorial How to create a database with Supabase; it takes 5 minutes.

Go to https://supabase.com and create a free account.
Click New project, give it a name and a database password (save it).
When it’s ready, go to Project Settings → API and copy two things: the Project URL and the anon public key. You’ll need them in step 3.

Don’t share the key labeled service_role: that one is private.

2 Agrega un formulario de contactoAdd a contact form

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

Open your project in VS Code, open Claude Code (✳) and ask for the form with a clear prompt. The more specific, the better:

Add a contact form to my page with the fields name, email and
message. Validate that the email is valid and show a "thank you"
message on submit. Keep the style simple and clean, matching the
current design.

Claude Code will show you the files it will create or change. Skim them and approve. It doesn’t save anything yet: we connect that in the next step.

Tip: ask “explain in one line what each file does” if you want to understand what it created.

3 Guarda lo que envía la genteStore what people submit

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.

Now connect the form to Supabase so each message is stored in a table. Give Claude Code your data and the prompt:

Connect this form to Supabase. Create a "messages" table with
columns name, email, message and date, and save each submission
there. My Project URL is <paste the URL> and my anon key is
<paste the key>. Store the keys in a .env file, not in the code.

Notice the last part: keys go in a .env file, never inside the code you push to the internet. Claude Code knows how; just remind it.

When it’s done, open your table in Supabase (Table Editor → messages) and you’ll see rows appear each time someone submits the form.

4 Agrega el loginAdd the login

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.

Supabase includes login (it’s called Auth), so you don’t have to invent anything about passwords: it stores them encrypted for you. Ask Claude Code:

Add login with Supabase Auth: one page to sign up (email and
password) and another to sign in. Use the same Project URL and
anon key from the .env. Show the user's email when logged in and
a button to sign out.

In Supabase, go to Authentication → Providers and confirm Email is enabled (it is by default). With that, people can create their account and log in.

5 Protege tus páginas privadasProtect your private pages

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.

A login without protected pages isn’t worth much. Tell Claude Code which pages should be only for logged-in people:

Make the /dashboard page viewable only if the user is logged in.
If someone enters without a session, send them to the login page.

That’s how you separate the public part (your normal page, the form) from the private part (a dashboard, the profile, whatever you want to hide).

Golden rule: never trust “hide the button” alone. Real protection comes from the login, not the design.

Atajo: pídelo todo de una vezShortcut: ask for it all at once

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.

If you already have your Supabase project ready (Step 1), you can ask Claude Code for the full package in a single prompt and then review as you go:

In this project I want: 1) a contact form that saves messages to
a Supabase table, 2) login with Supabase Auth (email sign-up and
sign-in), and 3) the /dashboard page viewable only when logged in.
Store the keys in .env. Do it step by step and explain each one.

I prefer going step by step (you understand what’s happening better), but if you’re in a hurry, this shortcut works.

Probar que todo funcioneTest that it works

Abre tu web y llena el formulario. Revisa que la fila aparezca en la tabla de Supabase.
Crea una cuenta en tu página de registro. Revisa que aparezca en Authentication → Users.
Cierra sesión e intenta entrar a tu página privada (/panel): debe mandarte al login.
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.

Open your site and fill in the form. Check the row appears in your Supabase table.
Create an account on your sign-up page. Check it shows in Authentication → Users.
Sign out and try to reach your private page (/dashboard): it should send you to the login.
Sign in and try again: now it should let you see the dashboard.

If all four work, you’ve got a site with real forms and login.

Si algo sale malIf something goes wrong

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`

Problem	Fix
The form saves nothing	Check the Project URL and anon key in `.env` are copied correctly
A “permission” error when saving	Ask Claude Code to add an insert policy (RLS) on the table
No confirmation email arrives	In Supabase check Authentication → Providers → Email; for testing you can turn off “Confirm email”
My keys ended up in the code	Ask Claude Code to move them to `.env` and add `.env` to `.gitignore`

Y ya está: pasaste de una página que solo se ve a una que recibe gente y guarda información. Ese salto es justo lo que separa una web bonita de una web que trabaja para ti. Empieza con el formulario, que es lo más fácil, y cuando te sientas cómoda, agrega el login. Tú también puedes construirlo.

And there it is: you went from a page that only displays to one that receives people and stores information. That jump is exactly what separates a pretty site from a site that works for you. Start with the form, the easiest part, and once you feel comfortable, add the login. You can build it too.

Preguntas frecuentesFrequently asked questions

¿Necesito saber programar para agregar un login?Do I need to know how to code to add a login?

No. Le describes a Claude Code lo que quieres en palabras normales y él escribe el código; tú revisas y apruebas. Este tutorial usa Supabase, que trae el login casi hecho.

No. You describe what you want to Claude Code in plain words and it writes the code; you review and approve. This tutorial uses Supabase, which brings login almost done.

¿Es seguro guardar contraseñas así?Is it safe to store passwords this way?

Sí, porque tú no las guardas: Supabase maneja las contraseñas cifradas por ti. Nunca guardes contraseñas en texto plano ni las pongas en tu código.

Yes, because you don't store them: Supabase handles passwords encrypted for you. Never store passwords in plain text or put them in your code.

¿Cuánto cuesta tener login y formularios?How much does it cost to have login and forms?

El plan gratis de Supabase cubre hasta 50,000 usuarios activos al mes, más que suficiente para empezar. Solo pagas Claude Pro (desde $20/mes) para usar Claude Code.

Supabase's free plan covers up to 50,000 active users a month, plenty to start. You only pay for Claude Pro (from $20/mo) to use Claude Code.

¿Puedo recibir los formularios por correo en vez de guardarlos?Can I get forms by email instead of storing them?

Sí. Pídele a Claude Code que, en lugar de (o además de) guardar en Supabase, te envíe el contenido del formulario a tu correo con un servicio como Resend. Aquí guardamos en una tabla porque es lo más simple de revisar.

Yes. Ask Claude Code to, instead of (or besides) saving to Supabase, email you the form content with a service like Resend. Here we store it in a table because it's the simplest to review.

Cómo agregar login y formularios a tu web con IAHow to add login and forms to your website with AI

Preguntas frecuentesFrequently asked questions

Cambiar PlaylistSwitch Playlist