[IkeyBenz]

Problem

Opening a game link directly (e.g., modi.app/games/abc123) showed a blank green background. Users had to refresh to see the lobby content.

Root Cause

Race condition between auth initialization and UI rendering. When navigating directly to a game link:

1. Firebase anonymous auth starts but takes time to complete
2. AuthProvider called setUserId AFTER awaiting getIdToken(true) token refresh
3. Meanwhile, UsernameProvider's onAuthStateChanged fires, causing splash screen to hide
4. GameScreen renders with currentUserId=null, showing empty ScreenContainer
5. Token refresh completes, setUserId finally called - but splash already hidden, user sees green screen

Solution

Three targeted fixes:

1. AuthProvider (providers/Auth.tsx)

Set userId immediately when auth succeeds, move token refresh to background:

// Before: userId set after token refresh
await result.user.getIdToken(true);
setUserId(result.user.uid);

// After: userId set immediately, token refreshed in background  
setUserId(result.user.uid);
await result.user.getIdToken(true);

2. useGame hook (ui/screens/Game/hooks/useGame.ts)

Guard against undefined gameId during initial route parsing:

if (!gameId) {
  return; // Don't subscribe to invalid path
}

3. GameScreen (ui/screens/Game/index.tsx)

Use isAuthLoading state for proper loading behavior:

const { userId: currentUserId, isLoading: isAuthLoading } = useAuth();
if (isAuthLoading || !gameId || !game || !currentUserId) {
  return <ScreenContainer />;
}

Testing

The fix ensures the UI has the auth state before the splash screen hides, eliminating the race condition that caused the blank green screen.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
modi-app	Ready	Preview, Comment	Feb 8, 2026 3:48pm