Frontend Auth Integration, Route Completion & UI Consistency

[TimPolk]

PR: Frontend Auth Integration, Route Completion & UI Consistency

Summary

This PR completes the frontend integration with the authentication system introduced in the backend auth PR, adds missing API route registrations, resolves merge conflicts, and unifies the visual design across all public-facing pages.

---

Major Changes

1. Token Management & Refresh Flow (services/api.ts)

Rewrote the API client to support the new refresh token system:

• Tokens moved from localStorage to in-memory variables mirrored to sessionStorage (reduces XSS exposure)
• Automatic 401 → refresh → retry: when any request returns 401, the client silently calls POST /api/auth/refresh, replaces both tokens, and retries the original request once
• Concurrent 401s coalesce into a single refresh call to avoid race conditions
• api.delete() now accepts an optional request body (needed for account deletion)
• One-time migration removes any legacy localStorage token on first load

2. Auth Context (context/AuthContext.tsx)

• login() now stores both token and refreshToken via the new setTokens() helper
• logout() is now async: calls POST /api/auth/logout with the refresh token (best-effort server-side revocation), then clears tokens locally
• Token verification on mount uses the new API client, which auto-refreshes if the access token has expired

3. User Types (types/user.ts)

• LoginResponse now includes refreshToken field
• Added RefreshResponse type (accessToken + refreshToken)

4. Centered Card Layout for All Auth Pages

Replaced the old two-column hero layout with a centered card + gradient orb background on every public auth page for visual consistency:

• ForgotPasswordPage — new .tsx and .css
• ResetPasswordPage — new .tsx and .css, added live password checklist with check/X icons
• CheckEmailPage — new .tsx and .css
• VerifyEmailPage — new .tsx and .css
• SignUpPage — updated .css to match centered card layout
• LoginPage — updated .tsx (added forgot password link, orb background) and .css

All pages now share the same visual pattern: dark background, purple/pink gradient orbs, bordered card with FinanceAI logo.

5. Route Fixes (App.tsx)

• Moved /reset-password from inside ProtectedRoute to public routes — users arrive from an email link without being logged in
• Confirmed all routes are correctly placed (7 public, 1 onboarding, 8 authenticated)

6. Missing Backend Route Registrations

Created two new route plugins that were missing — the frontend was calling these endpoints but the backend never registered them:

• investments.route.ts — GET /api/investments/holdings and GET /api/investments/transactions (used by DashboardPage, InvestmentsPage, SavingsPage)
• liabilities.route.ts — GET /api/liabilities (used by DebtsPage)
• Updated app.ts to register both with their prefixes

7. ProfilePage Updates (ProfilePage.tsx)

• Account deletion now uses api.delete('/api/auth/account', { currentPassword }) instead of raw fetch()
• Both logout() calls properly awaited (password change + account deletion)
• Resolved merge conflict markers

8. DashboardPage Fix (DashboardPage.tsx)

• Resolved merge conflict markers — kept the full chart color palette including entertainment, medical, and emergencyFund

9. Test Fix (DashboardPage.test.tsx)

• Added missing LabelList export to the recharts mock — BarChart.tsx uses LabelList but the test mock didn't include it

---

Files Changed

New Files

File	Description
server/src/modules/investments/investments.route.ts	Holdings + investment transactions endpoints
server/src/modules/liabilities/liabilities.route.ts	Liabilities endpoint
client/src/pages/ForgotPasswordPage.tsx	Forgot password page (centered card)
client/src/pages/ForgotPasswordPage.css	Styles
client/src/pages/ResetPasswordPage.tsx	Reset password page (centered card + checklist)
client/src/pages/ResetPasswordPage.css	Styles
client/src/pages/CheckEmailPage.tsx	Post-signup email check page (centered card)
client/src/pages/CheckEmailPage.css	Styles
client/src/pages/VerifyEmailPage.tsx	Email verification page (centered card)
client/src/pages/VerifyEmailPage.css	Styles

---

Security Notes

• Tokens stored in sessionStorage instead of localStorage — not accessible across tabs but survives page refresh within a tab
• Refresh token sent in logout body to ensure server-side revocation
• Password reset page is a public route (accessible from email link without authentication)
• All password forms enforce the updated complexity rules (10+ chars, uppercase, lowercase, digit, special character)

---

Testing

• npm run lint — passes
• npm run test — passes (after adding LabelList to recharts mock)
• Manual testing: register → check email → verify → login → dashboard → profile → change password → logout → forgot password → reset password flow