fix: serve SPA subpaths without auth block, set cookie via direct response

Replace appendPreResponseHandler (which does not fire reliably in the raw
router middleware context) with direct HttpServerResponse manipulation for
setting the oc_auth_token cookie when a valid auth_token URL param is present.

Add uiRouterMiddleware for the SPA catch-all route (/*): always serves the
app shell so the browser can load the SPA at any subpath without a 401 prompt.
API routes retain their own authorizationLayer. The SPA handles auth internally
and makes authenticated API calls using the stored credentials or cookie.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

packages/opencode/src/server/routes/instance/httpapi/middleware/authorization.ts

@@ -80,22 +80,19 @@ function credentialFromURL(url: URL, request: HttpServerRequest.HttpServerReques
   return Effect.succeed(emptyCredential())
 }
 
-function validateRawCredential<A, E, R>(
-  effect: Effect.Effect<A, E, R>,
-  credential: ServerAuth.DecodedCredentials,
-  config: ServerAuth.Info,
-) {
-  if (!ServerAuth.required(config)) return effect
-  if (!ServerAuth.authorized(credential, config))
-    return Effect.succeed(
-      HttpServerResponse.empty({
-        status: UNAUTHORIZED,
-        headers: { "www-authenticate": WWW_AUTHENTICATE },
-      }),
-    )
-  return effect
+function setCookieHeader(
+  response: HttpServerResponse.HttpServerResponse,
+  token: string,
+): HttpServerResponse.HttpServerResponse {
+  return HttpServerResponse.setHeader(
+    response,
+    "set-cookie",
+    `${AUTH_TOKEN_COOKIE}=${token}; Path=/; HttpOnly; SameSite=Strict`,
+  )
 }
 
+// Router middleware for all routes except the SPA catch-all. Requires auth for
+// non-public paths and sets a persistent cookie when auth_token is in the URL.
 export const authorizationRouterMiddleware = HttpRouter.middleware()(
   Effect.gen(function* () {
     const config = yield* ServerAuth.Config
@@ -109,20 +106,41 @@ export const authorizationRouterMiddleware = HttpRouter.middleware()(
         if (hasPtyConnectTicketURL(url)) return yield* effect
         const token = url.searchParams.get(AUTH_TOKEN_QUERY)
         const credential = yield* credentialFromURL(url, request)
-        // When auth_token comes via URL and is valid, set a persistent cookie so the
-        // browser can navigate to SPA subpaths without repeating the query param.
-        if (token && ServerAuth.authorized(credential, config)) {
-          yield* HttpEffect.appendPreResponseHandler((_req, response) =>
-            Effect.succeed(
-              HttpServerResponse.setHeader(
-                response,
-                "set-cookie",
-                `${AUTH_TOKEN_COOKIE}=${token}; Path=/; HttpOnly; SameSite=Strict`,
-              ),
-            ),
-          )
+        if (!ServerAuth.authorized(credential, config)) {
+          return HttpServerResponse.empty({
+            status: UNAUTHORIZED,
+            headers: { "www-authenticate": WWW_AUTHENTICATE },
+          })
         }
-        return yield* validateRawCredential(effect, credential, config)
+        // Auth passed — get the response and attach cookie if token came via URL.
+        // Direct header manipulation avoids appendPreResponseHandler which does not
+        // fire reliably in the raw router middleware context.
+        const response = yield* (effect as unknown as Effect.Effect<HttpServerResponse.HttpServerResponse, never, never>)
+        return token ? setCookieHeader(response, token) : response
+      })
+  }),
+)
+
+// Router middleware for the SPA catch-all route (/*). Always serves content so
+// the browser can load the app shell at any subpath without a credential prompt.
+// API routes have their own auth layer; the SPA handles auth internally once loaded.
+// Sets a persistent cookie when a valid auth_token query param is supplied so that
+// subsequent SPA navigation (without the query param) remains authenticated.
+export const uiRouterMiddleware = HttpRouter.middleware()(
+  Effect.gen(function* () {
+    const config = yield* ServerAuth.Config
+    if (!ServerAuth.required(config)) return (effect) => effect
+
+    return (effect) =>
+      Effect.gen(function* () {
+        const request = yield* HttpServerRequest.HttpServerRequest
+        const url = new URL(request.url, "http://localhost")
+        const token = url.searchParams.get(AUTH_TOKEN_QUERY)
+        // Always serve — the SPA handles auth internally via stored credentials.
+        const response = yield* (effect as unknown as Effect.Effect<HttpServerResponse.HttpServerResponse, never, never>)
+        if (!token) return response
+        const credential = yield* credentialFromURL(url, request)
+        return ServerAuth.authorized(credential, config) ? setCookieHeader(response, token) : response
       })
   }),
 )

packages/opencode/src/server/routes/instance/httpapi/server.ts

@@ -57,7 +57,7 @@ import { serveUIEffect } from "@/server/shared/ui"
 import { ServerAuth } from "@/server/auth"
 import { InstanceHttpApi, RootHttpApi } from "./api"
 import { PublicApi } from "./public"
-import { authorizationLayer, authorizationRouterMiddleware } from "./middleware/authorization"
+import { authorizationLayer, authorizationRouterMiddleware, uiRouterMiddleware } from "./middleware/authorization"
 import { EventApi, eventHandlers } from "./event"
 import { configHandlers } from "./handlers/config"
 import { controlHandlers } from "./handlers/control"
@@ -112,6 +112,7 @@ const cors = (corsOptions?: CorsOptions) =>
 // - instanceApiRoutes: schema routes; auth is declared on each group and workspace context is provided below.
 // - uiRoute: raw catch-all fallback; auth is router middleware so public static assets can bypass it.
 const authOnlyRouterLayer = authorizationRouterMiddleware.layer.pipe(Layer.provide(ServerAuth.Config.defaultLayer))
+const uiAuthLayer = uiRouterMiddleware.layer.pipe(Layer.provide(ServerAuth.Config.defaultLayer))
 const httpApiAuthLayer = authorizationLayer.pipe(Layer.provide(ServerAuth.Config.defaultLayer))
 const rootApiRoutes = HttpApiBuilder.layer(RootHttpApi).pipe(
   Layer.provide([controlHandlers, globalHandlers]),
@@ -173,7 +174,7 @@ const uiRoute = HttpRouter.use((router) =>
     const client = yield* HttpClient.HttpClient
     yield* router.add("*", "/*", (request) => serveUIEffect(request, { fs, client }))
   }),
-).pipe(Layer.provide(authOnlyRouterLayer))
+).pipe(Layer.provide(uiAuthLayer))
 
 export function createRoutes(corsOptions?: CorsOptions) {
   return Layer.mergeAll(rootApiRoutes, eventApiRoutes, instanceRoutes, docRoute, uiRoute).pipe(