Fix the no-org redirect loop and swallowed Google sign-in errors

Redirect chain traced across middleware.ts, ChromeSwitcher.tsx and
AuthProvider.tsx before touching anything, per the ask. Those three were
already correct as of c7f985d/2a1d52b/83416fe (middleware exempts
/onboarding and /signup from the drb_session cookie gate, ChromeSwitcher
sends any signed-in no-org user to /onboarding, AuthProvider only sets the
cookie once an org_id claim exists). The actual loop was one file upstream
of all three: app/login/page.tsx hardcoded `router.push("/dashboard")`
after both the email/password and Google handlers resolved. That push
races AuthProvider's async onAuthStateChanged -> getIdTokenResult ->
cookie decision. For a no-org account the cookie never gets set, so
middleware bounces the very next request back to /login with no
explanation — the ping-pong the coordinator saw live.

Fix: login page no longer navigates from the handlers. It waits on
AuthProvider's own `loading`/`orgId` and redirects once claims are
settled (/dashboard with org_id, /onboarding without). This also fixes a
second case: a user who lands on /login already signed in (e.g. bounced
there by middleware while their Firebase session was still valid) now
gets routed the same way instead of sitting inert on a login form with no
feedback. /onboarding itself (org-name form, single action) was already
adequate as the "explain the state" screen once the loop stopped
recreating it.

Also, live tonight: Google sign-in was failing outright in prod with no
console/network trace. app/login/page.tsx's Google handler did
`catch { setError("Google sign-in failed. Try again.") }` — no binding,
error discarded. Added lib/authErrors.ts: logs the raw error, and maps
Firebase codes to messages that distinguish two categories — the user's
own situation (popup blocked/closed, bad password, network) says "try
again"; deployment misconfiguration (auth/unauthorized-domain,
auth/operation-not-allowed) says so explicitly and does not suggest
retrying, since retrying can't fix a missing authorized-domain entry or a
disabled provider. Applied to both handlers in login/page.tsx and both
in signup/page.tsx (same swallowing pattern, same fix). Per the
coordinator's steer: this is diagnosis only — no popup-to-redirect
fallback, no auth method change. If production is hitting
auth/unauthorized-domain, that's a Firebase Console fix
(drb.cusano.net -> Authorized domains), not a code fix.

Nav.tsx: sign-out was only reachable from /profile. Added a profile
dropdown (desktop) and drawer entries (mobile) with Profile / Refresh
access / Sign out, so sign-out is reachable from anywhere in the app.

"Refresh access" calls AuthProvider.refreshClaims() (already existed,
already used by /onboarding after signup) so a user whose role or org
was just changed server-side can pick it up without a full logout.

Decision on unknown Google accounts (point 4): kept self-serve org
creation via /onboarding rather than a "request access" pending state.
BUSINESS_MODEL.md #2.1 already answers this for the owner: "a limited
free public tier *and* full paid access without contributing... cash is
the primary revenue line from day one." A pending-approval gate would
contradict that — it would make org creation itself the thing being
gated, when the model explicitly does not want contribution (or approval)
to be the only door. Self-serve org provisioning via POST /auth/signup
was already built for this (2a1d52b) and needed no further gating
decision, just for the loop in front of it to stop.

