fix: pass auth token to browser WebSocket connection

ThomasK33 · ThomasK33 · commit f268f486b792 · 2025-11-26T17:46:17.000+01:00
When the server is started with --auth-token, the browser client now
passes the token via query parameter (?token=...) when connecting to
the ORPC WebSocket endpoint. The token is read from VITE_AUTH_TOKEN
environment variable at build time.

Change-Id: Ic0e253cf128cae361af5032b0dbc0decb92dbd5f
Signed-off-by: Thomas Kosiewski &lt;tk@coder.com&gt;
diff --git a/index.html b/index.html
@@ -51,6 +51,8 @@
   </head>
   <body>
     <div id="root"></div>
+    <!-- Load server-provided config (auth token) for browser mode. Fails silently in Electron/dev. -->
+    <script src="/client-config.js" onerror="window.__MUX_AUTH_TOKEN__=null"></script>
     <script type="module" src="/src/browser/main.tsx"></script>
   </body>
 </html>
diff --git a/src/browser/orpc/react.tsx b/src/browser/orpc/react.tsx
@@ -57,7 +57,19 @@ export const ORPCProvider = (props: ORPCProviderProps) => {
       const API_BASE = import.meta.env.VITE_BACKEND_URL ?? window.location.origin;
       const WS_BASE = API_BASE.replace("http://", "ws://").replace("https://", "wss://");
 
-      const ws = new WebSocket(`${WS_BASE}/orpc/ws`);
+      // Auth token is injected by server via /client-config.js (loaded in index.html)
+      // or can be passed as URL parameter for direct links
+      const urlParams = new URLSearchParams(window.location.search);
+      const authToken =
+        urlParams.get("token") ??
+        (window as unknown as { __MUX_AUTH_TOKEN__?: string }).__MUX_AUTH_TOKEN__ ??
+        null;
+
+      const wsUrl = authToken
+        ? `${WS_BASE}/orpc/ws?token=${encodeURIComponent(authToken)}`
+        : `${WS_BASE}/orpc/ws`;
+
+      const ws = new WebSocket(wsUrl);
       const link = new WebSocketLink({
         websocket: ws,
       });
diff --git a/src/cli/orpcServer.ts b/src/cli/orpcServer.ts
@@ -93,6 +93,18 @@ export async function createOrpcServer({
     res.json({ ...VERSION, mode: "server" });
   });
 
+  // Client config endpoint - provides auth token for WebSocket connection
+  // This is served without auth since the browser needs it to establish the authenticated connection
+  // Security note: This endpoint should only be accessible to users who already have network access to the server
+  app.get("/client-config.js", (_req, res) => {
+    res.type("application/javascript");
+    if (authToken) {
+      res.send(`window.__MUX_AUTH_TOKEN__ = ${JSON.stringify(authToken)};`);
+    } else {
+      res.send(`window.__MUX_AUTH_TOKEN__ = null;`);
+    }
+  });
+
   const orpcRouter = router(authToken);
 
   // oRPC HTTP handler
