fix(auth+pwa): resolve stuck-loading race condition and PWA build error
Auth: `getSession()` in a SvelteKit load function races with Supabase's async localStorage init and can return null for a valid session, triggering a spurious login() redirect. Moved auth redirect to (app)/+layout.svelte via $effect, which correctly waits for onAuthStateChange to fire. Also fixed collective data never loading on page refresh (INITIAL_SESSION event, not SIGNED_IN). PWA: SvelteKit blocks Workbox imports in src/service-worker.ts, preventing @vite-pwa/sveltekit from finding the compiled SW output. Switched to generateSW strategy (plugin auto-generates the SW). Custom SW deferred to Fase 2b using src/sw.ts (a filename SvelteKit does not intercept). Docs: added gotchas 6–8 to CLAUDE.md covering both root causes so they are not reintroduced. Updated plan/fase-2b with the sw.ts workaround note. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,24 +4,24 @@
|
||||
|
||||
#### 1.1 Base de datos
|
||||
|
||||
- [ ] Migración: tabla `users` — espejo de `auth.users` de Supabase, poblada por trigger al primer login OIDC:
|
||||
- [x] Migración: tabla `users` — espejo de `auth.users` de Supabase, poblada por trigger al primer login OIDC:
|
||||
- `display_name`, `email`
|
||||
- `language: enum(en | es)` — default `en`, sobrescrito por preferencia de navegador en primer login
|
||||
- `avatar_type: enum(initials | emoji | upload)` — default `initials`
|
||||
- `avatar_emoji: text | null`
|
||||
- `avatar_url: text | null` — URL firmada de Supabase Storage
|
||||
- [ ] Migración: tabla `collectives` con campos `id`, `name`, `emoji`, `created_by`, `created_at`
|
||||
- [ ] Migración: tabla `collective_members` con `role: enum(admin | member | guest)`
|
||||
- [ ] Migración: tabla `collective_invitations` con token, expiración y estado
|
||||
- [ ] **RLS completo** — políticas críticas:
|
||||
- [x] Migración: tabla `collectives` con campos `id`, `name`, `emoji`, `created_by`, `created_at`
|
||||
- [x] Migración: tabla `collective_members` con `role: enum(admin | member | guest)`
|
||||
- [x] Migración: tabla `collective_invitations` con token, expiración y estado
|
||||
- [x] **RLS completo** — políticas críticas:
|
||||
- Un usuario solo puede leer colectivos a los que pertenece
|
||||
- Solo administradores pueden insertar en `collective_invitations`
|
||||
- Solo administradores pueden actualizar roles en `collective_members`
|
||||
- Un usuario solo puede actualizar su propia fila en `users`
|
||||
- [ ] Trigger: `on_auth_user_created` — sincroniza el perfil de Keycloak (display_name, email) a `users` en cada login
|
||||
- [ ] Trigger: promoción automática al miembro más antiguo si el último admin elimina su cuenta (RN-10)
|
||||
- [ ] Función SQL: `is_active_member(collective_id, user_id)` — usada en todas las políticas RLS
|
||||
- [ ] Bucket Supabase Storage: `avatars` — privado, acceso vía signed URLs, un fichero por usuario (`{user_id}/avatar`)
|
||||
- [x] Trigger: `on_auth_user_created` — sincroniza el perfil de Keycloak (display_name, email) a `users` en cada login
|
||||
- [x] Trigger: promoción automática al miembro más antiguo si el último admin elimina su cuenta (RN-10)
|
||||
- [x] Función SQL: `is_active_member(collective_id, user_id)` — usada en todas las políticas RLS
|
||||
- [x] Bucket Supabase Storage: `avatars` — privado, acceso vía signed URLs, un fichero por usuario (`{user_id}/avatar`)
|
||||
|
||||
#### 1.2 Integración Keycloak → Supabase
|
||||
|
||||
@@ -30,57 +30,57 @@
|
||||
> `auth.uid()` resuelve al UUID de GoTrue (que mapea al `sub` de Keycloak).
|
||||
> Esto mantiene `auth.users` de Supabase poblado y permite usar todas las helpers de GoTrue.
|
||||
|
||||
- [ ] Configurar Keycloak como OIDC Identity Provider en GoTrue (`supabase/config.toml`)
|
||||
- [ ] Flujo: app obtiene token de Keycloak → lo intercambia por token de GoTrue → usa token de GoTrue para Supabase
|
||||
- [ ] Verificar que `auth.uid()` en las políticas RLS resuelve correctamente
|
||||
- [ ] Test de integración: token de Keycloak → exchange con GoTrue → query a Supabase con RLS → respuesta correcta
|
||||
- [x] Configurar Keycloak como OIDC Identity Provider en GoTrue (`infra/docker-compose.dev.yml` — `GOTRUE_EXTERNAL_KEYCLOAK_*`)
|
||||
- [x] Flujo: `signInWithOAuth({ provider: 'keycloak' })` → Keycloak PKCE → GoTrue callback → Supabase session
|
||||
- [x] Verificar que `auth.uid()` en las políticas RLS resuelve correctamente — ✅ curl acceptance test: los 5 usuarios autenticados vía Keycloak→GoTrue tienen `sub` correcto y las políticas RLS devuelven solo sus datos
|
||||
- [x] Test de integración: token de Keycloak → exchange con GoTrue → query a Supabase con RLS → respuesta correcta — ✅ todos los 5 usuarios pasan
|
||||
|
||||
#### 1.3 Invitaciones (sin email)
|
||||
|
||||
> **✅ DECISIÓN: sin email.** Las invitaciones se crean como un link que el admin copia manualmente y comparte por cualquier canal (WhatsApp, etc.). No se integra Resend ni se envían emails.
|
||||
|
||||
- [ ] `collective_invitations` tiene `token` único (UUID), `expires_at`, `role`, y `accepted_at`
|
||||
- [ ] Pantalla `/collective/manage` genera el link de invitación y muestra un botón "Copy link"
|
||||
- [ ] `/invitation/[token]` — el invitado abre el link, se autentica si no lo está, y acepta
|
||||
- [ ] Lógica de aceptación en un server action de SvelteKit (no Edge Function): validar token + expiración, insertar en `collective_members`, marcar `accepted_at`
|
||||
- [x] `collective_invitations` tiene `token` único (UUID), `expires_at`, `role`, y `accepted_at`
|
||||
- [x] Pantalla `/collective/manage` genera el link de invitación y muestra un botón "Copy link"
|
||||
- [x] `/invitation/[token]` — el invitado abre el link, se autentica si no lo está, y acepta
|
||||
- [x] Lógica de aceptación via función SQL `accept_invitation(p_token)` SECURITY DEFINER (no Edge Function)
|
||||
|
||||
#### 1.4 Internacionalización (i18n)
|
||||
|
||||
Librería: **Paraglide JS** (`@inlang/paraglide-sveltekit`). Compile-time, tree-shaken por idioma, sin overhead en runtime.
|
||||
|
||||
- [ ] Instalar y configurar `@inlang/paraglide-sveltekit` con el plugin de Vite
|
||||
- [ ] Crear ficheros de mensajes: `messages/en.json` y `messages/es.json`
|
||||
- [x] Instalar y configurar `@inlang/paraglide-sveltekit` con el plugin de Vite
|
||||
- [x] Crear ficheros de mensajes: `messages/en.json` y `messages/es.json`
|
||||
- [ ] Configurar detección de idioma: `Accept-Language` header en primer load → guardado en `users.language` tras login
|
||||
- [ ] Cambio de idioma en runtime: actualizar `users.language` en Supabase + llamar a `setLanguageTag()` de Paraglide — sin recarga de página
|
||||
- [ ] Traducir todas las cadenas UI de la Fase 1 (onboarding, gestión de colectivo, settings)
|
||||
- [x] Cambio de idioma en runtime: actualizar `users.language` en Supabase + llamar a `setLanguageTag()` de Paraglide — sin recarga de página
|
||||
- [x] Traducir todas las cadenas UI de la Fase 1 (onboarding, gestión de colectivo, settings)
|
||||
|
||||
> Las cadenas de UI van en `messages/`. Nunca hardcodear texto visible al usuario directamente en componentes.
|
||||
|
||||
#### 1.5 Frontend
|
||||
|
||||
- [ ] Integración de `keycloak-js` en SvelteKit:
|
||||
- Inicialización en `+layout.ts` con `checkLoginIframe: false` (compatibilidad PWA/Safari)
|
||||
- Store Svelte `auth` — expone `user`, `token`, `isAuthenticated`, `login()`, `logout()`
|
||||
- `login()` redirige al login page de Keycloak; el callback vuelve a la app con el token
|
||||
- Refresco silencioso del token antes de expiración (`updateToken(60)`)
|
||||
- [ ] Rutas protegidas: hook `+layout.server.ts` que verifica sesión y redirige si no hay token válido
|
||||
- [ ] Flujo de onboarding post-primer-login:
|
||||
- [x] Integración de Supabase OAuth en SvelteKit (PKCE, no keycloak-js):
|
||||
- `supabase.auth.signInWithOAuth({ provider: 'keycloak' })` — compatible con Safari sin iframes
|
||||
- Store Svelte `auth` — expone `currentUser`, `authLoading`, `isAuthenticated`, `displayName`
|
||||
- `login()` redirige a Keycloak vía GoTrue; callback en `/auth/callback` intercambia el code
|
||||
- Refresco automático de sesión por el cliente de Supabase (localStorage)
|
||||
- [x] Rutas protegidas: `(app)/+layout.ts` con `ssr: false` que redirige si no hay sesión
|
||||
- [x] Flujo de onboarding post-primer-login:
|
||||
- Detectar si el usuario no pertenece a ningún colectivo → redirigir a `/onboarding`
|
||||
- Opción A: Crear nuevo colectivo (nombre + emoji)
|
||||
- Opción B: Pegar link de invitación recibido
|
||||
- [ ] Pantalla `/collective/manage` — miembros, roles, botón "Generate invite link" (copia al clipboard), expulsar
|
||||
- [ ] Pantalla `/invitation/[token]` — aceptar invitación (el usuario debe estar autenticado)
|
||||
- [ ] **Selector de colectivo activo** en la barra lateral — un usuario puede pertenecer a varios colectivos y cambiar entre ellos
|
||||
- [ ] Store Svelte `collective` — colectivo activo, lista de miembros, rol del usuario actual, lista de todos los colectivos del usuario
|
||||
- [ ] Pantalla `/settings` — configuración de usuario:
|
||||
- [x] Pantalla `/collective/manage` — miembros, roles, botón "Generate invite link" (copia al clipboard), expulsar
|
||||
- [x] Pantalla `/invitation/[token]` — aceptar invitación (el usuario debe estar autenticado)
|
||||
- [x] **Selector de colectivo activo** en la barra lateral — un usuario puede pertenecer a varios colectivos y cambiar entre ellos
|
||||
- [x] Store Svelte `collective` — colectivo activo, lista de miembros, rol del usuario actual, lista de todos los colectivos del usuario
|
||||
- [x] Pantalla `/settings` — configuración de usuario:
|
||||
- Campo display name (input de texto, guardado automático con debounce)
|
||||
- Selector de avatar con tres modos:
|
||||
- *Initials* — preview generado en tiempo real desde el display name
|
||||
- *Emoji* — grid de ~40 emoji curados, tap para seleccionar
|
||||
- *Upload* — input de fichero; **recorte en el navegador en proporción 1:1** (usar `cropperjs` o similar); subida a Supabase Storage bucket `avatars`
|
||||
- *Emoji* — grid de 32 emoji curados, tap para seleccionar
|
||||
- *Upload* — input de fichero; recorte en el navegador 1:1 con `cropperjs`; subida a Supabase Storage bucket `avatars`
|
||||
- Selector de idioma (English / Español) con efecto inmediato
|
||||
- Enlace externo a Keycloak Account Console para cambio de email/contraseña
|
||||
- [ ] Componente `Avatar.svelte` — renderiza según `avatar_type`: initials (letra sobre fondo slate), emoji, o `<img>` con fallback a initials si la URL falla
|
||||
- [x] Componente `Avatar.svelte` — renderiza según `avatar_type`: initials (color determinista por hash del nombre), emoji, o `<img>` con fallback a initials
|
||||
|
||||
> **Auto-registro:** Self-registration está habilitado en Keycloak. Un usuario sin cuenta que recibe un link de invitación puede registrarse en la pantalla de Keycloak y volver al callback de invitación automáticamente.
|
||||
|
||||
|
||||
@@ -17,9 +17,11 @@
|
||||
- [ ] Esquema local en IndexedDB: `pending_ops`, `listas_cache`, `items_cache`
|
||||
- [ ] Cola de operaciones pendientes: cada mutación se escribe en `pending_ops` antes de llamar a Supabase
|
||||
- [ ] Service Worker (`@vite-pwa/sveltekit` + Workbox):
|
||||
- **NOTA TÉCNICA:** SvelteKit intercepta `src/service-worker.ts` y bloquea imports externos (solo permite `$service-worker` y `$env/static/public`). Para usar Workbox con `injectManifest` hay que nombrar el fichero `src/sw.ts` (SvelteKit no lo reconoce como SW) y configurar `strategies: 'injectManifest'`, `filename: 'sw.ts'` en `vite.config.ts`. Actualmente el plugin usa `generateSW` (SW auto-generado, precaching básico).
|
||||
- Cache-first para assets estáticos
|
||||
- Network-first con fallback a caché para rutas de la app
|
||||
- Background sync para flush de `pending_ops` al recuperar conexión
|
||||
- Fallback manual `online` event (Safari no soporta Background Sync API)
|
||||
- [ ] Fallback manual de sync: al detectar `online` en el evento del navegador, flush de la cola (cubre Safari que no soporta Background Sync API)
|
||||
- [ ] Indicador de estado de sincronización en la UI: `sincronizado | sincronizando | sin conexión`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user