Fix/remove otel deadlock (#39)

* fix(auth): remove broken fallback cookie and AbortController timeout

Remove the firebase-auth-token fallback cookie that was never read by
middleware or auth.ts, causing a false sense of resilience. Remove the
AbortController timeout on the session POST that was aborting before the
server could respond on cold starts. Login now awaits the session POST
fully and surfaces clear error messages on failure.

- Remove firebase-auth-token cookie from login, logout, sidebar, user-nav
- Remove AbortController from login page session POST
- Remove onIdTokenChanged listener from ProtectedRoute
- Remove onIdTokenChange export from client auth module
- Revert middleware to only check __session cookie

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* fix(ui): mobile sidebar background, back buttons, header text, close btn

- Fix transparent mobile sidebar by adding --sidebar CSS variable and
  Tailwind color mapping so bg-sidebar resolves correctly
- Add "← Back to Dashboard" link to athletes, analytics, settings,
  profile, and games pages (matching dream-gym style)
- Change header text from "Dashboard" to "Hustle"
- Move sidebar close button to right of HUSTLE logo

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* fix(auth,ui): add session POST timeout+retry, extract BackToDashboard component

Address code review feedback:

1. Login session POST now has a 30s client-side timeout (AbortController)
   with one automatic retry on transient failures (504, 500, network error,
   timeout). Prevents indefinite loading state while tolerating cold starts.

2. Extract BackToDashboard into a reusable component used by athletes,
   analytics, games, profile, and settings pages — reduces duplication.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* fix(auth): increase set-session timeouts from 10s to 25s for cold starts

__session is now the sole auth mechanism (no fallback cookie). Server-side
verifyIdToken/createSessionCookie timeouts of 10s are too aggressive for
Firebase Admin cold starts (10-20s documented). Increased to 25s to stay
under the client's 30s AbortController timeout while accommodating cold starts.

Addresses Qodo review finding on PR #39.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

---------

Co-authored-by: Claude Opus 4.6 <[email protected]>
Co-authored-by: jeremylongshore <[email protected]>

Author: 3 people

src/app/api/auth/logout/route.ts

@@ -27,7 +27,6 @@ export async function POST(request: NextRequest) {
   };
 
   response.cookies.set('__session', '', cookieOptions);
-  response.cookies.set('firebase-auth-token', '', { ...cookieOptions, httpOnly: false });
 
   return response;
 }

src/app/api/auth/set-session/route.ts

