diff --git a/packages/nextjs/app/api/ably/route.ts b/packages/nextjs/app/api/ably/route.ts
new file mode 100644
index 0000000..d25292b
--- /dev/null
+++ b/packages/nextjs/app/api/ably/route.ts
@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server";
+
+export const GET = async () => {
+  return new NextResponse(JSON.stringify(process.env.ABLY_API_KEY), { status: 200 });
+};
diff --git a/packages/nextjs/app/game/[id]/page.tsx b/packages/nextjs/app/game/[id]/page.tsx
index 9e695fd..cd29ae9 100644
--- a/packages/nextjs/app/game/[id]/page.tsx
+++ b/packages/nextjs/app/game/[id]/page.tsx
@@ -11,11 +11,10 @@ import { useAccount } from "wagmi";
 import doodleConfig from "~~/doodle.config";
 import useGameData from "~~/hooks/doodleExchange/useGameData";
 import { Game, Player as playerType } from "~~/types/game/game";
-import { joinGame, updateGameRound, updatePlayerRound } from "~~/utils/doodleExchange/api/apiUtils";
+import { fetchAblyApiKey, joinGame, updateGameRound, updatePlayerRound } from "~~/utils/doodleExchange/api/apiUtils";
 import { notification } from "~~/utils/scaffold-eth";
 
 const GamePage = () => {
-  const ablyApiKey = process.env.NEXT_PUBLIC_ABLY_API_KEY || doodleConfig.ably_api_key;
   const { id } = useParams();
   const { loadGameState, updateGameState, updatePlayerState } = useGameData();
   const { address: connectedAddress } = useAccount();
@@ -25,10 +24,19 @@ const GamePage = () => {
   const [game, setGame] = useState<Game>();
   const [player, setPlayer] = useState<playerType>();
   const [token, setToken] = useState("");
+  const [ablyApiKey, setAblyApiKey] = useState("");
 
   const [isUpdatingRound, setIsUpdatingRound] = useState(false);
   const [countdown, setCountdown] = useState(20);
 
+  useEffect(() => {
+    fetchAblyApiKey().then((key: string) => {
+      const ablyApiKey = key || doodleConfig.ably_api_key;
+      setAblyApiKey(ablyApiKey);
+      console.log("ablyApiKey", ablyApiKey);
+    });
+  }, []);
+
   useEffect(() => {
     const loadGame = async () => {
       const game = loadGameState();
diff --git a/packages/nextjs/middleware.ts b/packages/nextjs/middleware.ts
index c37abc2..f6453c6 100644
--- a/packages/nextjs/middleware.ts
+++ b/packages/nextjs/middleware.ts
@@ -9,7 +9,7 @@ export async function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
   // Routes that don't require authentication
-  const publicRoutes = ["/api/host/create", "/api/player/join"];
+  const publicRoutes = ["/api/host/create", "/api/player/join", "/api/ably"];
 
   if (publicRoutes.includes(pathname)) {
     return NextResponse.next();
diff --git a/packages/nextjs/utils/doodleExchange/api/apiUtils.ts b/packages/nextjs/utils/doodleExchange/api/apiUtils.ts
index 4a2b7b3..cb2e88a 100644
--- a/packages/nextjs/utils/doodleExchange/api/apiUtils.ts
+++ b/packages/nextjs/utils/doodleExchange/api/apiUtils.ts
@@ -1,6 +1,18 @@
 import { saveGameState } from "../game";
 import { notification } from "~~/utils/scaffold-eth";
 
+export const fetchAblyApiKey = async () => {
+  const response = await fetch("/api/ably", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const ablyApiKey = await response.json();
+  return ablyApiKey;
+};
+
 export const joinGame = async (invite: string, address: string) => {
   const response = await fetch("/api/player/join", {
     method: "PATCH",