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>
 

src/hooks/usePartyKit.ts

@@ -1,26 +1,31 @@
 import { useState, useEffect, useCallback } from 'react';
 import PartySocket from 'partysocket';
 import { GameState } from '../types';
+import { useAuth, useUser } from '@clerk/clerk-react';
 
 const PARTY_HOST = import.meta.env.DEV ? 'localhost:1999' : 'bozo-clicker.your-username.partykit.dev';
 
 export function usePartyKit() {
+  const { getToken, isLoaded, isSignedIn } = useAuth();
+  const { user } = useUser();
   const [gameState, setGameState] = useState<GameState | null>(null);
   const [socket, setSocket] = useState<PartySocket | null>(null);
-  const [userId] = useState(() => Math.random().toString(36).substring(7));
-  const [userName] = useState(() => `Bozo${Math.floor(Math.random() * 1000)}`);
 
   useEffect(() => {
+    if (!isLoaded || !isSignedIn || !user) return;
+
     const ws = new PartySocket({
       host: PARTY_HOST,
       room: 'bozo-clicker'
     });
 
-    ws.onopen = () => {
+    ws.onopen = async () => {
+      const token = await getToken();
       ws.send(JSON.stringify({
         type: 'user-join',
-        userId,
-        userName
+        userId: user.id,
+        userName: user.username || user.fullName || user.emailAddresses[0].emailAddress,
+        token
       }));
     };
 
@@ -36,33 +41,37 @@ export function usePartyKit() {
     return () => {
       ws.close();
     };
-  }, [userId, userName]);
+  }, [isLoaded, isSignedIn, user, getToken]);
 
-  const sendClick = useCallback(() => {
-    if (socket) {
+  const sendClick = useCallback(async () => {
+    if (socket && isSignedIn && user) {
+      const token = await getToken();
       socket.send(JSON.stringify({
         type: 'click',
-        userId,
-        userName
+        userId: user.id,
+        userName: user.username || user.fullName || user.emailAddresses[0].emailAddress,
+        token
       }));
     }
-  }, [socket, userId, userName]);
+  }, [socket, isSignedIn, user, getToken]);
 
-  const purchaseUpgrade = useCallback((upgradeId: string) => {
-    if (socket) {
+  const purchaseUpgrade = useCallback(async (upgradeId: string) => {
+    if (socket && isSignedIn && user) {
+      const token = await getToken();
       socket.send(JSON.stringify({
         type: 'purchase-upgrade',
-        userId,
-        upgradeId
+        userId: user.id,
+        upgradeId,
+        token
       }));
     }
-  }, [socket, userId]);
+  }, [socket, isSignedIn, user, getToken]);
 
   return {
     gameState,
     sendClick,
     purchaseUpgrade,
-    userId,
-    userName
+    userId: user?.id,
+    userName: user?.username || user?.fullName || user?.emailAddresses[0]?.emailAddress
   };
-}
+}