Authenticated Signaling

import { MultiplayerProvider, useRoom } from "@carverjs/multiplayer";

import { useEffect, useMemo, useRef } from "react";
import type { MutableRefObject } from "react";
import { Game } from "@carverjs/core/components";
import { MultiplayerProvider, useRoom } from "@carverjs/multiplayer";

// The room this client is in, readable from callbacks that live outside the
// React tree. Your backend needs it to mint the right claims.
const currentRoomId = { current: null as string | null };

function App() {
  const rejoin = useRef<() => void>(() => {});

  // The provider creates the signaling strategy once, on mount. Memoising the
  // config keeps that object's identity stable rather than relying on it.
  const strategy = useMemo(
    () => ({
      type: "firebase" as const,
      databaseURL: import.meta.env.VITE_RTDB_URL,
      apiKey: import.meta.env.VITE_FIREBASE_API_KEY,

      authTokenProvider: async () => {
        const res = await fetch("/api/signaling-token", {
          method: "POST",
          credentials: "include",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ roomId: currentRoomId.current }),
        });
        if (!res.ok) throw new Error(`token endpoint returned ${res.status}`);
        const { token } = await res.json();
        return token;
      },

      onAuthError: (error: Error) => {
        console.error("[signaling] auth failed", error);
        // A cancelled listener is not re-subscribed. Rejoining is what
        // rebuilds the subscriptions.
        rejoin.current();
      },
    }),
    [],
  );

  return (
    <Game>
      <MultiplayerProvider appId="my-game" strategy={strategy}>
        <Session rejoin={rejoin} />
      </MultiplayerProvider>
    </Game>
  );
}

function Session({ rejoin }: { rejoin: MutableRefObject<() => void> }) {
  // useRoom(roomId?, options?) — no roomId, so nothing auto-joins and the
  // room is entered by calling join() yourself.
  const { roomId, join, leave } = useRoom(undefined, { displayName: "Player" });
  const rejoining = useRef(false);

  useEffect(() => {
    if (roomId) currentRoomId.current = roomId;
  }, [roomId]);

  useEffect(() => {
    rejoin.current = async () => {
      const target = currentRoomId.current;
      // Several listeners can be cancelled at once, so onAuthError can fire
      // more than once for a single failure. Rejoin once, not per error.
      if (!target || rejoining.current) return;
      rejoining.current = true;
      try {
        leave(); // synchronous
        await join(target);
      } finally {
        rejoining.current = false;
      }
    };
  }, [join, leave, rejoin]);

  return null; // your lobby and scene go here
}

{
  "rules": {
    "$ns": {
      "__carver__": {
        "lobby": {
          ".read": "auth != null && auth.token.ns === $ns",
          "$roomId": {
            ".write": "auth != null && auth.token.ns === $ns && auth.token.roomId === $roomId"
          }
        },
        "rooms": {
          "$roomId": {
            ".read": "auth != null && auth.token.ns === $ns && auth.token.roomId === $roomId",
            ".write": "auth != null && auth.token.ns === $ns && auth.token.roomId === $roomId"
          }
        }
      }
    }
  }
}

// server/signaling-token.ts — runs on YOUR backend, never in the browser.
import { randomUUID } from "node:crypto";
import { initializeApp, cert } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";

initializeApp({
  credential: cert(JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT!)),
});

app.post("/api/signaling-token", async (req, res) => {
  const player = await authenticateRequest(req); // your own session check
  const { roomId } = req.body;

  // The authorization decision lives here, not in the rules. The rules only
  // enforce the claims you decided to hand out.
  if (!player || !mayJoinRoom(player, roomId)) return res.status(403).end();

  // Opaque, per-player-session, no PII — and the handle revocation targets.
  const uid = await getOrCreateSignalingUid(player, roomId, randomUUID);

  const token = await getAuth().createCustomToken(uid, {
    roomId,
    ns: "my-game", // must equal the appId passed to MultiplayerProvider
  });

  res.json({ token });
});