clerk auth fixed

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
   };
-}
+}