Fix: Basic Auth Fall-back Management & Settings Drop-down Portal (WIP)

2026-06-14 18:00:04 -05:00 · 2026-06-14 04:02:10 -05:00
parent 3747497041
commit ab61e12153
18 changed files with 301 additions and 141 deletions
@@ -1,14 +1,15 @@
 <script lang="ts">
  import logoUrl                           from '$lib/assets/moku-icon-splash.svg'
  import { appState }                      from '$lib/state/app.svelte'
+  import { authVerifiedState }             from '$lib/state/auth.svelte'
  import { boot, submitLogin, bypassBoot } from '$lib/state/boot.svelte'

  function handleBypass() {
-    bypassBoot(appState.authMode, boot.loginUser)
+    bypassBoot(appState.authMode, boot.loginUser, boot.loginPass)
  }
 </script>

-{#if appState.status === 'auth'}
+{#if appState.authRequired && !authVerifiedState.value}
  <div class="overlay overlay--clear">
    <div class="card anim-scale-in">
      <img src={logoUrl} alt="Moku" class="logo" />
@@ -47,6 +47,7 @@
    ringFull?:       boolean
    failed?:         boolean
    notConfigured?:  boolean
+    authRequired?:   boolean
    showCards?:      boolean
    showFps?:        boolean
    showDevOverlay?: boolean
@@ -56,14 +57,15 @@
    onUnlock?:       () => void
    onRetry?:        () => void
    onBypass?:       () => void
+    onSkip?:         () => void
    onDismiss?:      () => void
  }

  let {
    mode = 'loading', ringFull = false, failed = false,
-    notConfigured = false, showCards = true, showFps = false, showDevOverlay = false,
+    notConfigured = false, authRequired = false, showCards = true, showFps = false, showDevOverlay = false,
    pinLen = 4, pinCorrect = '',
-    onReady, onUnlock, onRetry, onBypass, onDismiss,
+    onReady, onUnlock, onRetry, onBypass, onSkip, onDismiss,
  }: Props = $props()

  let fpsEl    = $state<HTMLSpanElement | undefined>(undefined)
@@ -91,11 +93,10 @@
  const PHASE2_MS     = 10000

  function triggerExit(cb?: () => void) {
-    console.log('[splash] triggerExit called — exitLock:', exitLock, 'mode:', mode, 'cb:', cb?.name ?? String(cb))
-    if (exitLock) { console.log('[splash] triggerExit blocked by exitLock'); return }
+    if (exitLock) return
    exitLock = true
    exiting  = true
-    setTimeout(() => { console.log('[splash] triggerExit timeout — calling cb'); cb?.() }, EXIT_MS)
+    setTimeout(() => cb?.(), EXIT_MS)
  }

  let animFrame = 0
@@ -126,13 +127,13 @@
  })

  $effect(() => {
-    console.log('[splash] ringFull effect — ringFull:', ringFull, 'mode:', mode, 'exitLock:', exitLock)
    if (!ringFull || mode === 'locked') { exitLock = false; exiting = false; return }
    cancelAnimationFrame(animFrame)
    animFrame = 0
    ringProg  = 1
-    const t = setTimeout(() => { console.log('[splash] ringFull timeout firing — calling triggerExit(onReady)'); triggerExit(onReady) }, 650)
-    return () => { console.log('[splash] ringFull effect cleanup — cancelling timeout'); clearTimeout(t) }
+    if (authRequired) return
+    const t = setTimeout(() => triggerExit(onReady), 650)
+    return () => clearTimeout(t)
  })

  function submitPin() {
@@ -532,6 +533,13 @@
            <button class="err-btn err-btn--primary" onclick={() => onBypass?.()}>Enter app</button>
          </div>
        </div>
+      {:else if authRequired && ringFull}
+        <div class="error-box anim-fade-up">
+          <p class="error-label">Waiting for login</p>
+          <div class="error-actions">
+            <button class="err-btn" onclick={() => { onSkip?.() }}>Skip</button>
+          </div>
+        </div>
      {:else}
        <p class="status-text">{ringFull ? '' : `Initializing server${dots}`}</p>
      {/if}
@@ -19,7 +19,7 @@
  const entries = $derived(
    historyState.sessions
      .filter((s, i, arr) => arr.findIndex(x => x.mangaId === s.mangaId) === i)
-      .slice(0, 6)
+      .slice(0, 5)
  )
 </script>

@@ -221,8 +221,11 @@
    try {
      if (updaterRunning) {
        await getAdapter().stopLibraryUpdate()
+        updaterRunning = false
+        stopStatusPolling()
      } else {
        await getAdapter().startLibraryUpdate()
+        updaterRunning = true
        scheduleStatusPoll()
      }
    } catch (e: any) {
@@ -239,11 +242,13 @@
    {historyConfirmClear}
    hasHistory={historyState.sessions.length > 0}
    {updatesLoading}
+    {updaterRunning}
    onTabChange={(t) => tab = t}
    onHistorySearchChange={(v) => historySearch = v}
    onUpdatesSearchChange={(v) => updatesSearch = v}
    onHistoryClear={handleHistoryClear}
    onRefreshUpdates={() => loadUpdates(true)}
+    onToggleUpdate={toggleLibraryUpdate}
  />

  <div class="content">
@@ -1,7 +1,7 @@
 <script lang="ts">
  import {
    ArrowsClockwise, BookOpen, CircleNotch,
-    MagnifyingGlass, NewspaperClipping, Trash,
+    MagnifyingGlass, NewspaperClipping, Trash, X,
  } from 'phosphor-svelte'

  interface Props {
@@ -11,18 +11,20 @@
    historyConfirmClear:   boolean
    hasHistory:            boolean
    updatesLoading:        boolean
+    updaterRunning:        boolean
    onTabChange:           (tab: 'updates' | 'history') => void
    onHistorySearchChange: (v: string) => void
    onUpdatesSearchChange: (v: string) => void
    onHistoryClear:        () => void
    onRefreshUpdates:      () => void
+    onToggleUpdate:        () => void
  }

  let {
    tab, historySearch, updatesSearch, historyConfirmClear, hasHistory,
-    updatesLoading,
+    updatesLoading, updaterRunning,
    onTabChange, onHistorySearchChange, onUpdatesSearchChange,
-    onHistoryClear, onRefreshUpdates,
+    onHistoryClear, onRefreshUpdates, onToggleUpdate,
  }: Props = $props()
 </script>

@@ -57,12 +59,15 @@

      <button
        class="icon-btn"
-        onclick={onRefreshUpdates}
-        disabled={updatesLoading}
-        title="Reload update list"
+        class:running={updaterRunning}
+        onclick={updaterRunning ? onToggleUpdate : onRefreshUpdates}
+        disabled={updatesLoading && !updaterRunning}
+        title={updaterRunning ? 'Stop library update' : 'Run library update'}
      >
-        {#if updatesLoading}
+        {#if updatesLoading && !updaterRunning}
          <CircleNotch size={14} weight="light" class="anim-spin" />
+        {:else if updaterRunning}
+          <X size={14} weight="bold" />
        {:else}
          <ArrowsClockwise size={14} weight="bold" />
        {/if}
@@ -4,6 +4,7 @@
  import { settingsState, updateSettings } from '$lib/state/settings.svelte'
  import { eventToKeybind } from '$lib/core/keybinds/keybindEngine'
  import type { Keybinds } from '$lib/core/keybinds/defaultBinds'
+  import { anchorToModal } from '$lib/core/ui/selectPortal'

  import GeneralSettings     from './sections/GeneralSettings.svelte'
  import AppearanceSettings  from './sections/AppearanceSettings.svelte'
@@ -49,6 +50,7 @@
  let tabSlideDir        = $state<'up'|'down'>('down')
  let tabIconKey         = $state(0)
  let contentBodyEl: HTMLDivElement
+  let modalEl: HTMLDivElement
  let bugReporterOpen    = $state(false)

  $effect(() => { tab; tick().then(() => contentBodyEl?.scrollTo({ top: 0 })) })
@@ -89,6 +91,7 @@
  let selectOpen: string | null    = $state(null)
  let closingSelect: string | null = $state(null)
  const CLOSE_ANIM_MS = 120
+  const selectTriggers = new Map<string, HTMLElement>()

  function closeSelect() {
    if (!selectOpen) return
@@ -102,6 +105,14 @@
    else { closingSelect = null; selectOpen = id }
  }

+  function registerTrigger(id: string, el: HTMLElement) {
+    selectTriggers.set(id, el)
+  }
+
+  function getTrigger(id: string): HTMLElement | undefined {
+    return selectTriggers.get(id)
+  }
+
  $effect(() => {
    const handler = (e: MouseEvent) => {
      if (!selectOpen) return
@@ -118,7 +129,7 @@
 <div class="s-backdrop" role="presentation" tabindex="-1"
  onclick={(e) => { if (e.target === e.currentTarget) close() }}
  onkeydown={(e) => { if (e.key === 'Escape') { e.stopPropagation(); close() } }}>
-  <div class="s-modal" role="dialog" aria-label="Settings">
+  <div class="s-modal" role="dialog" aria-label="Settings" bind:this={modalEl}>

    <div class="s-sidebar">
      <p class="s-sidebar-title">Settings</p>
@@ -164,13 +175,13 @@

      <div class="s-content-body" bind:this={contentBodyEl}>
        {#if tab === 'general'}
-          <GeneralSettings {selectOpen} {closingSelect} {toggleSelect} {anims} />
+          <GeneralSettings {selectOpen} {closingSelect} {toggleSelect} {registerTrigger} {getTrigger} {anchorToModal} {modalEl} {anims} />
        {:else if tab === 'appearance'}
-          <AppearanceSettings {selectOpen} {closingSelect} {toggleSelect} {anims} {onOpenThemeEditor} />
+          <AppearanceSettings {selectOpen} {closingSelect} {toggleSelect} {registerTrigger} {getTrigger} {anchorToModal} {modalEl} {anims} {onOpenThemeEditor} />
        {:else if tab === 'reader'}
-          <ReaderSettings {selectOpen} {closingSelect} {toggleSelect} {anims} />
+          <ReaderSettings {selectOpen} {closingSelect} {toggleSelect} {registerTrigger} {getTrigger} {anchorToModal} {modalEl} {anims} />
        {:else if tab === 'library'}
-          <LibrarySettings {selectOpen} {closingSelect} {toggleSelect} {anims} />
+          <LibrarySettings {selectOpen} {closingSelect} {toggleSelect} {registerTrigger} {getTrigger} {anchorToModal} {modalEl} {anims} />
        {:else if tab === 'automation'}
          <AutomationSettings />
        {:else if tab === 'performance'}
@@ -178,13 +189,13 @@
        {:else if tab === 'keybinds'}
          <KeybindsSettings bind:listeningKey />
        {:else if tab === 'storage'}
-          <StorageSettings {selectOpen} {closingSelect} {toggleSelect} />
+          <StorageSettings {selectOpen} {closingSelect} {toggleSelect} {registerTrigger} {getTrigger} {anchorToModal} {modalEl} />
        {:else if tab === 'folders'}
          <FoldersSettings />
        {:else if tab === 'tracking'}
          <TrackingSettings />
        {:else if tab === 'security'}
-          <SecuritySettings {selectOpen} {toggleSelect} />
+          <SecuritySettings {selectOpen} {toggleSelect} {registerTrigger} {getTrigger} {anchorToModal} {modalEl} />
        {:else if tab === 'content'}
          <ContentSettings />
        {:else if tab === 'about'}
@@ -4,15 +4,22 @@

  const isTauri = platformService.platform === 'tauri'

+  import { selectPortal as _defaultPortal } from '$lib/core/ui/selectPortal'
+  import type { Action } from 'svelte/action'
+
  interface Props {
    selectOpen:      string | null
    closingSelect:   string | null
    toggleSelect:    (id: string) => void
+    registerTrigger: (id: string, el: HTMLElement) => void
+    getTrigger:      (id: string) => HTMLElement | undefined
+    selectPortal:    Action<HTMLElement, HTMLElement | undefined>
    anims:           boolean
  }
-  let { selectOpen, closingSelect, toggleSelect, anims }: Props = $props()
+  let { selectOpen, closingSelect, toggleSelect, registerTrigger, getTrigger, selectPortal, anims }: Props = $props()

  let triggerIdleTimeout = $state<HTMLButtonElement>(null!)
+  $effect(() => { if (triggerIdleTimeout) registerTrigger('idle-timeout', triggerIdleTimeout) })
  let serverAdvancedOpen = $state(false)

  async function pickServerBinary() {
@@ -138,7 +145,7 @@
            <svg class="s-select-caret" class:open={selectOpen === 'idle-timeout'} width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6" fill="currentColor"/></svg>
          </button>
          {#if selectOpen === 'idle-timeout' || closingSelect === 'idle-timeout'}
-            <div class="s-select-menu" class:anims class:closing={closingSelect === 'idle-timeout'}>
+            <div use:selectPortal={getTrigger('idle-timeout')} class="s-select-menu" class:anims class:closing={closingSelect === 'idle-timeout'}>
              {#each [['0','Never'],['1','1 minute'],['2','2 minutes'],['5','5 minutes'],['10','10 minutes'],['15','15 minutes'],['30','30 minutes']] as [v, l]}
                <button class="s-select-option" class:active={String(settingsState.settings.idleTimeoutMin ?? 5) === v} onclick={() => { updateSettings({ idleTimeoutMin: Number(v) }); toggleSelect('idle-timeout') }}>{l}</button>
              {/each}
@@ -1,6 +1,9 @@
 <script lang="ts">
  import { settingsState } from "$lib/state/settings.svelte";
  import { getBlobUrl }    from "$lib/core/cache/imageCache";
+  import { appState } from "$lib/state/app.svelte";
+
+

  let {
    src,
@@ -17,8 +20,8 @@
    id?:       string | number;
    alt?:      string;
    class?:    string;
-    loading?:  string;
-    decoding?: string;
+    loading?:  "lazy" | "eager";
+    decoding?: "async" | "auto" | "sync";
    priority?: number;
    onerror?:  ((e: Event) => void) | undefined;
    [key: string]: any;
@@ -39,7 +42,7 @@
    return withBust(base);
  }

-  const isAuth = $derived((settingsState.settings.serverAuthMode ?? "NONE") !== "NONE");
+  const isAuth = $derived(appState.authMode !== "NONE");

  let blobUrl = $state("");
  let reqId   = 0;
@@ -59,7 +62,7 @@
  });

  const plainUrl = $derived(plainThumbUrl(src));
-  const resolved = $derived(isAuth ? (blobUrl || plainUrl) || undefined : plainUrl || undefined);
+  const resolved = $derived(isAuth ? (blobUrl || undefined) : (plainUrl || undefined));
 </script>

 <img src={resolved} {alt} class={cls} {loading} {decoding} {onerror} {...rest} />
@@ -1,3 +1,7 @@
+import { appState }         from '$lib/state/app.svelte'
+import { authVerifiedState } from '$lib/state/auth.svelte'
+import { LOGIN_MUTATION, REFRESH_MUTATION } from '$lib/server-adapters/suwayomi/meta'
+
 const DEFAULT_URL = 'http://127.0.0.1:4567'
 const SKEW_MS     = 60_000 * 2

@@ -24,6 +28,7 @@ let accessToken:     string | null = null
 let refreshToken:    string | null = null
 let accessExpiresAt: number | null = null
 let refreshInFlight                = false
+let authSnoozed                    = false

 function parseExpiry(token: string): number | null {
  try {
@@ -56,6 +61,22 @@ export function getUiAuthDebugStatus(): UiAuthDebugStatus {
  }
 }

+export function reportUnauthorized(): void {
+  if (config.mode === 'NONE') return
+  if (authSnoozed) return
+  appState.authRequired   = true
+  authVerifiedState.value = false
+}
+
+export function reportAuthOk(): void {
+  appState.authRequired = false
+}
+
+export function snoozeAuthPrompt(): void {
+  authSnoozed = true
+  appState.authRequired = false
+}
+
 export function configureAuth(
  baseUrl: string,
  mode:    'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
@@ -66,6 +87,8 @@ export function configureAuth(
  accessToken            = null
  refreshToken           = null
  accessExpiresAt        = null
+  authSnoozed            = false
+  appState.authRequired  = false
 }

 export function authHeaders(): Record<string, string> {
@@ -86,9 +109,16 @@ async function gql<T>(query: string, variables?: Record<string, unknown>, bare =
    headers,
    body:    JSON.stringify({ query, variables }),
  })
+  if (res.status === 401 || res.status === 403) {
+    reportUnauthorized()
+    throw new Error(`HTTP ${res.status}`)
+  }
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  const json = await res.json()
-  if (json.errors?.length) throw new Error(json.errors[0].message)
+  if (json.errors?.length) {
+    if (/unauthorized|unauthenticated/i.test(json.errors[0].message)) reportUnauthorized()
+    throw new Error(json.errors[0].message)
+  }
  return json.data as T
 }

@@ -109,34 +139,33 @@ export async function probeServer(): Promise<'ok' | 'auth_required' | 'unreachab
  } catch { return 'unreachable' }
 }

-const LOGIN_MUTATION = `
-  mutation Login($username: String!, $password: String!) {
-    login(input: { username: $username, password: $password }) {
-      accessToken refreshToken
-    }
-  }
-`
+export function loginBasic(user: string, pass: string): void {
+  config.user = user
+  config.pass = pass
+  config.mode = 'BASIC_AUTH'
+  authSnoozed = false
+  reportAuthOk()
+}

-const REFRESH_MUTATION = `
-  mutation RefreshToken($refreshToken: String!) {
-    refreshToken(input: { refreshToken: $refreshToken }) {
-      accessToken
-    }
-  }
-`
-
-export async function loginBasic(user: string, pass: string): Promise<void> {
+/**
+ * Verify basic-auth credentials by making a real GQL request with them.
+ * Throws if the server returns 401/403 or an auth error.
+ */
+export async function verifyBasicAuth(user: string, pass: string): Promise<void> {
  const prev = { user: config.user, pass: config.pass, mode: config.mode }
  config.user = user
  config.pass = pass
  config.mode = 'BASIC_AUTH'
-  const probe = await probeServer()
-  if (probe !== 'ok') {
+  try {
+    await gql<unknown>('{ settings { authMode } }')
+  } catch {
    config.user = prev.user
    config.pass = prev.pass
    config.mode = prev.mode as typeof config.mode
    throw new Error('Invalid credentials')
  }
+  authSnoozed = false
+  reportAuthOk()
 }

 export async function loginUI(user: string, pass: string): Promise<void> {
@@ -148,6 +177,8 @@ export async function loginUI(user: string, pass: string): Promise<void> {
  accessExpiresAt = parseExpiry(accessToken)
  config.mode     = 'UI_LOGIN'
  config.user     = user
+  authSnoozed     = false
+  reportAuthOk()
 }

 export async function refreshUiAccessToken(force = false): Promise<string | null> {
@@ -163,8 +194,10 @@ export async function refreshUiAccessToken(force = false): Promise<string | null
    )
    accessToken     = data.refreshToken.accessToken
    accessExpiresAt = parseExpiry(accessToken)
+    reportAuthOk()
    return accessToken
  } catch {
+    reportUnauthorized()
    return null
  } finally {
    refreshInFlight = false
@@ -1,6 +1,5 @@
 import { platformService } from "$lib/platform-service";
-import { settingsState }      from "$lib/state/settings.svelte";
-import { getUIAccessToken }   from "$lib/core/auth";
+import { authHeaders }    from "$lib/core/auth";

 const cache    = new Map<string, string>();
 const inflight = new Map<string, Promise<string>>();
@@ -18,22 +17,8 @@ interface QueueEntry {

 const queue: QueueEntry[] = [];

-async function getAuthHeaders(): Promise<Record<string, string>> {
-  const mode = settingsState.settings.serverAuthMode ?? "NONE";
-  if (mode === "UI_LOGIN") {
-    const token = getUIAccessToken();
-    return token ? { Authorization: `Bearer ${token}` } : {};
-  }
-  if (mode === "BASIC_AUTH") {
-    const user = settingsState.settings.serverAuthUser?.trim() ?? "";
-    const pass = settingsState.settings.serverAuthPass?.trim() ?? "";
-    return user && pass ? { Authorization: `Basic ${btoa(`${user}:${pass}`)}` } : {};
-  }
-  return {};
-}
-
 async function doFetch(url: string, gen: number): Promise<string> {
-  const headers = await getAuthHeaders();
+  const headers = authHeaders();
  if (gen !== generation) throw new DOMException("Cancelled", "AbortError");
  const blob    = await platformService.fetchImage(url, headers);
  if (gen !== generation) throw new DOMException("Cancelled", "AbortError");
@@ -1,4 +1,5 @@
 import { getBlobUrl, preloadBlobUrls, revokeBlobUrl } from "$lib/core/cache/imageCache";
+import { authHeaders }                                from "$lib/core/auth";
 import { settingsState }                              from "$lib/state/settings.svelte";

 const pageCache        = new Map<number, string[]>();
@@ -12,13 +13,7 @@ function getServerUrl(): string {

 async function fetchChapterPagesFromServer(chapterId: number): Promise<string[]> {
  const base    = getServerUrl();
-  const headers: Record<string, string> = { "Content-Type": "application/json" };
-  const mode    = settingsState.settings.serverAuthMode ?? "NONE";
-  if (mode === "BASIC_AUTH") {
-    const u = settingsState.settings.serverAuthUser?.trim() ?? "";
-    const p = settingsState.settings.serverAuthPass?.trim() ?? "";
-    if (u && p) headers["Authorization"] = `Basic ${btoa(`${u}:${p}`)}`;
-  }
+  const headers = { "Content-Type": "application/json", ...authHeaders() };
  const query = `mutation FetchChapterPages($chapterId: Int!) { fetchChapterPages(input: { chapterId: $chapterId }) { pages } }`;
  const res   = await fetch(`${base}/api/graphql`, {
    method: "POST",
@@ -0,0 +1,67 @@
+/**
+ * position:fixed dropdown anchored to a trigger element.
+ *
+ * getBoundingClientRect() returns full viewport coords.
+ * position:fixed is also relative to the viewport.
+ * So we just divide by zoom — no sidebar/titlebar subtraction needed
+ * (those subtractions are only needed in ContextMenu because its x/y come
+ * from a MouseEvent which is relative to the zoomed content area, not the viewport).
+ */
+export function selectPortal(
+  node: HTMLElement,
+  trigger: HTMLElement | undefined,
+): { update(t: HTMLElement | undefined): void; destroy(): void } {
+  let currentTrigger = trigger
+
+  node.style.visibility = 'hidden'
+
+  function getZoom(): number {
+    const raw = parseFloat(document.documentElement.style.zoom || '1') || 1
+    return raw > 10 ? raw / 100 : raw
+  }
+
+  function position() {
+    if (!currentTrigger) return
+
+    const zoom  = getZoom()
+    const r     = currentTrigger.getBoundingClientRect()
+
+    // Convert viewport px → CSS px by dividing by zoom
+    const left   = r.left   / zoom
+    const top    = r.top    / zoom
+    const bottom = r.bottom / zoom
+    const width  = r.width  / zoom
+
+    const vw = window.innerWidth  / zoom
+    const vh = window.innerHeight / zoom
+
+    const menuH = node.offsetHeight
+    const menuW = node.offsetWidth
+
+    const above = menuH > 0 && (vh - bottom) < menuH + 8 && top > menuH + 8
+
+    const cssLeft = Math.min(left, vw - menuW - 4)
+    const cssTop  = above ? top - menuH - 4 : bottom + 4
+
+    node.style.left       = `${Math.max(4, cssLeft)}px`
+    node.style.top        = `${cssTop}px`
+    node.style.minWidth   = `${width}px`
+    node.style.visibility = 'visible'
+  }
+
+  requestAnimationFrame(() => position())
+  window.addEventListener('scroll', position, { capture: true, passive: true })
+  window.addEventListener('resize', position, { passive: true })
+
+  return {
+    update(t) {
+      currentTrigger = t
+      node.style.visibility = 'hidden'
+      requestAnimationFrame(() => position())
+    },
+    destroy() {
+      window.removeEventListener('scroll', position, true)
+      window.removeEventListener('resize', position)
+    },
+  }
+}
@@ -116,7 +116,7 @@ import {
  RESTORE_BACKUP,
  VALIDATE_BACKUP,
 } from './meta'
-import { authHeaders } from '$lib/core/auth'
+import { authHeaders, reportUnauthorized } from '$lib/core/auth'
 import {
  type GQLResponse,
  mapManga,
@@ -181,12 +181,40 @@ export class SuwayomiAdapter implements ServerAdapter {
      body:    JSON.stringify({ query, variables }),
      signal,
    })
+    if (res.status === 401 || res.status === 403) {
+      reportUnauthorized()
+      throw new Error(`Suwayomi HTTP ${res.status}`)
+    }
    if (!res.ok) throw new Error(`Suwayomi HTTP ${res.status}`)
    const json: GQLResponse<T> = await res.json()
-    if (json.errors?.length) throw new Error(json.errors[0].message)
+    if (json.errors?.length) {
+      if (/unauthorized|unauthenticated/i.test(json.errors[0].message)) reportUnauthorized()
+      throw new Error(json.errors[0].message)
+    }
    return json.data
  }

+  private multipartGql<T>(query: string, file: File): Promise<T> {
+    const form = new FormData()
+    form.append('operations', JSON.stringify({ query, variables: { backup: null } }))
+    form.append('map', JSON.stringify({ '0': ['variables.backup'] }))
+    form.append('0', file, file.name)
+    const headers: Record<string, string> = { Accept: 'application/json', ...authHeaders() }
+    return fetch(`${this.baseUrl}/api/graphql`, { method: 'POST', headers, body: form })
+      .then(r => {
+        if (r.status === 401 || r.status === 403) { reportUnauthorized(); throw new Error(`Suwayomi HTTP ${r.status}`) }
+        if (!r.ok) throw new Error(`Suwayomi HTTP ${r.status}`)
+        return r.json()
+      })
+      .then((json: GQLResponse<T>) => {
+        if (json.errors?.length) {
+          if (/unauthorized|unauthenticated/i.test(json.errors[0].message)) reportUnauthorized()
+          throw new Error(json.errors[0].message)
+        }
+        return json.data
+      })
+  }
+
  async getAboutServer(): Promise<AboutServer> {
    const data = await this.gql<{ aboutServer: AboutServer }>(GET_ABOUT_SERVER)
    return data.aboutServer
@@ -502,7 +530,6 @@ export class SuwayomiAdapter implements ServerAdapter {
    ids:   number[],
    patch: { includeInUpdate?: 'INCLUDE' | 'EXCLUDE'; includeInDownload?: 'INCLUDE' | 'EXCLUDE' },
  ): Promise<void> {
-    // Suwayomi has no bulk-category-patch mutation; fan out individually.
    await Promise.all(ids.map(id => this.gql(UPDATE_CATEGORY, { id, ...patch })))
  }

@@ -646,17 +673,6 @@ export class SuwayomiAdapter implements ServerAdapter {
    return data.createBackup
  }

-  private multipartGql<T>(query: string, file: File): Promise<T> {
-    const form = new FormData()
-    form.append('operations', JSON.stringify({ query, variables: { backup: null } }))
-    form.append('map', JSON.stringify({ '0': ['variables.backup'] }))
-    form.append('0', file, file.name)
-    const headers: Record<string, string> = { Accept: 'application/json', ...authHeaders() }
-    return fetch(`${this.baseUrl}/api/graphql`, { method: 'POST', headers, body: form })
-      .then(r => { if (!r.ok) throw new Error(`Suwayomi HTTP ${r.status}`); return r.json() })
-      .then((json: GQLResponse<T>) => { if (json.errors?.length) throw new Error(json.errors[0].message); return json.data })
-  }
-
  async restoreBackup(file: File): Promise<{ id: string; status: RestoreStatus }> {
    const data = await this.multipartGql<{ restoreBackup: { id: string; status: RestoreStatus } }>(RESTORE_BACKUP, file)
    return data.restoreBackup
@@ -103,3 +103,19 @@ export const SET_FLARE_SOLVERR = `
    }
  }
 `
+
+export const LOGIN_MUTATION = `
+  mutation Login($username: String!, $password: String!) {
+    login(input: { username: $username, password: $password }) {
+      accessToken refreshToken
+    }
+  }
+`
+
+export const REFRESH_MUTATION = `
+  mutation RefreshToken($refreshToken: String!) {
+    refreshToken(input: { refreshToken: $refreshToken }) {
+      accessToken
+    }
+  }
+`
@@ -1,6 +1,6 @@
 import type { Platform } from '$lib/platform-adapters/types'

-export type AppStatus = 'booting' | 'not-configured' | 'auth' | 'locked' | 'ready' | 'error'
+export type AppStatus = 'booting' | 'not-configured' | 'locked' | 'ready' | 'error'

 class AppStore {
  settingsOpen:    boolean             = $state(false)
@@ -23,6 +23,7 @@ export const app = new AppStore()

 export const appState = $state({
  status:        'booting' as AppStatus,
+  authRequired:  false     as boolean,
  error:         null      as string | null,
  serverUrl:     '',
  authenticated: false,
@@ -0,0 +1 @@
+export const authVerifiedState = $state({ value: false })
@@ -1,7 +1,8 @@
 import { detectAdapter }      from '$lib/platform-adapters'
 import { initPlatformService } from '$lib/platform-service'
 import { platformService }     from '$lib/platform-service'
-import { probeServer, loginBasic, loginUI, configureAuth } from '$lib/core/auth'
+import { probeServer, loginBasic, loginUI, verifyBasicAuth, configureAuth } from '$lib/core/auth'
+import { authVerifiedState }   from '$lib/state/auth.svelte'
 import { appState }            from '$lib/state/app.svelte'
 import { settingsState }       from '$lib/state/settings.svelte'

@@ -43,6 +44,7 @@ function handleProbeSuccess(gen: number) {
  boot.failed             = false
  boot.skipped            = false
  boot.serverProbeOk      = true
+  authVerifiedState.value = true
  appState.authenticated  = true
  appState.status         = pinLockEnabled() ? 'locked' : 'ready'
 }
@@ -59,20 +61,17 @@ function handleAuthRequired(
  appState.authMode = authMode

  if (authMode === 'BASIC_AUTH' && user && pass) {
+    // Saved creds — set optimistically; a real 401 will re-prompt via reportUnauthorized
    loginBasic(user, pass)
-      .then(() => { if (gen === probeGeneration) handleProbeSuccess(gen) })
-      .catch(() => {
-        if (gen !== probeGeneration) return
-        boot.loginUser     = user
-        boot.loginRequired = true
-        appState.status    = 'auth'
-      })
+    handleProbeSuccess(gen)
    return
  }

  boot.loginUser          = user
  boot.loginRequired      = true
-  appState.status    = 'auth'
+  authVerifiedState.value = false
+  appState.authRequired   = true
+  appState.status         = 'ready'   // let layout render, AuthGate overlay will block
 }

 export async function startProbe(
@@ -86,6 +85,7 @@ export async function startProbe(
  boot.loginRequired      = false
  boot.skipped            = false
  boot.serverProbeOk      = false
+  authVerifiedState.value = false
  appState.status         = 'booting'
  appState.authMode       = authMode

@@ -150,7 +150,7 @@ export async function submitLogin(): Promise<void> {
    if (appState.authMode === 'UI_LOGIN') {
      await loginUI(boot.loginUser.trim(), boot.loginPass.trim())
    } else {
-      await loginBasic(boot.loginUser.trim(), boot.loginPass.trim())
+      await verifyBasicAuth(boot.loginUser.trim(), boot.loginPass.trim())
    }
    boot.loginRequired      = false
    boot.sessionExpired     = false
@@ -158,7 +158,9 @@ export async function submitLogin(): Promise<void> {
    boot.loginPass          = ''
    boot.loginError         = null
    boot.serverProbeOk      = true
+    authVerifiedState.value = true
    appState.authenticated  = true
+    appState.authRequired   = false
    appState.status         = pinLockEnabled() ? 'locked' : 'ready'
  } catch (e: unknown) {
    boot.loginError = e instanceof Error ? e.message : 'Login failed'
@@ -187,6 +189,8 @@ export function bypassBoot(
  boot.loginRequired      = false
  boot.sessionExpired     = false
  boot.skipped            = true
+  authVerifiedState.value = true   // user explicitly opted out of the auth gate
+  appState.authRequired   = false
  appState.status         = 'ready'
  startBackgroundProbe(probeGeneration, authMode, user, pass)
 }
@@ -18,6 +18,7 @@
  import { downloadStore }                                              from '$lib/state/downloads.svelte'
  import { seriesState }                                                from '$lib/state/series.svelte'
  import MangaPreview                                                   from '$lib/components/shared/manga/MangaPreview.svelte'
+  import { authVerifiedState } from '$lib/state/auth.svelte'
  import '../app.css'

  let { children } = $props()
@@ -45,7 +46,6 @@
    appState.status === 'booting' ||
    appState.status === 'locked'  ||
    appState.status === 'error'   ||
-    appState.status === 'auth'    ||
    (appState.status === 'ready' && !splashDismissed)
  )

@@ -56,7 +56,7 @@
  const ringFull = $derived(appState.status === 'ready')
  const showApp  = $derived(!splashVisible)

-  function onSplashReady()  { splashDismissed = true }
+  function onSplashReady()  { if (!appState.authRequired || authVerifiedState.value) splashDismissed = true }
  function onSplashUnlock() { appState.status = 'ready'; splashDismissed = true }
  function onSplashBypass() {
    import('$lib/state/boot.svelte').then(({ bypassBoot }) => {
@@ -208,11 +208,13 @@
    {ringFull}
    failed={appState.status === 'error'}
    notConfigured={boot.notConfigured}
+    authRequired={appState.authRequired && !authVerifiedState.value}
    pinLen={settingsState.settings.appLockPin?.length ?? 0}
    pinCorrect={settingsState.settings.appLockPin ?? ''}
    onReady={onSplashReady}
    onUnlock={onSplashUnlock}
    onBypass={onSplashBypass}
+    onSkip={onSplashBypass}
    onRetry={onSplashRetry}
  />
 {/if}
				`@@ -0,0 +1 @@`
				`export const authVerifiedState = $state({ value: false })`