Only allow game creator to view manage_game page

staadecker · Mar 12, 2024 · 974121b · 974121b
1 parent ecaf16f
commit 974121b
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 20 deletions.
diff --git a/src/firebase/FirebaseContext.tsx b/src/firebase/FirebaseContext.tsx
@@ -1,5 +1,12 @@
 import { FirebaseApp, initializeApp } from "firebase/app";
-import { Auth, User, getAuth, signInAnonymously } from "firebase/auth";
+import {
+  Auth,
+  User,
+  browserLocalPersistence,
+  getAuth,
+  initializeAuth,
+  signInAnonymously,
+} from "firebase/auth";
 import { Firestore, getFirestore } from "firebase/firestore";
 import { createContext, useContext, useEffect, useState } from "react";
 import Loading from "../components/Loading";
@@ -25,7 +32,7 @@ export const FirebaseProvider = (props: { children: React.ReactNode }) => {
     messagingSenderId: "774018965451",
     appId: "1:774018965451:web:19c826207d24e9d0b8204e",
   });
-  const auth = getAuth(app);
+  const auth = initializeAuth(app, { persistence: browserLocalPersistence });
   const db = getFirestore(app);
 
   useEffect(() => {

diff --git a/src/firebase/db_queries.ts b/src/firebase/db_queries.ts
@@ -121,6 +121,7 @@ export const loadPriorWorks = async (
 
 export const createGame = async (
   db: Firestore,
+  uid: string,
   waitTime: number,
   roundDuration: number,
   numRounds: number,
@@ -134,6 +135,7 @@ export const createGame = async (
     roundDuration,
     numRounds,
     question,
+    gameManager: uid,
   });
   return gameId;
 };

diff --git a/src/firebase/db_schema.ts b/src/firebase/db_schema.ts
@@ -5,6 +5,7 @@ export type GameMetaData = {
     numRounds: number;
     roundDuration: number;
     question: string;
+    gameManager: string;
 };
 
 export type GameUsers = {

diff --git a/src/game_logic/state_machine.ts b/src/game_logic/state_machine.ts
@@ -24,7 +24,8 @@ export type PossibleState =
   | "loading_work"
   | "in_progress"
   | "saving_work"
-  | "finished";
+  | "finished"
+  | "permission_denied";
 
 export const useGameStateMachine = (gameId: string, isPlayer: boolean) => {
   const { db, currentUser } = useFirebase();
@@ -35,10 +36,16 @@ export const useGameStateMachine = (gameId: string, isPlayer: boolean) => {
     { on?: Record<any, PossibleState>; effect?: Function }
   > = {
     loading_game: {
-      on: { GAME_FOUND: "loaded", game_not_found: "game_not_found" },
+      on: {
+        GAME_FOUND: "loaded",
+        game_not_found: "game_not_found",
+        permission_denied: "permission_denied",
+      },
       effect({ send, context, setContext }: EffectArgs) {
         getGameMetadata(context, (meta) => {
           if (meta === null) send("game_not_found");
+          else if (!isPlayer && meta.gameManager !== currentUser.uid)
+            send("permission_denied");
           else
             setContext((context) => ({ ...context, meta })).send("GAME_FOUND");
         });
@@ -52,6 +59,7 @@ export const useGameStateMachine = (gameId: string, isPlayer: boolean) => {
         });
       },
     },
+    permission_denied: {},
     game_not_found: {},
     loaded: {
       on: {

diff --git a/src/routes/CreateGame.tsx b/src/routes/CreateGame.tsx
@@ -10,7 +10,7 @@ import { createGame } from "../firebase/db_queries";
 import { Card } from "@mui/material";
 
 const CreateGame = () => {
-  const { db } = useFirebase();
+  const { db, currentUser } = useFirebase();
   const navigate = useNavigate();
   const [editor] = useLexicalComposerContext();
   const [submitting, setSubmitting] = useState(false);
@@ -27,6 +27,7 @@ const CreateGame = () => {
 
     const gameId = await createGame(
       db,
+      currentUser.uid,
       Number(formData.get("waitingTime")),
       Number(formData.get("roundDuration")),
       Number(formData.get("numRounds")),

diff --git a/src/routes/ManageGame.tsx b/src/routes/ManageGame.tsx
@@ -29,14 +29,15 @@ const ManageGameRouter = () => {
     case "not_enough_players":
       return <MessagePage msg="Not enough players :/" />;
     case "waiting":
-      return <ManageGamePage />;
     case "in_progress":
     case "saving_work":
     case "already_started":
     case "loading_work":
-      return <MessagePage msg="Game in progress!" />;
+      return <ManageGamePage />;
     case "finished":
       return <MessagePage msg="Game finished!" />;
+    case "permission_denied":
+      return <MessagePage msg="You can only manage games you've created!" error />;
     default:
       return (
         <MessagePage
@@ -55,20 +56,22 @@ const ManageGamePage = () => {
   return (
     <div className="flex flex-col">
       <GameToolbar />
-      <div className="flex flex-row h-full w-full p-8 items-stretch">
-        <div className="flex flex-col items-center basis-1/2">
-          <h1 className="text-4xl py-4">Join Game</h1>
-          <div className="rounded-xl bg-white text-center space-y-0 pb-8 px-4">
-            <QRCode />
-            <a
-              href={link}
-              className="underline text-4xl font-bold text-blue-900 py-8"
-              target="_blank"
-            >
-              {link.split("//")[1]}
-            </a>  
+      <div className="flex flex-row h-full w-full p-8 items-stretch justify-center">
+        {state.value === "waiting" && (
+          <div className="flex flex-col items-center basis-1/2">
+            <h1 className="text-4xl py-4">Join Game</h1>
+            <div className="rounded-xl bg-white text-center space-y-0 pb-8 px-4">
+              <QRCode />
+              <a
+                href={link}
+                className="underline text-4xl font-bold text-blue-900 py-8"
+                target="_blank"
+              >
+                {link.split("//")[1]}
+              </a>
+            </div>
           </div>
-        </div>
+        )}
         <div className="basis-1/2 flex flex-col">
           <UserList />
         </div>