clerk auth fixed

src/App.tsx

@@ -8,8 +8,10 @@ import { Leaderboard } from './components/Leaderboard';
 import { Background } from './components/Background';
 import { MILESTONES } from './config/milestones';
 import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react';
+import { useAuth } from '@clerk/clerk-react';
 
 function App() {
+  const { isSignedIn, isLoaded } = useAuth();
   const { gameState, sendClick, purchaseUpgrade, userId } = usePartyKit();
   const [celebrationMessage, setCelebrationMessage] = useState<string | null>(null);
   const [previousMilestones, setPreviousMilestones] = useState<Record<string, boolean>>({});
@@ -18,8 +20,8 @@ function App() {
     if (gameState) {
       // Check for new milestones
       const newMilestones = Object.keys(gameState.milestones).filter(
-        (milestoneId) => 
-          gameState.milestones[milestoneId] && 
+        (milestoneId) =>
+          gameState.milestones[milestoneId] &&
           !previousMilestones[milestoneId]
       );
 
@@ -35,7 +37,7 @@ function App() {
     }
   }, [gameState, previousMilestones]);
 
-  if (!gameState) {
+  if (!isLoaded || !gameState) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-900 to-pink-900">
         <div className="text-white text-2xl font-bold animate-pulse">
@@ -45,7 +47,8 @@ function App() {
     );
   }
 
-  const userClicks = gameState.users[userId]?.clicks || 0;
+  // Only calculate userClicks if userId is defined (i.e., user is signed in)
+  const userClicks = isSignedIn && userId ? gameState.users[userId]?.clicks || 0 : 0;
 
   return (
     <div className="min-h-screen relative overflow-x-hidden">
@@ -99,7 +102,7 @@ function App() {
           {/* Right Column - Milestones and Leaderboard */}
           <div className="lg:col-span-1 space-y-6">
             <Milestones gameState={gameState} />
-            <Leaderboard gameState={gameState} currentUserId={userId} />
+            <Leaderboard gameState={gameState} currentUserId={userId || ''} />
           </div>
         </div>