@@ -40,7 +40,7 @@ export async function POST(request: NextRequest) {
     let decodedToken;
     try {
       console.log(`[set-session] calling verifyIdToken +${Date.now() - t0}ms`);
-      decodedToken = await withTimeout(adminAuth.verifyIdToken(idToken, true), 10000, 'verifyIdToken');
+      decodedToken = await withTimeout(adminAuth.verifyIdToken(idToken, true), 25000, 'verifyIdToken');
       console.log(`[set-session] verifyIdToken done +${Date.now() - t0}ms`);
     } catch (verifyError: any) {
       const isTimeout = verifyError?.message?.includes('timed out');
@@ -56,7 +56,7 @@ export async function POST(request: NextRequest) {
     let sessionCookie: string;
     try {
       console.log(`[set-session] calling createSessionCookie +${Date.now() - t0}ms`);
-      sessionCookie = await withTimeout(adminAuth.createSessionCookie(idToken, { expiresIn: SESSION_EXPIRES_MS }), 10000, 'createSessionCookie');
+      sessionCookie = await withTimeout(adminAuth.createSessionCookie(idToken, { expiresIn: SESSION_EXPIRES_MS }), 25000, 'createSessionCookie');
       console.log(`[set-session] createSessionCookie done +${Date.now() - t0}ms`);
     } catch (cookieError: any) {
       const isTimeout = cookieError?.message?.includes('timed out');

src/app/dashboard/analytics/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation';
 import { getAllGamesAdmin } from '@/lib/firebase/admin-services/games';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { TrendingUp, Target, Award, BarChart3, Goal, Shield, Users } from 'lucide-react';
+import { BackToDashboard } from '@/components/ui/back-to-dashboard';
 
 // Position category mapping
 const POSITION_CATEGORIES: Record<string, string> = {
@@ -121,6 +122,8 @@ export default async function AnalyticsPage() {
 
   return (
     <div className="flex flex-col gap-6">
+      <BackToDashboard />
+
       {/* Header */}
       <div>
         <h1 className="text-3xl font-bold text-zinc-900">Analytics</h1>

src/app/dashboard/athletes/page.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
+import { BackToDashboard } from '@/components/ui/back-to-dashboard';
 import { calculateAge, getInitials, getAvatarColor } from '@/lib/player-utils';
 import type { Player } from '@/types/firestore';
 
@@ -48,6 +49,8 @@ export default async function AthletesPage() {
 
   return (
     <div className="flex flex-col gap-4">
+      <BackToDashboard />
+
       {/* Header Section */}
       <div className="flex items-start justify-between flex-wrap gap-4">
         <div>

src/app/dashboard/games/page.tsx

@@ -2,8 +2,8 @@ import { authWithProfile } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 import { getAllGamesAdmin } from '@/lib/firebase/admin-services/games';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ChevronLeft } from 'lucide-react';
 import Link from 'next/link';
+import { BackToDashboard } from '@/components/ui/back-to-dashboard';
 import {
   formatGameDate,
   getResultBadgeClasses,
@@ -42,21 +42,14 @@ export default async function GamesHistoryPage() {
 
   return (
     <div className="space-y-6">
+      <BackToDashboard />
+
       {/* PAGE HEADER */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-zinc-900">Games History</h1>
-          <p className="text-zinc-600 mt-2">
-            Complete history of all logged games across all athletes
-          </p>
-        </div>
-        <Link
-          href="/dashboard"
-          className="flex items-center gap-2 text-base text-zinc-700 hover:text-zinc-900 transition-colors"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          Back to Dashboard
-        </Link>
+      <div>
+        <h1 className="text-3xl font-bold text-zinc-900">Games History</h1>
+        <p className="text-zinc-600 mt-2">
+          Complete history of all logged games across all athletes
+        </p>
       </div>
 
       {/* SUMMARY STATS */}

src/app/dashboard/profile/page.tsx

@@ -4,6 +4,7 @@ import { getUserProfileAdmin } from '@/lib/firebase/admin-services/users';
 import { getPlayersAdmin } from '@/lib/firebase/admin-services/players';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { BackToDashboard } from '@/components/ui/back-to-dashboard';
 
 export default async function ProfilePage() {
   // Firebase Admin auth check
@@ -24,6 +25,8 @@ export default async function ProfilePage() {
 
   return (
     <div className="space-y-6">
+      <BackToDashboard />
+
       <div>
         <h1 className="text-3xl font-bold text-zinc-900">Profile</h1>
         <p className="text-zinc-600 mt-2">

src/app/dashboard/settings/page.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PinSettingsForm } from './pin-settings-form';
 import Link from 'next/link';
 import { CreditCard } from 'lucide-react';
+import { BackToDashboard } from '@/components/ui/back-to-dashboard';
 
 export default async function SettingsPage() {
   // Firebase Admin auth check
@@ -22,6 +23,8 @@ export default async function SettingsPage() {
 
   return (
     <div className="space-y-6">
+      <BackToDashboard />
+
       <div>
         <h1 className="text-3xl font-bold text-zinc-900">Settings</h1>
         <p className="text-zinc-600 mt-2">

src/app/globals.css

@@ -24,6 +24,8 @@
     --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
     --radius: 0.5rem;
+    --sidebar: 0 0% 98%;
+    --sidebar-foreground: 240 5.9% 10%;
   }
 }
 

src/app/login/page.tsx

@@ -47,39 +47,51 @@ function LoginContent() {
         'Sign in'
       );
 
-      // Step 2: Get ID token and set cookies
+      // Step 2: Get ID token and set server session cookie
       const idToken = await user.getIdToken();
 
-      // Set client-side fallback cookie FIRST (before any network call or navigation)
-      // max-age=3600 matches Firebase ID token expiry (1 hour)
-      // Middleware reads this cookie as fallback if __session is absent
-      const isSecure = window.location.protocol === 'https:';
-      document.cookie = `firebase-auth-token=${idToken}; path=/; max-age=3600${isSecure ? '; secure' : ''}; samesite=lax`;
-
-      // AWAIT the server-side session cookie POST with a 15s timeout
-      // This sets __session (14-day, httpOnly) — the real long-term auth mechanism
-      // Fallback cookie above guarantees dashboard access even if this times out
+      // Set server-side session cookie (__session, 14-day, httpOnly).
+      // Uses a 30s timeout (cold starts can take 10-20s) with one automatic retry
+      // on transient failures (504/500/network error).
       console.log('[Login] Setting server session cookie...');
-      try {
+      const setSession = async (attempt: number) => {
         const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 15000);
-        const response = await fetch('/api/auth/set-session', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ idToken }),
-          credentials: 'include',
-          signal: controller.signal,
-        });
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          console.error('[Login] Session cookie API error:', response.status);
-        } else {
+        const timer = setTimeout(() => controller.abort(), 30000);
+        try {
+          const response = await fetch('/api/auth/set-session', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ idToken }),
+            credentials: 'include',
+            signal: controller.signal,
+          });
+          clearTimeout(timer);
+          if (!response.ok) {
+            const body = await response.json().catch(() => ({}));
+            const err = new Error(body.error || `Server returned ${response.status}`);
+            (err as any).status = response.status;
+            throw err;
+          }
           console.log('[Login] Server session cookie set successfully');
+        } catch (err: any) {
+          clearTimeout(timer);
+          const isRetryable = attempt < 2 && (
+            err.name === 'AbortError' ||
+            err.status === 504 ||
+            err.status === 500 ||
+            err.message?.includes('fetch')
+          );
+          if (isRetryable) {
+            console.warn(`[Login] Session attempt ${attempt} failed (${err.message}), retrying...`);
+            return setSession(attempt + 1);
+          }
+          if (err.name === 'AbortError') {
+            throw new Error('Session request timed out. Please check your connection and try again.');
+          }
+          throw new Error(err.message || 'Unable to establish session. Please try again.');
         }
-      } catch (sessionError: any) {
-        // POST timed out or failed — fallback cookie already set, user still gets in
-        console.warn('[Login] Server session cookie failed (non-fatal):', sessionError?.message);
-      }
+      };
+      await setSession(1);
 
       // Step 3: Redirect to dashboard
       router.push('/dashboard');

src/components/ProtectedRoute.tsx

@@ -18,7 +18,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { User as FirebaseUser } from 'firebase/auth';
-import { onAuthStateChange, onIdTokenChange } from '@/lib/firebase/auth';
+import { onAuthStateChange } from '@/lib/firebase/auth';
 import { isE2ETestMode } from '@/lib/e2e';
 
 interface ProtectedRouteProps {
@@ -51,24 +51,6 @@ export default function ProtectedRoute({
     };
   }, []);
 
-  // Keep the firebase-auth-token fallback cookie fresh by refreshing it whenever
-  // Firebase auto-renews the ID token (~every 55 minutes). Without this, the
-  // fallback cookie would expire after 1 hour if the __session POST ever failed.
-  useEffect(() => {
-    const unsubscribe = onIdTokenChange(async (firebaseUser) => {
-      if (firebaseUser) {
-        try {
-          const token = await firebaseUser.getIdToken();
-          const isSecure = window.location.protocol === 'https:';
-          document.cookie = `firebase-auth-token=${token}; path=/; max-age=3600${isSecure ? '; secure' : ''}; samesite=lax`;
-        } catch {
-          // Non-fatal: if token refresh fails, existing cookie remains until expiry
-        }
-      }
-    });
-    return () => unsubscribe();
-  }, []);
-
   useEffect(() => {
     // Only handle email verification redirect - middleware handles auth
     if (!loading && user && requireEmailVerification && !user.emailVerified) {