fix(server): require authentication for frontend requests (#48217)

Author: thdxr

packages/server/src/process.ts

@@ -193,7 +193,6 @@ function dispatch(
     const app = yield* Ref.get(application)
     const ready = state.type === "ready" && Option.isSome(app)
     if (
-      (url.pathname === "/api" || url.pathname.startsWith("/api/") || url.pathname === "/openapi.json") &&
       (!ready || (!hasPtyConnectTicketURL(url) && !hasPersistentPtyConnectTicketURL(url))) &&
       !(yield* authorizedRequest(request, auth))
     )

packages/server/test/process.test.ts

@@ -4,7 +4,7 @@ import { HttpServer, HttpServerError, HttpServerResponse } from "effect/unstable
 import { it } from "../../core/test/lib/effect"
 import { ServerProcess } from "../src/process"
 
-it.live("allows browser preflight requests without credentials", () =>
+it.live("authenticates API and frontend requests while allowing browser preflight", () =>
   Effect.gen(function* () {
     const fallback = "fallback".repeat(256)
     const server = yield* ServerProcess.start<never, never>(
@@ -130,6 +130,36 @@ it.live("allows browser preflight requests without credentials", () =>
         expect(yield* Effect.promise(() => response.text())).toBe("")
       }),
     )
+
+    yield* Effect.forEach(["/", "/workspace/example", "/_assets/app.js", "/icons/icon.svg", "/sw.js"], (pathname) =>
+      Effect.gen(function* () {
+        yield* Effect.forEach(["GET", "HEAD"], (method) =>
+          Effect.gen(function* () {
+            yield* Effect.forEach([undefined, `Basic ${btoa("opencode:wrong")}`], (authorization) =>
+              Effect.gen(function* () {
+                const response = yield* Effect.promise(() =>
+                  fetch(new URL(pathname, HttpServer.formatAddress(server.address)), {
+                    method,
+                    headers: authorization ? { authorization } : undefined,
+                  }),
+                )
+                expect(response.status).toBe(401)
+                expect(response.headers.get("www-authenticate")).toBe('Basic realm="Secure Area"')
+                expect(yield* Effect.promise(() => response.text())).toBe("")
+              }),
+            )
+            const response = yield* Effect.promise(() =>
+              fetch(new URL(pathname, HttpServer.formatAddress(server.address)), {
+                method,
+                headers: { authorization: `Basic ${btoa("opencode:secret")}` },
+              }),
+            )
+            expect(response.status).toBe(200)
+            expect(yield* Effect.promise(() => response.text())).toBe(method === "HEAD" ? "" : fallback)
+          }),
+        )
+      }),
+    )
   }),
 )
 

packages/tui/src/component/dialog-pair.tsx

@@ -5,6 +5,7 @@ import { renderUnicodeCompact } from "uqr"
 import { useClient } from "../context/client"
 import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
+import { Link } from "../ui/link"
 import { errorMessage } from "../util/error"
 
 export type DialogPairCredentials = {
@@ -50,16 +51,34 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
   const content = () => {
     const value = info()
     if (!value) return
+    const href = (input: string) => {
+      const url = new URL(input)
+      url.username = encodeURIComponent(value.username)
+      url.password = encodeURIComponent(value.password)
+      return url.toString()
+    }
     return (
       <box flexDirection={horizontal() ? "row" : "column"} alignItems={horizontal() ? "flex-start" : "center"} gap={2}>
         <box width={horizontal() ? 29 : "100%"} flexShrink={0} gap={1}>
           <box>
             <text fg={theme.text.subdued}>This device</text>
-            <text fg={theme.text.default}>{localhost()}</text>
+            <Show when={localhost()}>
+              {(url) => (
+                <Link href={href(url())} fg={theme.text.default}>
+                  {url()}
+                </Link>
+              )}
+            </Show>
           </box>
           <box>
             <text fg={theme.text.subdued}>URLs</text>
-            <For each={value.urls}>{(url) => <text fg={theme.text.default}>{url}</text>}</For>
+            <For each={value.urls}>
+              {(url) => (
+                <Link href={href(url)} fg={theme.text.default}>
+                  {url}
+                </Link>
+              )}
+            </For>
           </box>
           <box>
             <text fg={theme.text.subdued}>Username</text>