Files
nuzlocke-tracker/.beans/archive/nuzlocke-tracker-l9xh--frontend-auth-flow-login-signup-session-management.md
Julian Tabel a6cb309b8b
All checks were successful
CI / backend-tests (push) Successful in 28s
CI / frontend-tests (push) Successful in 28s
chore: archive 42 completed/scrapped beans
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-20 21:31:23 +01:00

2.1 KiB

title, status, type, priority, tags, created_at, updated_at, parent, blocked_by
title status type priority tags created_at updated_at parent blocked_by
Frontend auth flow (login, signup, session management) completed feature normal
failed
2026-03-20T15:28:24Z 2026-03-20T19:26:16Z nuzlocke-tracker-d98o
nuzlocke-tracker-2561

Add Supabase JS client to the frontend. Build login and signup pages with email/password and social login buttons (Google, Discord). Implement auth context/provider for session management, protected route wrapper, and auth-aware API client that attaches Bearer tokens.

Checklist

  • Install @supabase/supabase-js
  • Create Supabase client singleton with env vars
  • Create AuthContext/AuthProvider with session state, login, logout, signup methods
  • Build login page (email/password form + Google/Discord buttons)
  • Build signup page (email/password form + Google/Discord buttons)
  • Add auth callback route for OAuth redirects
  • Create ProtectedRoute wrapper component
  • Update API client to attach Authorization header when user is logged in
  • Add user menu (avatar/email, logout) to header when authenticated
  • Handle token refresh automatically via Supabase client

Summary of Changes

  • Installed @supabase/supabase-js package
  • Created Supabase client singleton at frontend/src/lib/supabase.ts
  • Created AuthContext/AuthProvider at frontend/src/contexts/AuthContext.tsx with session state, login, logout, signup, and OAuth methods
  • Created Login page (frontend/src/pages/Login.tsx) with email/password form and Google/Discord OAuth buttons
  • Created Signup page (frontend/src/pages/Signup.tsx) with email/password form and Google/Discord OAuth buttons
  • Created auth callback route (frontend/src/pages/AuthCallback.tsx) for OAuth redirects
  • Created ProtectedRoute component (frontend/src/components/ProtectedRoute.tsx)
  • Updated API client to attach Authorization header automatically when user is logged in
  • Added UserMenu component to Layout header showing avatar/email and logout button
  • Token refresh is handled automatically by Supabase JS client