Día 4: Pagos y Autenticación

Sin pagos no hay negocio, y sin autenticación no hay seguridad. Hoy conectas Stripe para cobrar suscripciones y Supabase Auth para que los usuarios puedan registrarse e iniciar sesión. Es el día técnicamente más denso, pero con IA vas a copiar-pegar-adaptar en lugar de escribir todo desde cero.

Objetivo del día

Usuarios pueden registrarse, iniciar sesión y completar un pago de prueba con una tarjeta de test de Stripe. Las rutas protegidas solo son accesibles para usuarios autenticados con suscripción activa.

Supabase Auth: registro e inicio de sesión

Supabase Auth incluye email/password, magic links y OAuth con Google/GitHub sin coste adicional. Empieza con email/password y añade OAuth después si es necesario.

Pídele a Claude el código completo con este prompt:

Genera los componentes de Next.js 14 App Router para:
1. Página de registro con email/password usando Supabase Auth y @supabase/ssr
2. Página de login
3. Middleware de Next.js que proteja rutas bajo /dashboard/*
4. Callback route en /auth/callback para manejar la confirmación de email

Stack: TypeScript, Tailwind CSS, shadcn/ui. Sin librerías adicionales.

Copia el código generado, revísalo rápidamente y ejecútalo. Si hay errores, pégalos de vuelta en Claude con el contexto.

Crea los productos en Stripe

1. Ve a dashboard.stripe.com y activa el modo test (toggle en la esquina superior izquierda).
2. En Products, crea tu plan: nombre, precio mensual, descripción.
3. Copia el Price ID (empieza con price_).

Añade las claves al .env.local:

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_PRICE_ID=price_...
STRIPE_WEBHOOK_SECRET=whsec_... (lo obtienes en el siguiente paso)

Stripe Checkout: la forma más rápida de cobrar

Stripe Checkout es una página de pago hosteada por Stripe — no necesitas construir un formulario de tarjeta. Solo creas una sesión desde tu backend y rediriges al usuario.

Prompt para Claude:

Crea una API route en Next.js 14 en /api/stripe/checkout que:
1. Reciba el userId del usuario autenticado con Supabase
2. Cree una Checkout Session de Stripe con el price_id configurado
3. Incluya metadata con el userId para identificarlo en el webhook
4. Retorne la URL de checkout para redirigir al cliente
Usa TypeScript y manejo de errores apropiado.

En el frontend, el botón de upgrade simplemente llama a esta API y redirige:

const res = await fetch('/api/stripe/checkout', { method: 'POST' });
const { url } = await res.json();
window.location.href = url;

Webhooks: sincroniza Stripe con tu base de datos

Los webhooks son llamadas que Stripe hace a tu servidor cuando ocurre un evento (pago completado, suscripción cancelada). Son la única fuente fiable de verdad para el estado del pago.

Instala el CLI de Stripe para desarrollo local:

# macOS
brew install stripe/stripe-cli/stripe
# Windows
scoop install stripe

stripe login
stripe listen --forward-to localhost:3000/api/stripe/webhook

El CLI imprime el webhook secret — cópialo a STRIPE_WEBHOOK_SECRET.

Prompt para el webhook handler:

Crea la API route /api/stripe/webhook en Next.js 14 que:
1. Verifique la firma del webhook con stripe.webhooks.constructEvent
2. Maneje los eventos: checkout.session.completed y customer.subscription.deleted
3. En checkout.session.completed: actualice la tabla "subscriptions" en Supabase
   con el customer_id, subscription_id y status "active"
4. En customer.subscription.deleted: actualice el status a "canceled"
Usa el service role key de Supabase para bypass de RLS en estas operaciones.

Protege rutas según el estado de suscripción

Con los datos de suscripción en Supabase, actualiza el middleware para verificar no solo autenticación sino también suscripción activa:

Actualiza el middleware de Next.js para que /dashboard/* requiera:
1. Usuario autenticado (Supabase session válida)
2. Registro en tabla "subscriptions" con status = "active"
Si falta alguna condición, redirige a /pricing o /login según corresponda.

Prueba con tarjetas de test

Stripe provee tarjetas de prueba que simulan diferentes escenarios:

Usa cualquier fecha futura, cualquier CVC y cualquier código postal.

Herramientas IA del día

• Claude — código completo para Auth flows, Checkout, webhook handler, middleware
• Stripe CLI — prueba de webhooks en local sin exponer el servidor a internet
• Supabase Dashboard — gestión de tablas, Row Level Security y visor de datos

Checklist del día

• Registro e inicio de sesión funcionan con Supabase Auth
• Email de confirmación llega y el callback route funciona
• Producto y precio creados en Stripe (modo test)
• Botón de pago redirige a Stripe Checkout correctamente
• Webhook handler creado y verificando la firma de Stripe
• Suscripción se guarda en Supabase al completar el pago de test
• Rutas de dashboard protegidas: redirigen si no hay suscripción activa
• Probé con tarjeta 4242 4242 4242 4242 y el flujo completo funciona