refactor: replace 401 redirect loop with auth-required error page, drop cookie

- Remove global fetch interceptor that caused infinite redirect loop between
  / and project subpaths (SPA auto-navigates from / to last project, which
  then gets 401 again, looping)
- Add is401() detection in ErrorPage: shows "Authentication required" with a
  clear explanation instead of the generic "Something went wrong"
- Remove oc_auth_token cookie entirely: the SPA already carries credentials in
  Authorization headers via createSdkForServer; the cookie was redundant and
  added by us, not upstream
- Simplify uiRouterMiddleware to a trivial pass-through; the SPA always loads
  at any subpath without server-side auth blocking

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

Author: 2 people

packages/app/src/entry.tsx

@@ -153,20 +153,6 @@ if (import.meta.env.VITE_SENTRY_DSN) {
   })
 }
 
-// Intercept 401 responses: if credentials are stale and we're not on the home
-// page already, navigate to "/" so the user can re-authenticate.
-const _nativeFetch = globalThis.fetch.bind(globalThis)
-const _interceptedFetch = async (input: Parameters<typeof fetch>[0], init?: Parameters<typeof fetch>[1]): Promise<Response> => {
-  const response = await _nativeFetch(input, init)
-  if (response.status === 401 && window.location.pathname !== "/") {
-    window.location.href = "/"
-    return new Promise<Response>(() => {})
-  }
-  return response
-}
-Object.assign(_interceptedFetch, globalThis.fetch)
-globalThis.fetch = _interceptedFetch as unknown as typeof fetch
-
 if (root instanceof HTMLElement) {
   const auth = authFromToken(new URLSearchParams(location.search).get("auth_token"))
   clearAuthToken()

packages/app/src/i18n/en.ts

@@ -479,6 +479,9 @@ export const dict = {
 
   "error.page.title": "Something went wrong",
   "error.page.description": "An error occurred while loading the application.",
+  "error.page.auth.title": "Authentication required",
+  "error.page.auth.description": "This server requires a password. Open this page from the OpenCode desktop app, or use a URL that includes an auth token.",
+  "error.page.auth.action.home": "Go to home",
   "error.page.details.label": "Error Details",
   "error.page.action.restart": "Restart",
   "error.page.action.report": "Report Error",

packages/app/src/i18n/zh.ts

@@ -465,6 +465,9 @@ export const dict = {
 
   "error.page.title": "出了点问题",
   "error.page.description": "加载应用程序时发生错误。",
+  "error.page.auth.title": "需要身份验证",
+  "error.page.auth.description": "此服务器需要密码。请通过 OpenCode 桌面应用打开此页面，或使用包含 auth token 的链接。",
+  "error.page.auth.action.home": "返回首页",
   "error.page.details.label": "错误详情",
   "error.page.action.restart": "重启",
   "error.page.action.report": "上报错误",

packages/app/src/pages/error.tsx

@@ -214,6 +214,21 @@ function formatError(error: unknown, t: Translator): string {
   return formatErrorChain(error, t, 0)
 }
 
+function is401(error: unknown, depth = 0): boolean {
+  if (!error || depth > 5) return false
+  if (isInitError(error) && error.name === "APIError") {
+    return (error.data as { statusCode?: number }).statusCode === 401
+  }
+  if (error instanceof Error) {
+    if (error.message.includes("401 Unauthorized")) return true
+    return is401(error.cause, depth + 1)
+  }
+  if (typeof error === "object" && "status" in error) {
+    return (error as { status?: number }).status === 401
+  }
+  return false
+}
+
 interface ErrorPageProps {
   error: unknown
 }
@@ -254,6 +269,28 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
       })
   }
 
+  if (is401(props.error)) {
+    return (
+      <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
+        <div class="w-2/3 max-w-md flex flex-col items-center justify-center gap-8">
+          <Logo class="w-58.5 opacity-12 shrink-0" />
+          <div class="flex flex-col items-center gap-2 text-center">
+            <h1 class="text-lg font-medium text-text-strong">{language.t("error.page.auth.title")}</h1>
+            <p class="text-sm text-text-weak">{language.t("error.page.auth.description")}</p>
+          </div>
+          <Button size="large" onClick={() => { window.location.href = "/" }}>
+            {language.t("error.page.auth.action.home")}
+          </Button>
+          <Show when={platform.version}>
+            {(version) => (
+              <p class="text-xs text-text-weak">{language.t("error.page.version", { version: version() })}</p>
+            )}
+          </Show>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
       <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">

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

@@ -6,7 +6,6 @@ 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.
@@ -73,26 +72,11 @@ 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())
 }
 
-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.
+// non-public paths (API, static assets, /doc). PTY ticket URLs bypass auth.
 export const authorizationRouterMiddleware = HttpRouter.middleware()(
   Effect.gen(function* () {
     const config = yield* ServerAuth.Config
@@ -104,45 +88,24 @@ 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
-        const token = url.searchParams.get(AUTH_TOKEN_QUERY)
         const credential = yield* credentialFromURL(url, request)
         if (!ServerAuth.authorized(credential, config)) {
           return HttpServerResponse.empty({
             status: UNAUTHORIZED,
             headers: { "www-authenticate": WWW_AUTHENTICATE },
           })
         }
-        // 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
+        return yield* (effect as unknown as Effect.Effect<HttpServerResponse.HttpServerResponse, never, never>)
       })
   }),
 )
 
-// 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.
+// Router middleware for the SPA catch-all route (/*). Always serves the app
+// shell so the browser can load the SPA at any subpath. The SPA reads the
+// auth_token query param client-side and carries credentials in Authorization
+// headers — no server-side session cookie is needed.
 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
-      })
-  }),
+  Effect.succeed((effect) => effect),
 )
 
 export const authorizationLayer = Layer.effect(

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

@@ -110,9 +110,9 @@ const cors = (corsOptions?: CorsOptions) =>
 // - rootApiRoutes: typed /global/* and control routes; auth is declared by RootHttpApi.
 // - eventApiRoutes/rawInstanceRoutes: raw instance routes; auth and workspace routing happen as router middleware.
 // - 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.
+// - uiRoute: raw catch-all; served without auth so the SPA loads at any subpath.
 const authOnlyRouterLayer = authorizationRouterMiddleware.layer.pipe(Layer.provide(ServerAuth.Config.defaultLayer))
-const uiAuthLayer = uiRouterMiddleware.layer.pipe(Layer.provide(ServerAuth.Config.defaultLayer))
+const uiRouterLayer = uiRouterMiddleware.layer
 const httpApiAuthLayer = authorizationLayer.pipe(Layer.provide(ServerAuth.Config.defaultLayer))
 const rootApiRoutes = HttpApiBuilder.layer(RootHttpApi).pipe(
   Layer.provide([controlHandlers, globalHandlers]),
@@ -174,7 +174,7 @@ const uiRoute = HttpRouter.use((router) =>
     const client = yield* HttpClient.HttpClient
     yield* router.add("*", "/*", (request) => serveUIEffect(request, { fs, client }))
   }),
-).pipe(Layer.provide(uiAuthLayer))
+).pipe(Layer.provide(uiRouterLayer))
 
 export function createRoutes(corsOptions?: CorsOptions) {
   return Layer.mergeAll(rootApiRoutes, eventApiRoutes, instanceRoutes, docRoute, uiRoute).pipe(