79 lines
4.6 KiB
Markdown
79 lines
4.6 KiB
Markdown
# Session Handoff: Splash Page & Magic Link Login
|
|
**Date:** 2026-04-12
|
|
**Session Duration:** ~30 minutes
|
|
**Session Focus:** Implement unauthenticated splash page with logo and login button; implement magic link login page
|
|
**Context Usage at Handoff:** Low
|
|
|
|
## What Was Accomplished
|
|
|
|
1. **Splash page implemented** → `app/pages/index.vue` — unauthenticated users see centered logo + "Log In" button; authenticated users see home content with header/menu
|
|
2. **Login page implemented** → `app/pages/login.vue` — email input, sends magic link via `auth.sendMagicLink()`, shows confirmation state with mail icon after send
|
|
3. **Auth middleware updated** → `app/middleware/auth.ts` — added `/` to public routes; unauthenticated users redirected to `/` (not `/login`)
|
|
4. **Supabase redirect config updated** → `nuxt.config.ts` — `login` redirect changed from `/login` to `/`; `/` added to `exclude` list
|
|
|
|
## Exact State of Work in Progress
|
|
|
|
- Splash + login pages coded but not yet tested end-to-end against local Supabase
|
|
- `auth/callback.vue` still a skeleton — magic link redirect will land there; not yet implemented
|
|
|
|
## Decisions Made This Session
|
|
|
|
- USE `/` as the unauthenticated landing route INSTEAD OF `/login` BECAUSE the splash/logo page IS the unauthenticated entry point; `/login` is a detail page reached from it — STATUS: confirmed
|
|
- MAGIC LINK ONLY on login page (not OTP) BECAUSE user stated "sends a magic link" — STATUS: confirmed; OTP flow (`sendOtp` + `verifyOtp`) exists in auth store but unused by login page
|
|
|
|
## Key Numbers Generated or Discovered This Session
|
|
|
|
- Logo file: `public/oysqn_logo.png` (confirmed present)
|
|
- Max logo display width: 280px (CSS)
|
|
- Max login form width: 400px (CSS)
|
|
|
|
## Files Created or Modified
|
|
|
|
| File Path | Action | Description |
|
|
|-----------|--------|-------------|
|
|
| `app/pages/index.vue` | Modified | Splash (unauthenticated) + home (authenticated) in single page, toggled by `useSupabaseUser()` |
|
|
| `app/pages/login.vue` | Modified | Email input → `sendMagicLink()` → confirmation state; uses `IonBackButton` to return to splash |
|
|
| `app/middleware/auth.ts` | Modified | Added `/` to public routes; redirects unauthenticated to `/` |
|
|
| `nuxt.config.ts` | Modified | `supabase.redirectOptions.login` = `/`; added `/` to `exclude` |
|
|
|
|
## What the NEXT Session Should Do
|
|
|
|
1. **First**: Test the auth flow end-to-end: load app → confirm splash shows logo + Login button → tap Login → enter email → check Mailpit (http://127.0.0.1:54324) for magic link → click link → confirm redirect to `/auth/callback` → confirm redirect to `/` (home state)
|
|
2. **Then**: Implement `app/pages/auth/callback.vue` — handle magic link redirect (Supabase sets session from URL hash; page should show a spinner, then navigate to `/`)
|
|
3. **Then**: Verify `useAuthStore` is auto-imported by Pinia Nuxt module (currently explicitly imported in `login.vue` with `import { useAuthStore } from '~/stores/auth'` — check if explicit import is still needed or if auto-import covers it)
|
|
4. **Then**: Run `npx supabase gen types typescript --local > app/types/supabase.ts` to replace placeholder types
|
|
5. **Then**: Implement `app/pages/index.vue` home content (authenticated state) — boat list or welcome state
|
|
|
|
## Open Questions Requiring User Input
|
|
|
|
- [ ] Should the login page also support OTP (enter token from email) as a fallback, or magic link only? — `sendOtp` + `verifyOtp` exist in auth store but unused — impacts login page UI
|
|
- [ ] Should `auth/callback.vue` redirect to a specific page after login (e.g., boats list) or always to `/`? — impacts callback implementation
|
|
|
|
## Assumptions That Need Validation
|
|
|
|
- ASSUMED: `@nuxtjs/ionic` + `@pinia/nuxt` auto-imports `useAuthStore` — currently explicitly imported; validate by removing explicit import and testing
|
|
- ASSUMED: `sendMagicLink()` in auth store correctly sets `emailRedirectTo` to `/auth/callback` — validate by clicking the email link and checking where it lands
|
|
- ASSUMED: `IonRouterOutlet` handles `router-link` on `IonButton` correctly — validate by tapping Login button in browser
|
|
|
|
## Files to Load Next Session
|
|
|
|
- `app/pages/auth/callback.vue` — primary implementation target
|
|
- `app/pages/index.vue` — may need home content (authenticated state) built out
|
|
- `app/stores/auth.ts` — reference for `sendMagicLink` signature and redirect URL
|
|
|
|
## Dev Environment Reference
|
|
|
|
```
|
|
# Start local Supabase (if not running):
|
|
DOCKER_HOST=unix:///run/user/1000/podman/podman.sock npx supabase start
|
|
|
|
# Start app:
|
|
yarn dev
|
|
|
|
# Mailpit (view magic link emails):
|
|
http://127.0.0.1:54324
|
|
|
|
# Supabase Studio:
|
|
http://127.0.0.1:54323
|
|
```
|