feat: authenticate WebSocket connection by short-lived access token

2 files changed, 70 insertions, 28 deletions

diff --git a/frontend/app/routes/golf.$gameId.play.tsx b/frontend/app/routes/golf.$gameId.play.tsx
index bda563f..78ce585 100644
--- a/frontend/app/routes/golf.$gameId.play.tsx
+++ b/frontend/app/routes/golf.$gameId.play.tsx
@@ -8,26 +8,47 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   const { token } = await isAuthenticated(request, {
     failureRedirect: "/login",
   });
-  const { data, error } = await apiClient.GET("/games/{game_id}", {
-    params: {
-      path: {
-        game_id: Number(params.gameId),
+
+  const fetchGame = async () => {
+    const { data, error } = await apiClient.GET("/games/{game_id}", {
+      params: {
+        path: {
+          game_id: Number(params.gameId),
+        },
+        header: {
+          Authorization: `Bearer ${token}`,
+        },
       },
-      header: {
-        Authorization: `Bearer ${token}`,
+    });
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data;
+  };
+
+  const fetchSockToken = async () => {
+    const { data, error } = await apiClient.GET("/token", {
+      params: {
+        header: {
+          Authorization: `Bearer ${token}`,
+        },
       },
-    },
-  });
-  if (error) {
-    throw new Error(error.message);
-  }
+    });
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data.token;
+  };
+
+  const [game, sockToken] = await Promise.all([fetchGame(), fetchSockToken()]);
   return {
-    game: data,
+    game,
+    sockToken,
   };
 }
 
 export default function GolfPlay() {
-  const { game } = useLoaderData<typeof loader>();
+  const { game, sockToken } = useLoaderData<typeof loader>();
 
-  return <GolfPlayApp game={game} />;
+  return <GolfPlayApp game={game} sockToken={sockToken} />;
 }
diff --git a/frontend/app/routes/golf.$gameId.watch.tsx b/frontend/app/routes/golf.$gameId.watch.tsx
index e1cb5d7..28c17cc 100644
--- a/frontend/app/routes/golf.$gameId.watch.tsx
+++ b/frontend/app/routes/golf.$gameId.watch.tsx
@@ -8,26 +8,47 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   const { token } = await isAuthenticated(request, {
     failureRedirect: "/login",
   });
-  const { data, error } = await apiClient.GET("/games/{game_id}", {
-    params: {
-      path: {
-        game_id: Number(params.gameId),
+
+  const fetchGame = async () => {
+    const { data, error } = await apiClient.GET("/games/{game_id}", {
+      params: {
+        path: {
+          game_id: Number(params.gameId),
+        },
+        header: {
+          Authorization: `Bearer ${token}`,
+        },
       },
-      header: {
-        Authorization: `Bearer ${token}`,
+    });
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data;
+  };
+
+  const fetchSockToken = async () => {
+    const { data, error } = await apiClient.GET("/token", {
+      params: {
+        header: {
+          Authorization: `Bearer ${token}`,
+        },
       },
-    },
-  });
-  if (error) {
-    throw new Error(error.message);
-  }
+    });
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data.token;
+  };
+
+  const [game, sockToken] = await Promise.all([fetchGame(), fetchSockToken()]);
   return {
-    game: data,
+    game,
+    sockToken,
   };
 }
 
 export default function GolfWatch() {
-  const { game } = useLoaderData<typeof loader>();
+  const { game, sockToken } = useLoaderData<typeof loader>();
 
-  return <GolfWatchApp game={game} />;
+  return <GolfWatchApp game={game} sockToken={sockToken} />;
 }