Reversible: no schema change, no new gating, no billing/Stripe touched.
Bench: rsync'd to the WSL-native ~/drb-frontend workspace and ran
`npx tsc --noEmit` there (per CLAUDE.md — the H: drive install path is
not viable) — exit 0, no errors. No Python touched this pass.
This commit is contained in:
Logan Cusano
2026-08-18 21:57:39 -04:00
parent 90a0412066
commit 4dc3f27ac4
4 changed files with 194 additions and 41 deletions
+81 -14
View File
@@ -61,16 +61,37 @@ function MoonIcon() {
}
export function Nav() {
const { user, isAdmin, isOperator, isOrgOwner, orgId } = useAuth();
const { user, isAdmin, isOperator, isOrgOwner, orgId, signOut, refreshClaims } = useAuth();
const pathname = usePathname();
const router = useRouter();
const { nodes: pending } = useUnconfiguredNodes();
const unackedAlerts = useUnacknowledgedAlerts();
const { theme, toggle } = useTheme();
const [mobileOpen, setMobileOpen] = useState(false);
const [profileMenuOpen, setProfileMenuOpen] = useState(false);
const [refreshing, setRefreshing] = useState(false);
if (!user) return null;
async function handleSignOut() {
setProfileMenuOpen(false);
await signOut();
router.push("/login");
}
// Re-fetches the ID token so a claims change made server-side (e.g. an
// admin granting a role, or org_id being provisioned) takes effect without
// a full sign-out/sign-in. See AuthProvider.refreshClaims.
async function handleRefreshClaims() {
setRefreshing(true);
try {
await refreshClaims();
} finally {
setRefreshing(false);
setProfileMenuOpen(false);
}
}
const allLinks = [
...viewerLinks,
...(orgId === FOUNDING_ORG_ID || isAdmin ? [tripsLink] : []),
@@ -120,18 +141,51 @@ export function Nav() {
{theme === "dark" ? <SunIcon /> : <MoonIcon />}
</button>
{/* Profile avatar (desktop) */}
<button
onClick={() => router.push("/profile")}
className={`hidden md:flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold transition-colors ${
pathname.startsWith("/profile")
? "bg-indigo-600 text-white"
: "bg-gray-800 text-gray-300 hover:bg-gray-700"
}`}
title="Profile"
>
{(user?.displayName || user?.email || "?")[0].toUpperCase()}
</button>
{/* Profile avatar + dropdown (desktop) */}
<div className="hidden md:block relative">
<button
onClick={() => setProfileMenuOpen((v) => !v)}
className={`flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold transition-colors ${
pathname.startsWith("/profile") || profileMenuOpen
? "bg-indigo-600 text-white"
: "bg-gray-800 text-gray-300 hover:bg-gray-700"
}`}
title="Account"
>
{(user?.displayName || user?.email || "?")[0].toUpperCase()}
</button>
{profileMenuOpen && (
<>
{/* Click-away backdrop */}
<div className="fixed inset-0 z-40" onClick={() => setProfileMenuOpen(false)} />
<div className="absolute right-0 mt-2 w-48 bg-gray-900 border border-gray-800 rounded-lg shadow-lg z-50 py-1 font-mono text-sm">
<Link
href="/profile"
onClick={() => setProfileMenuOpen(false)}
className="block px-3 py-2 text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
>
Profile
</Link>
<button
onClick={handleRefreshClaims}
disabled={refreshing}
className="w-full text-left px-3 py-2 text-gray-300 hover:bg-gray-800 hover:text-white transition-colors disabled:opacity-50"
title="Pick up a role or org change made server-side, without signing out"
>
{refreshing ? "Refreshing…" : "Refresh access"}
</button>
<div className="border-t border-gray-800 my-1" />
<button
onClick={handleSignOut}
className="w-full text-left px-3 py-2 text-red-500 hover:bg-gray-800 hover:text-red-400 transition-colors"
>
Sign out
</button>
</div>
</>
)}
</div>
{/* Hamburger (mobile) */}
<button
@@ -177,7 +231,7 @@ export function Nav() {
)}
</Link>
))}
<div className="border-t border-gray-800 pt-3 mt-1">
<div className="border-t border-gray-800 pt-3 mt-1 flex flex-col gap-1">
<Link
href="/profile"
onClick={() => setMobileOpen(false)}
@@ -187,6 +241,19 @@ export function Nav() {
>
Profile
</Link>
<button
onClick={() => { setMobileOpen(false); handleRefreshClaims(); }}
disabled={refreshing}
className="py-2 text-sm font-mono text-gray-500 text-left disabled:opacity-50"
>
{refreshing ? "Refreshing…" : "Refresh access"}
</button>
<button
onClick={() => { setMobileOpen(false); handleSignOut(); }}
className="py-2 text-sm font-mono text-red-500 text-left"
>
Sign out
</button>
</div>
</div>
)}