fix: cookie auth for SPA subpaths + validate server credentials before save

- Use appendPreResponseHandler to set oc_auth_token cookie when auth_token
  query param is valid, so browser SPA subpath navigation works without 401
- Validate new inbound server credentials against running server health
  endpoint before saving, to prevent locking out on credential typo

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

Author: 2 people

packages/app/src/components/dialog-select-server.tsx

@@ -677,6 +677,31 @@ export function DialogSelectServer() {
       return
     }
 
+    // When credentials are changing, verify the new credentials actually work
+    // against the currently running server before persisting them. This prevents
+    // saving a typo that would lock the user out on the next request.
+    const credentialsChanged = !current || current.username !== next.username || current.password !== next.password
+    if (credentialsChanged && next.enabled && next.password) {
+      const runtimeConfig = platform.localServerRuntimeConfig?.()
+      const runningPort = runtimeConfig?.port ?? current?.port
+      if (runningPort) {
+        const testHttp: ServerConnection.HttpBase = {
+          url: `http://localhost:${runningPort}`,
+          username: next.username || undefined,
+          password: next.password,
+        }
+        const result = await checkServerHealth(testHttp)
+        if (!result.healthy) {
+          showToast({
+            variant: "error",
+            title: language.t("common.requestFailed"),
+            description: language.t("dialog.server.inbound.credentialInvalid"),
+          })
+          return
+        }
+      }
+    }
+
     setStore("inboundServer", "saving", true)
     try {
       await platform.setLocalServerConfig(next)

packages/app/src/i18n/en.ts

@@ -361,6 +361,7 @@ export const dict = {
   "dialog.server.inbound.portPlaceholder": "Port",
   "dialog.server.inbound.portRequired": "Enter a port",
   "dialog.server.inbound.portInvalid": "Enter a port between 1 and 65535",
+  "dialog.server.inbound.credentialInvalid": "The credentials do not match the running server. Check your username and password.",
   "server.row.noUsername": "no username",
 
   "dialog.project.edit.title": "Edit project",

packages/app/src/i18n/zh.ts

@@ -367,6 +367,7 @@ export const dict = {
   "dialog.server.inbound.portPlaceholder": "端口",
   "dialog.server.inbound.portRequired": "请输入端口",
   "dialog.server.inbound.portInvalid": "请输入 1 到 65535 之间的端口",
+  "dialog.server.inbound.credentialInvalid": "凭据与运行中的服务器不匹配，请检查用户名和密码。",
 
   "dialog.project.edit.title": "编辑项目",
   "dialog.project.edit.name": "名称",

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

@@ -6,6 +6,7 @@ import { hasPtyConnectTicketURL } from "@/server/shared/pty-ticket"
 import { isPublicUIPath } from "@/server/shared/public-ui"
 
 const AUTH_TOKEN_QUERY = "auth_token"
+const AUTH_TOKEN_COOKIE = "oc_auth_token"
 const UNAUTHORIZED = 401
 // Use Bearer scheme so browsers don't show a native auth dialog on 401.
 // The server still accepts Authorization: Basic credentials from the app.
@@ -72,6 +73,10 @@ function credentialFromURL(url: URL, request: HttpServerRequest.HttpServerReques
   if (token) return decodeCredential(token)
   const match = /^Basic\s+(.+)$/i.exec(request.headers.authorization ?? "")
   if (match) return decodeCredential(match[1])
+  // Fall back to cookie set on a previous authenticated request
+  const cookieHeader = request.headers.cookie ?? ""
+  const cookieMatch = new RegExp(`(?:^|;\\s*)${AUTH_TOKEN_COOKIE}=([^;]+)`).exec(cookieHeader)
+  if (cookieMatch) return decodeCredential(cookieMatch[1])
   return Effect.succeed(emptyCredential())
 }
 
@@ -102,9 +107,22 @@ export const authorizationRouterMiddleware = HttpRouter.middleware()(
         const url = new URL(request.url, "http://localhost")
         if (isPublicUIPath(request.method, url.pathname)) return yield* effect
         if (hasPtyConnectTicketURL(url)) return yield* effect
-        return yield* credentialFromURL(url, request).pipe(
-          Effect.flatMap((credential) => validateRawCredential(effect, credential, config)),
-        )
+        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`,
+              ),
+            ),
+          )
+        }
+        return yield* validateRawCredential(effect, credential, config)
       })
   }),
 )