fix(auth): narrow mobile auth fallback (#2046)

Co-authored-by: bashrusakh <bashrusakh@users.noreply.github.com>

packages/ui/src/apps/renderMobileApp.tsx

@@ -76,9 +76,7 @@ export function renderMobileApp(apis: RuntimeAPIs) {
   // Auth gating differs by shell: the native Capacitor app authenticates via
   // its own instance-connect flow (MobileConnectionWelcome asks for the
   // password per instance), while the plain mobile BROWSER against a
-  // --ui-password server must get the classic SessionAuthGate unlock page —
+  // --ui-password server must keep the classic SessionAuthGate unlock page.
-  // dropping it (v1.13.9) left browsers on a dead "unable to reach server"
-  // screen with no way to enter the password.
   const app = <MobileApp apis={resolvedApis} />;
 
   createRoot(rootElement).render(

packages/ui/src/components/auth/SessionAuthGate.behavior.test.tsx

@@ -0,0 +1,315 @@
+import { describe, expect, mock, test } from 'bun:test';
+
+type ComponentFn<P extends Record<string, unknown> = Record<string, unknown>> = (props: P) => unknown;
+
+type HookRecord = {
+  values: unknown[];
+  deps: Array<unknown[] | undefined>;
+};
+
+type HookEffect = () => void | (() => void);
+type HookCallback = (...args: unknown[]) => unknown;
+type JSXProps = Record<string, unknown> & { children?: unknown };
+type JSXElementType<P extends Record<string, unknown> = Record<string, unknown>> = ComponentFn<P> | string | symbol;
+
+const hookRecords = new Map<unknown, HookRecord>();
+let currentRecord: HookRecord | null = null;
+let hookIndex = 0;
+let pendingEffects: Array<() => void> = [];
+
+const resetHarness = () => {
+  hookRecords.clear();
+  currentRecord = null;
+  hookIndex = 0;
+  pendingEffects = [];
+};
+
+const shallowEqualDeps = (left?: unknown[], right?: unknown[]): boolean => {
+  if (!left || !right) return false;
+  if (left.length !== right.length) return false;
+  return left.every((value, index) => Object.is(value, right[index]));
+};
+
+const getRecord = (component: unknown): HookRecord => {
+  const existing = hookRecords.get(component);
+  if (existing) return existing;
+  const record: HookRecord = { values: [], deps: [] };
+  hookRecords.set(component, record);
+  return record;
+};
+
+const getHookRecord = (): HookRecord => {
+  if (!currentRecord) {
+    throw new Error('Hooks can only run during a render pass');
+  }
+  return currentRecord;
+};
+
+const renderComponent = <P extends Record<string, unknown>>(component: ComponentFn<P>, props: P): unknown => {
+  const previousRecord = currentRecord;
+  const previousHookIndex = hookIndex;
+  currentRecord = getRecord(component);
+  hookIndex = 0;
+
+  try {
+    return component(props);
+  } finally {
+    currentRecord = previousRecord;
+    hookIndex = previousHookIndex;
+  }
+};
+
+function useCallback<T extends HookCallback>(callback: T, deps?: unknown[]): T {
+  const record = getHookRecord();
+  const index = hookIndex++;
+  const previousDeps = record.deps[index];
+  if (!shallowEqualDeps(previousDeps, deps)) {
+    record.values[index] = callback;
+    record.deps[index] = deps;
+  }
+  return record.values[index] as T;
+}
+
+function useEffect(effect: HookEffect, deps?: unknown[]): void {
+  const record = getHookRecord();
+  const index = hookIndex++;
+  const previousDeps = record.deps[index];
+  if (!shallowEqualDeps(previousDeps, deps)) {
+    record.deps[index] = deps;
+    pendingEffects.push(() => {
+      effect();
+    });
+  }
+}
+
+function useMemo<T>(factory: () => T, deps?: unknown[]): T {
+  const record = getHookRecord();
+  const index = hookIndex++;
+  const previousDeps = record.deps[index];
+  if (!shallowEqualDeps(previousDeps, deps)) {
+    record.values[index] = factory();
+    record.deps[index] = deps;
+  }
+  return record.values[index] as T;
+}
+
+function useRef<T>(initialValue: T): { current: T } {
+  const record = getHookRecord();
+  const index = hookIndex++;
+  if (record.values[index] === undefined) {
+    record.values[index] = { current: initialValue };
+  }
+  return record.values[index] as { current: T };
+}
+
+function useState<T>(initialValue: T | (() => T)): readonly [T, (next: T | ((prev: T) => T)) => void] {
+  const record = getHookRecord();
+  const index = hookIndex++;
+  if (record.values[index] === undefined) {
+    record.values[index] = typeof initialValue === 'function'
+      ? (initialValue as () => T)()
+      : initialValue;
+  }
+
+  const setState = (next: T | ((prev: T) => T)) => {
+    record.values[index] = typeof next === 'function'
+      ? (next as (prev: T) => T)(record.values[index] as T)
+      : next;
+  };
+
+  return [record.values[index] as T, setState] as const;
+}
+
+function jsx<P extends Record<string, unknown>>(type: JSXElementType<P>, props: JSXProps & P): unknown {
+  if (type === reactJsxRuntime.Fragment) {
+    return props.children ?? null;
+  }
+
+  if (typeof type === 'function') {
+    return renderComponent(type, props as P);
+  }
+
+  return { type, props };
+}
+
+const ReactMock = {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+};
+
+const reactJsxRuntime = {
+  Fragment: Symbol('Fragment'),
+  jsx,
+  jsxs: jsx,
+  jsxDEV: jsx,
+};
+
+let desktopShell = false;
+let runtimeFetchRejects = true;
+
+mock.module('react/jsx-runtime', () => reactJsxRuntime);
+mock.module('react/jsx-dev-runtime', () => reactJsxRuntime);
+
+mock.module('react', () => ({
+  __esModule: true,
+  default: ReactMock,
+  ...ReactMock,
+}));
+
+mock.module('@simplewebauthn/browser', () => ({
+  browserSupportsWebAuthn: mock(() => false),
+}));
+
+mock.module('@/components/ui/button', () => ({
+  Button: ({ children }: { children?: unknown }) => children ?? null,
+}));
+
+mock.module('@/components/ui/checkbox', () => ({
+  Checkbox: () => null,
+}));
+
+mock.module('@/components/ui/input', () => ({
+  Input: () => null,
+}));
+
+mock.module('@/components/ui', () => ({
+  toast: {
+    success: mock(() => undefined),
+    error: mock(() => undefined),
+    message: mock(() => undefined),
+  },
+}));
+
+mock.module('@/components/ui/OpenChamberLogo', () => ({
+  OpenChamberLogo: () => 'logo',
+}));
+
+mock.module('@/components/icon/Icon', () => ({
+  Icon: () => null,
+}));
+
+mock.module('@/components/desktop/DesktopHostSwitcher', () => ({
+  DesktopHostSwitcherInline: () => 'host-switcher',
+}));
+
+mock.module('@/lib/i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}));
+
+mock.module('@/lib/desktop', () => ({
+  invokeDesktop: mock(() => Promise.resolve(null)),
+  isDesktopShell: mock(() => desktopShell),
+  isVSCodeRuntime: mock(() => false),
+}));
+
+mock.module('@/lib/persistence', () => ({
+  initializeAppearancePreferences: mock(() => Promise.resolve()),
+  syncDesktopSettings: mock(() => Promise.resolve()),
+}));
+
+mock.module('@/lib/directoryPersistence', () => ({
+  applyPersistedDirectoryPreferences: mock(() => Promise.resolve()),
+}));
+
+mock.module('@/lib/runtime-fetch', () => ({
+  runtimeFetch: mock(async () => {
+    if (runtimeFetchRejects) {
+      throw new Error('offline');
+    }
+
+    return new Response(JSON.stringify({ authenticated: false }), {
+      status: 401,
+      headers: { 'content-type': 'application/json' },
+    });
+  }),
+}));
+
+mock.module('@/lib/runtime-auth', () => ({
+  getRuntimeExtraHeadersSync: mock(() => ({})),
+}));
+
+mock.module('@/lib/runtime-switch', () => ({
+  getRuntimeApiBaseUrl: mock(() => ''),
+  subscribeRuntimeEndpointChanged: mock(() => () => {}),
+  switchRuntimeEndpoint: mock(() => undefined),
+}));
+
+mock.module('@/lib/desktopHosts', () => ({
+  desktopHostsGet: mock(() => Promise.resolve(null)),
+  desktopHostsSet: mock(() => Promise.resolve()),
+  getDesktopHostApiUrl: mock(() => ''),
+  normalizeHostUrl: mock(() => ''),
+}));
+
+mock.module('@/lib/passkeys', () => ({
+  authenticateWithPasskey: mock(() => Promise.resolve(null)),
+  cancelPasskeyCeremony: mock(() => undefined),
+  defaultPasskeyStatus: { enabled: false, hasPasskeys: false, passkeyCount: 0, rpID: null },
+  fetchPasskeyStatus: mock(() => Promise.resolve({ enabled: false, hasPasskeys: false, passkeyCount: 0, rpID: null })),
+  isPasskeyCeremonyAbort: mock(() => false),
+  registerCurrentDevicePasskey: mock(() => Promise.resolve(null)),
+}));
+
+const { SessionAuthGate } = await import('./SessionAuthGate');
+
+const flushEffects = async () => {
+  while (pendingEffects.length > 0) {
+    const effects = pendingEffects;
+    pendingEffects = [];
+    for (const effect of effects) {
+      effect();
+    }
+    await Promise.resolve();
+  }
+  await Promise.resolve();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await Promise.resolve();
+};
+
+const renderGate = async () => {
+  const firstPass = renderComponent(SessionAuthGate, { children: 'child' });
+  await flushEffects();
+  const secondPass = renderComponent(SessionAuthGate, { children: 'child' });
+  await flushEffects();
+  return secondPass ?? firstPass;
+};
+
+const collectText = (node: unknown): string => {
+  if (node === null || node === undefined || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map((child) => collectText(child)).join(' ');
+  if (typeof node === 'object') {
+    const element = node as { props?: { children?: unknown } };
+    return collectText(element.props?.children);
+  }
+  return '';
+};
+
+describe('SessionAuthGate status-check failure behavior', () => {
+  test('keeps non-desktop status-check rejection on the error screen', async () => {
+    resetHarness();
+    desktopShell = false;
+    runtimeFetchRejects = true;
+
+    const tree = await renderGate();
+    const text = collectText(tree);
+
+    expect(text).toContain('sessionAuth.error.networkTitle');
+    expect(text).not.toContain('sessionAuth.locked.unlockTitle');
+  });
+
+  test('keeps desktop-shell status-check rejection on the locked password prompt', async () => {
+    resetHarness();
+    desktopShell = true;
+    runtimeFetchRejects = true;
+
+    const tree = await renderGate();
+    const text = collectText(tree);
+
+    expect(text).toContain('sessionAuth.locked.unlockTitle');
+    expect(text).not.toContain('sessionAuth.error.networkTitle');
+  });
+});

packages/ui/src/components/auth/SessionAuthGate.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveStatusCheckFailureState } from './sessionAuthGateState';
+
+describe('resolveStatusCheckFailureState', () => {
+  test('keeps the desktop-shell password login fallback intact', () => {
+    expect(resolveStatusCheckFailureState({ shouldUseDesktopShellPasswordLogin: true })).toBe('locked');
+  });
+
+  test('uses the network error screen for non-desktop status-check failures', () => {
+    expect(resolveStatusCheckFailureState({})).toBe('error');
+  });
+});

packages/ui/src/components/auth/SessionAuthGate.tsx

@@ -15,6 +15,7 @@ import { runtimeFetch } from '@/lib/runtime-fetch';
 import { getRuntimeExtraHeadersSync } from '@/lib/runtime-auth';
 import { getRuntimeApiBaseUrl, subscribeRuntimeEndpointChanged, switchRuntimeEndpoint } from '@/lib/runtime-switch';
 import { desktopHostsGet, desktopHostsSet, getDesktopHostApiUrl, normalizeHostUrl } from '@/lib/desktopHosts';
+import { resolveStatusCheckFailureState, type GateState } from './sessionAuthGateState';
 import {
   authenticateWithPasskey,
   cancelPasskeyCeremony,
@@ -292,8 +293,6 @@ interface SessionAuthGateProps {
   children: React.ReactNode;
 }
 
-type GateState = 'pending' | 'authenticated' | 'locked' | 'error' | 'rate-limited';
-
 interface ErrorScreenProps {
   onRetry: () => void;
   errorType?: 'network' | 'rate-limit';
@@ -301,7 +300,9 @@ interface ErrorScreenProps {
   children?: React.ReactNode;
 }
 
-export const SessionAuthGate: React.FC<SessionAuthGateProps> = ({ children }) => {
+export const SessionAuthGate: React.FC<SessionAuthGateProps> = ({
+  children,
+}) => {
   const { t } = useI18n();
   const vscodeRuntime = React.useMemo(() => isVSCodeRuntime(), []);
   const skipAuth = vscodeRuntime;
@@ -422,7 +423,7 @@ export const SessionAuthGate: React.FC<SessionAuthGateProps> = ({ children }) =>
       setIsTunnelLocked(false);
     } catch (error) {
       console.warn('Failed to check session status:', error);
-      if (shouldUseDesktopShellPasswordLogin()) {
+      if (resolveStatusCheckFailureState({ shouldUseDesktopShellPasswordLogin: shouldUseDesktopShellPasswordLogin() }) === 'locked') {
         setState('locked');
         setRetryAfter(undefined);
         setIsTunnelLocked(false);

packages/ui/src/components/auth/sessionAuthGateState.ts

@@ -0,0 +1,11 @@
+export type GateState = 'pending' | 'authenticated' | 'locked' | 'error' | 'rate-limited';
+
+export const resolveStatusCheckFailureState = (options: {
+  shouldUseDesktopShellPasswordLogin?: boolean;
+}): Exclude<GateState, 'pending' | 'authenticated' | 'rate-limited'> => {
+  if (options.shouldUseDesktopShellPasswordLogin) {
+    return 'locked';
+  }
+
+  return 'error';
+};