App de gastos hormiga en el AWS Free Tier Workshop paso a paso

Paso extra: login con Cognito

Para casa, unos 40 min

⚠ Este es un experimento opcional y solo sirve para pruebas del workshop, no es una receta de producción. Protege el GET /gastos del ejercicio, pero una app real necesita revisar autenticación, autorización, CORS, monitoreo y amenazas según sus propios datos y usuarios.

Límite importante: todos los gastos viven bajo la misma partición GASTOS. Si crearas dos usuarios, los dos podrían leer la misma lista. Aquí Cognito demuestra cómo autenticar una lectura; una app multiusuario debe usar el sub de Cognito para separar los datos de cada persona y proteger también las escrituras.

Lo que vas a construir

La lista de gastos deja de ser pública. GET /gastos pasa a un autorizador de Cognito, y POST /gastos sigue con API key para que tu Atajo no se rompa.

Paso extra: Cognito protege GET /gastos

Arranca desde un punto conocido

Este paso parte del módulo 4 terminado. Si ya borraste el backend en el cierre, no pasa nada: el deploy de este paso lo crea otra vez.

Te toca: prepara una rama limpia

Corre esto dentro del repo, con tu sesión de AWS activa:

git stash -u
git switch modulo-4
git switch -c mi-cognito
npm ci
npm run doctor

GastosTable conserva su logical ID y su nombre entre ramas, así que volver a desplegar actualiza tu stack sin borrar tus gastos. npm run doctor revisa tus herramientas, tu sesión de aws login, el bootstrap, los outputs del stack, tu Región y los días que quedan de AWS Free Tier.

Pídele a Kiro la tarea 3

Es la tarea 3 de la spec, marcada como opcional. Tiene tres decisiones que no se negocian:

  • la callback URL usa la URL HTTPS de tu app de Amplify y llega al stack por el parámetro FrontendUrl;
  • no hay registro abierto: tu usuario se crea con npm run crear-usuario;
  • POST /gastos usa API key y GET /gastos usa Cognito.
¿Qué son la callback URL y FrontendUrl?

Para iniciar sesión, Cognito te manda a su propia pantalla y, al terminar, te regresa a tu página. La callback URL es esa dirección de regreso. Cognito solo acepta direcciones registradas, así que le damos la tuya: la URL de Amplify que termina en amplifyapp.com y copiaste en el módulo 2.

Un parámetro es un valor que le pasas al stack desde afuera al desplegar, en vez de escribirlo en infra/gastos-stack.ts. Tu URL de Amplify entra por FrontendUrl, y de ahí Cognito la toma como callback URL. Por eso despliegas con --parameters.

Te toca: pídele a Kiro la tarea 3

En .kiro/specs/gastos-hormiga/tasks.md, da clic en Start task arriba de la tarea 3, o escríbelo en el chat:

Haz la tarea 3 de .kiro/specs/gastos-hormiga/tasks.md

Revisa el diff

  1. ¿El UserPool tiene selfSignUpEnabled: false?
  2. ¿El POST /gastos sigue con apiKeyRequired: true y sin autorizador?
  3. ¿El GET /gastos usa el CognitoUserPoolsAuthorizer?
  4. ¿La callback URL usa el parámetro FrontendUrl y no está escrita a mano?
  5. ¿web/app.js sigue sin usar innerHTML con datos de la API?
  6. ¿El UserPool tiene removalPolicy: RemovalPolicy.DESTROY? Sin eso, npm run limpiar lo deja en tu cuenta.
  7. ¿package.json quedó igual? La tarea no necesita paquetes nuevos.

Despliega y crea tu usuario

Te toca: despliega con tu URL de Amplify

Reemplaza <url-de-amplify> por la URL de tu rama main en Amplify. El -- separa las opciones de npm de las de CDK.

npm run deploy -- --parameters \
  gastos-hormiga:FrontendUrl=<url-de-amplify>

En PowerShell la continuación de línea es el acento grave en vez de la diagonal invertida:

npm run deploy -- --parameters `
  gastos-hormiga:FrontendUrl=<url-de-amplify>

Te toca: publica la página y crea tu usuario

# escribe web/config.js con la URL de tu API y los valores de Cognito
npm run preparar-pagina

# guarda en git el stack y la página
git add infra/gastos-stack.ts web/app.js
git add -f web/config.js
git commit -m "Agrega login con Cognito"

# sube a main; Amplify publica la página nueva
git push origin main

# crea tu usuario (no hay registro abierto, lo creas tú)
npm run crear-usuario

Cuando el build de Amplify termine en verde, entra a tu página, inicia sesión y cambia la contraseña temporal.

Checkpoint ✅

Te toca: corre el checkpoint

npm run verify cognito

Te pide tu correo y tu contraseña, y revisa que GET /gastos sin token responda 401, que con token responda 200 y que el POST con API key siga respondiendo 201.

"No pude iniciar sesión con ese usuario"

El verify usa el flujo USER_PASSWORD_AUTH. Revisa que el app client lo tenga en authFlows.userPassword y que ya hayas cambiado la contraseña temporal.

Limpia el paso extra

Cuando termines de probar, no dejes el User Pool ni la app publicados.

Te toca: borra los recursos del experimento

npm run limpiar

El comando te pide escribir gastos-hormiga para confirmar y borra el stack completo: User Pool, app client, dominio de Cognito, API, Lambdas, logs, tabla y gastos.

Después abre Amplify, entra a la app y elige App settings > General settings > Delete app. Tu fork y los commits se quedan en GitHub.

Si te atoraste

Pega en Kiro el error y el comando que lo produjo (más en errores comunes). La solución del paso vive en la rama extra-cognito del starter.