From b4d7dacc40cd8fab2d36021fa082f8058931dd82 Mon Sep 17 00:00:00 2001
From: Amr Gaber <amrtgaber@gmail.com>
Date: Tue, 26 May 2026 23:27:12 -0500
Subject: [PATCH] feat: client-side navigation for auth state transitions (#43)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces 6 `window.location.href` calls with TanStack Router's
`useNavigate` across login, register, logout, oauth callback, profile
delete, and associate-complete. No more white flash between auth state
changes.

## The race that wasn't

`login-page.tsx:36-37` previously documented:
> Hard redirect — reloads the page so AuthProvider picks up the new
> cookie cleanly. Client-side navigate has a race condition with the
> onUnauthorized handler.

E2E testing (Playwright against real API + Postgres) shows the race
does NOT manifest with `await auth.checkAuth() + await navigate()`:
React 18's batching plus TanStack Router's context propagation (via
`<RouterProvider context={{ auth }} />` in `main.tsx:105`) means the
updated context is visible by the time `beforeLoad` runs. No
`router.invalidate()` needed.

The pattern by call site:

- **Login / register**: `await auth.checkAuth() → await navigate(...)`.
  Refreshes the AuthContext with the new cookie's identity before the
  destination's beforeLoad checks `isAuthenticated`.
- **Logout / delete**: `await auth.logout() → await navigate("/login")`.
  Clears local state before navigating so /login's "redirect
  authenticated users to /profile" guard doesn't bounce the user back.
- **OAuth-complete**: keeps a direct `api.get("auth/me")` (so the
  routing decision sees current data without waiting for a render)
  PLUS `await auth.checkAuth()` (so the AuthContext is fresh for the
  destination route).
- **Associate-complete**: pure in-app nav with no auth state change.

## Preserved hard-nav cases

- Cross-origin redirects (consumer apps like hera-streamer-…) still use
  `window.location.href` — useNavigate is for in-app routes only.
- Outbound to provider OAuth (Google / Steam authorize) keeps direct
  navigation (CSP + the dev/prod JSON-vs-302 split, fixed in #44).

## Test plan

- [x] `pnpm test:run` — 45 tests pass.
- [x] `pnpm exec tsc -b` clean.
- [x] Live E2E: register → /profile, logout → /login, login → /profile,
  delete → /login. No bounce, no white flash. Backend log confirms
  request chain (register/login/accept-tos/me/connections; logout;
  delete/logout).

Closes #43.
---
 src/components/navbar.tsx                     |  4 +-
 .../oauth-associate-complete-page.tsx         |  7 ++-
 src/pages/callback/oauth-complete-page.tsx    | 51 ++++++++++++-------
 src/pages/login/login-page.tsx                | 20 ++++++--
 src/pages/profile/profile-page.tsx            |  6 ++-
 src/pages/register/register-page.tsx          | 10 +++-
 6 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 1a386ab..e0ed4d5 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,4 +1,5 @@
 import { ChevronDown, ExternalLink, LogOut } from "lucide-react"
+import { useNavigate } from "@tanstack/react-router"
 import { BrandLockup } from "@/components/brand-lockup"
 import {
   DropdownMenu,
@@ -13,6 +14,7 @@ import { useAuth } from "@/lib/auth"
 
 export function Navbar() {
   const auth = useAuth()
+  const navigate = useNavigate()
 
   return (
     <nav className="border-border/50 bg-background/80 fixed top-0 z-50 w-full border-b backdrop-blur-sm">
@@ -49,7 +51,7 @@ export function Navbar() {
                 <DropdownMenuItem
                   onClick={async () => {
                     await auth.logout()
-                    window.location.href = "/login"
+                    await navigate({ to: "/login" })
                   }}
                 >
                   <LogOut className="size-4" />
diff --git a/src/pages/callback/oauth-associate-complete-page.tsx b/src/pages/callback/oauth-associate-complete-page.tsx
index 365f729..4950d56 100644
--- a/src/pages/callback/oauth-associate-complete-page.tsx
+++ b/src/pages/callback/oauth-associate-complete-page.tsx
@@ -1,13 +1,16 @@
 import { useEffect } from "react"
+import { useNavigate } from "@tanstack/react-router"
 
 type Props = {
   provider: "google" | "steam"
 }
 
 export function OAuthAssociateCompletePage({ provider }: Props) {
+  const navigate = useNavigate()
+
   useEffect(() => {
-    window.location.href = `/profile?linked=${provider}`
-  }, [provider])
+    void navigate({ to: "/profile", search: { linked: provider } })
+  }, [provider, navigate])
 
   return (
     <div className="flex flex-1 items-center justify-center">
diff --git a/src/pages/callback/oauth-complete-page.tsx b/src/pages/callback/oauth-complete-page.tsx
index 1a23798..5dff714 100644
--- a/src/pages/callback/oauth-complete-page.tsx
+++ b/src/pages/callback/oauth-complete-page.tsx
@@ -1,33 +1,50 @@
 import { useEffect, useRef } from "react"
+import { useNavigate } from "@tanstack/react-router"
 import { api } from "@/api/api"
+import { useAuth } from "@/lib/auth"
 
 export function OAuthCompletePage() {
+  const auth = useAuth()
+  const navigate = useNavigate()
   const calledRef = useRef(false)
 
   useEffect(() => {
     if (calledRef.current) return
     calledRef.current = true
 
-    api
-      .get("auth/me")
-      .json<{ email: string | null; tos_accepted_at: string | null }>()
-      .then((user) => {
+    async function complete() {
+      try {
+        const user = await api
+          .get("auth/me")
+          .json<{ email: string | null; tos_accepted_at: string | null }>()
+        // Also refresh the AuthContext so the destination route's beforeLoad
+        // sees the new session. The direct read above gives us the user data
+        // for the routing decision below without waiting for the React
+        // render cycle to flush.
+        await auth.checkAuth()
+
         // Steam OAuth users start with no email until they pass through
-        // /accept-terms (auth-api #36, auth-web #36) — route them there
-        // even if they previously accepted the old TOS-only gate.
+        // /accept-terms — route them there even if they previously accepted
+        // the old TOS-only gate.
         if (!user.tos_accepted_at || !user.email) {
-          // Keep the redirect in localStorage — accept-terms page will use it
-          window.location.href = "/accept-terms"
-        } else {
-          const savedRedirect = localStorage.getItem("auth_redirect")
-          localStorage.removeItem("auth_redirect")
-          window.location.href = savedRedirect ?? "/profile"
+          await navigate({ to: "/accept-terms" })
+          return
+        }
+        const savedRedirect = localStorage.getItem("auth_redirect")
+        localStorage.removeItem("auth_redirect")
+        if (savedRedirect && savedRedirect.startsWith("http")) {
+          // Cross-origin redirect (consumer apps) — hard nav.
+          window.location.href = savedRedirect
+          return
         }
-      })
-      .catch(() => {
-        window.location.href = "/login"
-      })
-  }, [])
+        await navigate({ to: savedRedirect ?? "/profile" })
+      } catch {
+        await navigate({ to: "/login" })
+      }
+    }
+
+    void complete()
+  }, [auth, navigate])
 
   return (
     <div className="flex flex-1 items-center justify-center">
diff --git a/src/pages/login/login-page.tsx b/src/pages/login/login-page.tsx
index 91f8ef3..696be0f 100644
--- a/src/pages/login/login-page.tsx
+++ b/src/pages/login/login-page.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { Link, useSearch } from "@tanstack/react-router"
+import { Link, useNavigate, useSearch } from "@tanstack/react-router"
 import { LoaderCircle } from "lucide-react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
@@ -15,8 +15,11 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { api, baseUrl } from "@/api/api"
 import { getErrorMessage } from "@/lib/api-errors"
+import { useAuth } from "@/lib/auth"
 
 export function LoginPage() {
+  const auth = useAuth()
+  const navigate = useNavigate()
   const search = useSearch({ from: "/login" })
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
@@ -33,9 +36,18 @@ export function LoginPage() {
         body: new URLSearchParams({ username: email, password }),
         headers: { "Content-Type": "application/x-www-form-urlencoded" },
       })
-      // Hard redirect — reloads the page so AuthProvider picks up the new cookie cleanly.
-      // Client-side navigate has a race condition with the onUnauthorized handler.
-      window.location.href = redirect ?? "/profile"
+      const target = redirect ?? "/profile"
+      if (target.startsWith("http")) {
+        // Cross-origin redirect (e.g. from a consumer app like
+        // hera-streamer-…) — must be a hard nav since useNavigate only
+        // handles in-app routes.
+        window.location.href = target
+        return
+      }
+      // Refresh the AuthContext (reads /auth/me with the new cookie) before
+      // navigating, so /profile's beforeLoad sees isAuthenticated=true.
+      await auth.checkAuth()
+      await navigate({ to: target })
     } catch (error) {
       const message = await getErrorMessage(error, "Login failed")
       toast.error(message)
diff --git a/src/pages/profile/profile-page.tsx b/src/pages/profile/profile-page.tsx
index 5eacfc7..7e4dd2a 100644
--- a/src/pages/profile/profile-page.tsx
+++ b/src/pages/profile/profile-page.tsx
@@ -156,7 +156,11 @@ export function ProfilePage() {
     try {
       await api.delete("auth/me")
       toast.success("Account deleted.")
-      window.location.href = "/login"
+      // Clear local auth state before navigating — /login's beforeLoad
+      // redirects authenticated users to /profile, so without this the
+      // user would bounce back to the page they just deleted from.
+      await auth.logout()
+      await navigate({ to: "/login" })
     } catch (error) {
       const message = await getErrorMessage(error, "Failed to delete account")
       toast.error(message)
diff --git a/src/pages/register/register-page.tsx b/src/pages/register/register-page.tsx
index f04d53e..8929138 100644
--- a/src/pages/register/register-page.tsx
+++ b/src/pages/register/register-page.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { Link } from "@tanstack/react-router"
+import { Link, useNavigate } from "@tanstack/react-router"
 import { LoaderCircle } from "lucide-react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
@@ -16,9 +16,12 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { api } from "@/api/api"
 import { getErrorMessage } from "@/lib/api-errors"
+import { useAuth } from "@/lib/auth"
 import { submitConsents, type ConsentInput } from "@/lib/consent"
 
 export function RegisterPage() {
+  const auth = useAuth()
+  const navigate = useNavigate()
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")
@@ -66,7 +69,10 @@ export function RegisterPage() {
       } catch {
         // Swallow — user is signed up; they'll be prompted again on profile.
       }
-      window.location.href = "/profile"
+      // Refresh the AuthContext (reads /auth/me with the new cookie) before
+      // navigating, so /profile's beforeLoad sees isAuthenticated=true.
+      await auth.checkAuth()
+      await navigate({ to: "/profile" })
     } catch (error) {
       const message = await getErrorMessage(error, "Registration failed")
       toast.error(message)