Técnico Nivel · intermedio
Template — Auth completa
Por qué te debe importar
Auth es el primer gran bloqueador cuando armas un SaaS. Gestionar sesiones, callbacks, refresh tokens, rutas protegidas — cada decisión tiene edge cases. El template del curso resuelve auth de una, con Supabase + hooks.server.ts, para que empieces a trabajar en features reales el día 1.
Idea central
Google + GitHub + magic link + rutas protegidas vía `hooks.server.ts`, cero armado manual.
Qué entrega el template
- Providers: Google, GitHub, email magic link.
- Hooks.server.ts: middleware que inyecta sesión en
localsy redirige si no hay auth en rutas protegidas. - Protected routes:
/app/requiere login;/público. Convención simple. - Store reactivo:
$stores/auth.tsconusercomo$statepara componentes. - Sign out: endpoint + UI listos.
La lógica de rutas protegidas
En hooks.server.ts:
- Cada request carga la sesión de Supabase.
- Si la ruta empieza con
/appy no hay sesión → redirige a/login. - Si la ruta es
/loginy ya hay sesión → redirige a/app.
Con esa lógica, tus páginas nunca tienen que checar auth. Confían en que si cargan, hay sesión válida.
Lo que NO incluye
- 2FA (no es MVP).
- SSO SAML (enterprise, v2).
- Permisos granulares (roles, opcional — ver template-schema).
Ejemplos en escalera
✓ Checkpoint
En tu repo, ¿`hooks.server.ts` existe? ¿Qué hace con auth? Si es `null`, estás reimplementando lo que el template te daría gratis.
Resumen — tres cosas que deberías recordar
- Auth completa: Google + GitHub + magic link.
- Rutas protegidas vía `hooks.server.ts` — no por página.
- Store `$stores/auth.ts` da acceso reactivo a `user` desde cualquier componente.
Qué sigue