Add authentication layer with phone-based login (Phase 4)

[WWStoryMode]

Summary

• Add Supabase authentication that activates when DEMO_MODE=false, preserving existing demo functionality
• Implement phone number + password auth (login/register pages) with role selection on signup
• Add AuthProvider context that abstracts demo vs production user identity across all pages
• Protect routes via Next.js middleware (redirects unauthenticated users to /login)
• Guard all API routes with server-side auth validation; override client-sent customer_id with authenticated user ID in production

New files

• src/hooks/use-auth.tsx — Auth context provider with demo/production branching
• src/middleware.ts — Route protection middleware
• src/app/login/page.tsx — Phone + password login page
• src/app/register/page.tsx — Registration with role selection (customer/vendor/delivery)
• src/lib/auth/guard.ts — Shared server-side auth guard for API routes

Modified files

• src/app/layout.tsx — Wrap with AuthProvider
• src/app/page.tsx — Show sign-in/register landing in production mode
• src/app/checkout/page.tsx — Use useAuth().userId instead of DEMO_IDS
• src/app/vendor/page.tsx — Use useAuth().vendorId instead of DEMO_IDS
• src/app/delivery/page.tsx — Use useAuth().deliveryPersonId instead of DEMO_IDS
• All 4 API routes — Add getAuthenticatedUser() guard

Test plan

• Verify DEMO_MODE=true works exactly as before (role cards, hardcoded IDs, no login)
• Verify DEMO_MODE=false shows sign-in/register landing page
• Verify protected routes redirect to /login when unauthenticated
• Verify /vendors browsing works without auth
• Verify API routes return 401 for unauthenticated requests in production mode
• Verify npm run build passes
• Verify npm run lint passes on changed files

Closes #4

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
project-firefly	Ready	Preview, Comment	Feb 10, 2026 11:20pm