From 4306323c4440ede22988e47b4955c4358ee580a2 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 3 Dec 2025 13:00:24 -0600
Subject: [PATCH] Consistently use apiJson for fetches, with timeout and proper
 error handling (less code duplication).

---
 frontend/auth/App.vue                         |  17 +--
 frontend/auth/admin/AdminApp.vue              | 105 +++++++-----------
 frontend/int/reset/ResetApp.vue               |  32 ++----
 frontend/src/admin/AdminUserDetail.vue        |  10 +-
 frontend/src/components/ProfileView.vue       |   6 +-
 .../src/components/RegistrationLinkModal.vue  |   9 +-
 frontend/src/components/RestrictedAuth.vue    |  27 ++---
 frontend/src/stores/auth.js                   |  67 ++---------
 frontend/src/utils/api.js                     |  94 ++++++++++++++--
 9 files changed, 173 insertions(+), 194 deletions(-)

diff --git a/frontend/auth/App.vue b/frontend/auth/App.vue
index 4abc56a..a583f83 100644
--- a/frontend/auth/App.vue
+++ b/frontend/auth/App.vue
@@ -12,6 +12,7 @@
 <script setup>
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
+import { apiJson } from '@/utils/api'
 import StatusMessage from '@/components/StatusMessage.vue'
 import ProfileView from '@/components/ProfileView.vue'
 import LoadingView from '@/components/LoadingView.vue'
@@ -33,7 +34,7 @@ async function tryLoadUserInfo() {
     startSessionValidation()
     return true
   } catch (error) {
-    // User info load failed - apiFetch will show iframe if needed
+    // User info load failed - apiJson will show iframe if needed
     return false
   }
 }
@@ -106,23 +107,23 @@ function handleAuthMessage(event) {
 
 async function validateSession() {
   try {
-    const response = await fetch('/auth/api/validate', {
+    await apiJson('/auth/api/validate', {
       method: 'POST',
       credentials: 'include'
     })
-
-    if (response.status === 401) {
+    // If successful, session was renewed automatically
+  } catch (error) {
+    if (error.status === 401) {
       // Session expired - need to re-authenticate
       console.log('Session expired, requiring re-authentication')
       authenticated.value = false
       loading.value = true
       stopSessionValidation()
       showAuthIframe()
+    } else {
+      console.error('Session validation error:', error)
+      // Don't treat network errors as session expiry
     }
-    // If successful, session was renewed automatically
-  } catch (error) {
-    console.error('Session validation error:', error)
-    // Don't treat network errors as session expiry
   }
 }
 
diff --git a/frontend/auth/admin/AdminApp.vue b/frontend/auth/admin/AdminApp.vue
index 5d32d87..6e7a36c 100644
--- a/frontend/auth/admin/AdminApp.vue
+++ b/frontend/auth/admin/AdminApp.vue
@@ -13,7 +13,7 @@ import AdminUserDetail from '@/admin/AdminUserDetail.vue'
 import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
 import { getSettings, adminUiPath, makeUiHref } from '@/utils/settings'
-import { apiFetch } from '@/utils/api'
+import { apiJson } from '@/utils/api'
 
 const info = ref(null)
 const loading = ref(true)
@@ -106,9 +106,7 @@ async function attachPermissionToOrg(pid, orgUuid) {
   if (!orgUuid) return
   try {
     const params = new URLSearchParams({ permission_id: pid })
-    const res = await apiFetch(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'POST' })
     await loadOrgs()
   } catch (e) {
   authStore.showMessage(e.message || 'Failed to add permission to org')
@@ -119,9 +117,7 @@ async function detachPermissionFromOrg(pid, orgUuid) {
   openDialog('confirm', { message: 'Remove permission from this org?', action: async () => {
     try {
       const params = new URLSearchParams({ permission_id: pid })
-      const res = await apiFetch(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'DELETE' })
-      const data = await res.json()
-      if (data.detail) throw new Error(data.detail)
+      await apiJson(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'DELETE' })
       await loadOrgs()
     } catch (e) {
       authStore.showMessage(e.message || 'Failed to remove permission from org')
@@ -141,9 +137,7 @@ function parseHash() {
 }
 
 async function loadOrgs() {
-  const res = await apiFetch('/auth/api/admin/orgs')
-  const data = await res.json()
-  if (data.detail) throw new Error(data.detail)
+  const data = await apiJson('/auth/api/admin/orgs')
   orgs.value = data.map(o => {
     const roles = o.roles.map(r => ({ ...r, org_uuid: o.uuid, users: [] }))
     const roleMap = Object.fromEntries(roles.map(r => [r.display_name, r]))
@@ -155,10 +149,7 @@ async function loadOrgs() {
 }
 
 async function loadPermissions() {
-  const res = await apiFetch('/auth/api/admin/permissions')
-  const data = await res.json()
-  if (data.detail) throw new Error(data.detail)
-  permissions.value = data
+  permissions.value = await apiJson('/auth/api/admin/permissions')
 }
 
 async function load() {
@@ -166,9 +157,7 @@ async function load() {
   loadingMessage.value = 'Loading...'
   error.value = null
   try {
-    const res = await apiFetch('/auth/api/user-info', { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    const data = await apiJson('/auth/api/user-info', { method: 'POST' })
     info.value = data
     authenticated.value = true
 
@@ -209,8 +198,7 @@ function editUserName(user) { openDialog('user-update-name', { user, name: user.
 function deleteOrg(org) {
   if (!info.value?.is_global_admin) { authStore.showMessage('Global admin only'); return }
   openDialog('confirm', { message: `Delete organization ${org.display_name}?`, action: async () => {
-    const res = await apiFetch(`/auth/api/admin/orgs/${org.uuid}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'DELETE' })
     await Promise.all([loadOrgs(), loadPermissions()])
   } })
 }
@@ -219,14 +207,15 @@ function createUserInRole(org, role) { openDialog('user-create', { org, role })
 
 async function moveUserToRole(org, user, targetRoleDisplayName) {
   if (user.role === targetRoleDisplayName) return
-  const res = await apiFetch(`/auth/api/admin/orgs/${org.uuid}/users/${user.uuid}/role`, {
-    method: 'PUT',
-    headers: { 'content-type': 'application/json' },
-    body: JSON.stringify({ role: targetRoleDisplayName })
-  })
-  const data = await res.json()
-  if (data.detail) { authStore.showMessage(data.detail); return }
-  await loadOrgs()
+  try {
+    await apiJson(`/auth/api/admin/orgs/${org.uuid}/users/${user.uuid}/role`, {
+      method: 'PUT',
+      body: { role: targetRoleDisplayName }
+    })
+    await loadOrgs()
+  } catch (e) {
+    authStore.showMessage(e.message || 'Failed to update user role')
+  }
 }
 
 function onUserDragStart(e, user, org_uuid) {
@@ -261,8 +250,7 @@ function updateRole(role) { openDialog('role-update', { role, name: role.display
 
 function deleteRole(role) {
   openDialog('confirm', { message: `Delete role ${role.display_name}?`, action: async () => {
-    const res = await apiFetch(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
     await loadOrgs()
   } })
 }
@@ -278,13 +266,10 @@ async function toggleRolePermission(role, pid, checked) {
   role.permissions = newPermissions
 
   try {
-    const res = await apiFetch(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
+    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
       method: 'PUT',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ display_name: role.display_name, permissions: newPermissions })
+      body: { display_name: role.display_name, permissions: newPermissions }
     })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
     await loadOrgs()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update role permission')
@@ -298,8 +283,7 @@ function updatePermission(p) { openDialog('perm-display', { permission: p }) }
 function deletePermission(p) {
   openDialog('confirm', { message: `Delete permission ${p.id}?`, action: async () => {
     const params = new URLSearchParams({ permission_id: p.id })
-    const res = await apiFetch(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
     await loadPermissions()
   } })
 }
@@ -428,10 +412,7 @@ const breadcrumbEntries = computed(() => {
 watch(selectedUser, async (u) => {
   if (!u) { userDetail.value = null; return }
   try {
-  const res = await apiFetch(`/auth/api/admin/orgs/${u.org_uuid}/users/${u.uuid}`)
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    userDetail.value = data
+    userDetail.value = await apiJson(`/auth/api/admin/orgs/${u.org_uuid}/users/${u.uuid}`)
   } catch (e) {
     userDetail.value = { error: e.message }
   }
@@ -467,9 +448,7 @@ async function toggleOrgPermission(org, permId, checked) {
   org.permissions = next
   try {
     const params = new URLSearchParams({ permission_id: permId })
-    const res = await apiFetch(`/auth/api/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
     await loadOrgs()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update organization permission')
@@ -484,10 +463,7 @@ async function refreshUserDetail() {
   await loadOrgs()
   if (selectedUser.value) {
     try {
-      const r = await apiFetch(`/auth/api/admin/orgs/${selectedUser.value.org_uuid}/users/${selectedUser.value.uuid}`)
-      const jd = await r.json()
-      if (!r.ok || jd.detail) throw new Error(jd.detail || 'Reload failed')
-      userDetail.value = jd
+      userDetail.value = await apiJson(`/auth/api/admin/orgs/${selectedUser.value.org_uuid}/users/${selectedUser.value.uuid}`)
     } catch (e) { authStore.showMessage(e.message || 'Failed to reload user', 'error') }
   }
 }
@@ -504,28 +480,28 @@ async function submitDialog() {
     const t = dialog.value.type
     if (t === 'org-create') {
       const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await apiFetch('/auth/api/admin/orgs', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: [] }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await Promise.all([loadOrgs(), loadPermissions()])
+      await apiJson('/auth/api/admin/orgs', { method: 'POST', body: { display_name: name, permissions: [] } })
+      await Promise.all([loadOrgs(), loadPermissions()])
     } else if (t === 'org-update') {
       const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await apiFetch(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: org.permissions }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PUT', body: { display_name: name, permissions: org.permissions } })
+      await loadOrgs()
     } else if (t === 'role-create') {
       const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await apiFetch(`/auth/api/admin/orgs/${org.uuid}/roles`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: [] }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${org.uuid}/roles`, { method: 'POST', body: { display_name: name, permissions: [] } })
+      await loadOrgs()
     } else if (t === 'role-update') {
       const { role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await apiFetch(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: role.permissions }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', body: { display_name: name, permissions: role.permissions } })
+      await loadOrgs()
     } else if (t === 'user-create') {
       const { org, role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await apiFetch(`/auth/api/admin/orgs/${org.uuid}/users`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, role: role.display_name }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${org.uuid}/users`, { method: 'POST', body: { display_name: name, role: role.display_name } })
+      await loadOrgs()
     } else if (t === 'user-update-name') {
       const { user } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await apiFetch(`/auth/api/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await onUserNameSaved()
+      await apiJson(`/auth/api/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', body: { display_name: name } })
+      await onUserNameSaved()
     } else if (t === 'perm-display') {
       const { permission } = dialog.value.data
       const newId = dialog.value.data.id?.trim()
@@ -535,22 +511,17 @@ async function submitDialog() {
 
       if (newId !== permission.id) {
         // ID changed, use rename endpoint
-        const body = { old_id: permission.id, new_id: newId, display_name: newDisplay }
-        const res = await apiFetch('/auth/api/admin/permission/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
-        let data; try { data = await res.json() } catch(_) { data = {} }
-        if (!res.ok || data.detail) throw new Error(data.detail || data.error || `Failed (${res.status})`)
+        await apiJson('/auth/api/admin/permission/rename', { method: 'POST', body: { old_id: permission.id, new_id: newId, display_name: newDisplay } })
       } else if (newDisplay !== permission.display_name) {
         // Only display name changed
         const params = new URLSearchParams({ permission_id: permission.id, display_name: newDisplay })
-        const res = await apiFetch(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
-        const d = await res.json(); if (d.detail) throw new Error(d.detail)
+        await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
       }
       await loadPermissions()
     } else if (t === 'perm-create') {
       const id = dialog.value.data.id?.trim(); if (!id) throw new Error('ID required')
       const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
-      const res = await apiFetch('/auth/api/admin/permissions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, display_name }) })
-      const data = await res.json(); if (data.detail) throw new Error(data.detail)
+      await apiJson('/auth/api/admin/permissions', { method: 'POST', body: { id, display_name } })
       await loadPermissions(); dialog.value.data.display_name = ''; dialog.value.data.id = ''
     } else if (t === 'confirm') {
       const action = dialog.value.data.action; if (action) await action()
diff --git a/frontend/int/reset/ResetApp.vue b/frontend/int/reset/ResetApp.vue
index 459c7f5..3efe6d0 100644
--- a/frontend/int/reset/ResetApp.vue
+++ b/frontend/int/reset/ResetApp.vue
@@ -60,6 +60,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
+import { apiJson, ApiError, getUserFriendlyErrorMessage } from '@/utils/api'
 
 const status = reactive({
   show: false,
@@ -112,21 +113,15 @@ async function fetchSettings() {
 async function fetchUserInfo() {
   if (!token.value) return
   try {
-    const res = await fetch(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
+    userInfo.value = await apiJson(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
       method: 'POST'
     })
-    if (!res.ok) {
-      const payload = await safeParseJson(res)
-      const detail = payload?.detail || 'Reset link is invalid or expired.'
-      errorMessage.value = detail
-      showMessage(detail, 'error', 0)
-      return
-    }
-    userInfo.value = await res.json()
     displayName.value = userInfo.value?.user?.user_name || ''
   } catch (error) {
     console.error('Failed to load user info', error)
-    const message = 'We could not load your reset details. Try refreshing the page.'
+    const message = error instanceof ApiError
+      ? (error.data?.detail || 'Reset link is invalid or expired.')
+      : getUserFriendlyErrorMessage(error)
     errorMessage.value = message
     showMessage(message, 'error', 0)
   }
@@ -166,18 +161,13 @@ async function registerPasskey() {
 }
 
 async function setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
+  return await apiJson('/auth/api/set-session', {
     method: 'POST',
     headers: {
       Authorization: `Bearer ${sessionToken}`
     }
   })
-  const payload = await safeParseJson(response)
-  if (!response.ok || payload?.detail) {
-    const detail = payload?.detail || 'Session could not be established.'
-    throw new Error(detail)
-  }
-  return payload
+}
 }
 
 function redirectHome() {
@@ -203,14 +193,6 @@ function extractTokenFromPath() {
   return candidate
 }
 
-async function safeParseJson(response) {
-  try {
-    return await response.json()
-  } catch (error) {
-    return null
-  }
-}
-
 onMounted(async () => {
   token.value = extractTokenFromPath()
   await fetchSettings()
diff --git a/frontend/src/admin/AdminUserDetail.vue b/frontend/src/admin/AdminUserDetail.vue
index 59605ed..07229d1 100644
--- a/frontend/src/admin/AdminUserDetail.vue
+++ b/frontend/src/admin/AdminUserDetail.vue
@@ -5,7 +5,7 @@ import CredentialList from '@/components/CredentialList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import SessionList from '@/components/SessionList.vue'
 import { useAuthStore } from '@/stores/auth'
-import { apiFetch } from '@/utils/api'
+import { apiJson } from '@/utils/api'
 
 const props = defineProps({
   selectedUser: Object,
@@ -30,8 +30,7 @@ function handleEditName() {
 
 async function handleDelete(credential) {
   try {
-    const res = await apiFetch(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
-    const data = await res.json()
+    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
     if (data.status === 'ok') {
       emit('onUserNameSaved') // Reuse to refresh user detail
     } else {
@@ -47,8 +46,7 @@ async function handleTerminateSession(session) {
   if (!sessionId) return
   terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
   try {
-    const res = await apiFetch(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/sessions/${sessionId}`, { method: 'DELETE' })
-    const data = await res.json()
+    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/sessions/${sessionId}`, { method: 'DELETE' })
     if (data.status === 'ok') {
       if (data.current_session_terminated) {
         sessionStorage.clear()
@@ -62,7 +60,7 @@ async function handleTerminateSession(session) {
     }
   } catch (err) {
     console.error('Terminate session error', err)
-    authStore.showMessage('Failed to terminate session', 'error')
+    authStore.showMessage(err.message || 'Failed to terminate session', 'error')
   } finally {
     const next = { ...terminatingSessions.value }
     delete next[sessionId]
diff --git a/frontend/src/components/ProfileView.vue b/frontend/src/components/ProfileView.vue
index 7b8e5a9..099a3e3 100644
--- a/frontend/src/components/ProfileView.vue
+++ b/frontend/src/components/ProfileView.vue
@@ -101,7 +101,7 @@ import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
 import passkey from '@/utils/passkey'
 import { goBack } from '@/utils/helpers'
-import { apiFetch } from '@/utils/api'
+import { apiJson } from '@/utils/api'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
@@ -174,9 +174,7 @@ const saveName = async () => {
   if (!name) { authStore.showMessage('Name cannot be empty', 'error'); return }
   try {
     saving.value = true
-    const res = await apiFetch('/auth/api/user/display-name', { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name }) })
-    const data = await res.json()
-    if (!res.ok || data.detail) throw new Error(data.detail || 'Update failed')
+    await apiJson('/auth/api/user/display-name', { method: 'PUT', body: { display_name: name } })
     showNameDialog.value = false
     await authStore.loadUserInfo()
     authStore.showMessage('Name updated successfully!', 'success', 3000)
diff --git a/frontend/src/components/RegistrationLinkModal.vue b/frontend/src/components/RegistrationLinkModal.vue
index 37de7a4..0dd9dfc 100644
--- a/frontend/src/components/RegistrationLinkModal.vue
+++ b/frontend/src/components/RegistrationLinkModal.vue
@@ -59,7 +59,7 @@ import { ref, onMounted, watch, computed, nextTick } from 'vue'
 import QRCode from 'qrcode/lib/browser'
 import { formatDate } from '@/utils/helpers'
 import { useAuthStore } from '@/stores/auth'
-import { apiFetch } from '@/utils/api'
+import { apiJson, getUserFriendlyErrorMessage, shouldShowErrorToast } from '@/utils/api'
 
 const authStore = useAuthStore()
 
@@ -87,9 +87,7 @@ const expirationMessage = computed(() => {
 
 async function fetchLink() {
   try {
-    const res = await apiFetch(props.endpoint, { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    const data = await apiJson(props.endpoint, { method: 'POST' })
     url.value = data.url
     expires.value = data.expires
     emit('generated', { url: data.url, expires: data.expires })
@@ -98,6 +96,9 @@ async function fetchLink() {
     if (props.autoCopy) copy()
   } catch (e) {
     console.error('Failed to create link', e)
+    if (shouldShowErrorToast(e)) {
+      authStore.showMessage(getUserFriendlyErrorMessage(e), 'error', 4000)
+    }
     // Close the dialog on any error (auth cancelled, network error, etc.)
     emit('close')
   }
diff --git a/frontend/src/components/RestrictedAuth.vue b/frontend/src/components/RestrictedAuth.vue
index 1f59d57..9021b90 100644
--- a/frontend/src/components/RestrictedAuth.vue
+++ b/frontend/src/components/RestrictedAuth.vue
@@ -44,6 +44,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings } from '@/utils/settings'
+import { apiJson, getUserFriendlyErrorMessage } from '@/utils/api'
 
 const props = defineProps({
   mode: {
@@ -120,13 +121,7 @@ async function fetchSettings() {
 
 async function fetchUserInfo() {
   try {
-    const res = await fetch('/auth/api/user-info', { method: 'POST' })
-    if (!res.ok) {
-      userInfo.value = null
-      currentView.value = 'login'
-      return
-    }
-    userInfo.value = await res.json()
+    userInfo.value = await apiJson('/auth/api/user-info', { method: 'POST' })
     // Determine view based on authentication status
     if (isAuthenticated.value && props.mode !== 'reauth') {
       currentView.value = 'forbidden'
@@ -136,6 +131,11 @@ async function fetchUserInfo() {
     }
   } catch (error) {
     console.error('Failed to load user info', error)
+    // For 401/403 just go to login, for other errors show message
+    if (error.status !== 401 && error.status !== 403) {
+      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+    }
+    userInfo.value = null
     currentView.value = 'login'
   }
 }
@@ -168,12 +168,14 @@ async function logoutUser() {
   if (loading.value) return
   loading.value = true
   try {
-    await fetch('/auth/api/logout', { method: 'POST' })
+    await apiJson('/auth/api/logout', { method: 'POST' })
     userInfo.value = null
     // Switch to login view after logout
     currentView.value = 'login'
     showMessage('Logged out. You can sign in with a different account.', 'info', 3000)
-  } catch (_) { /* ignore */ }
+  } catch (error) {
+    showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+  }
   finally { loading.value = false }
   emit('logout')
 }
@@ -185,16 +187,11 @@ function openProfile() {
 }
 
 async function setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
+  return await apiJson('/auth/api/set-session', {
     method: 'POST', headers: { Authorization: `Bearer ${sessionToken}` }
   })
-  const payload = await safeParseJson(response)
-  if (!response.ok || payload?.detail) throw new Error(payload?.detail || 'Session could not be established.')
-  return payload
 }
 
-async function safeParseJson(response) { try { return await response.json() } catch (_) { return null } }
-
 onMounted(async () => {
   await fetchSettings()
   await fetchUserInfo()
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
index fe081dd..1c8b68c 100644
--- a/frontend/src/stores/auth.js
+++ b/frontend/src/stores/auth.js
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
 import { getSettings } from '@/utils/settings'
-import { apiFetch } from '@/utils/api'
+import { apiJson } from '@/utils/api'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -39,14 +39,10 @@ export const useAuthStore = defineStore('auth', {
       }
     },
     async setSessionCookie(sessionToken) {
-      const response = await fetch('/auth/api/set-session', {
+      const result = await apiJson('/auth/api/set-session', {
         method: 'POST',
         headers: {'Authorization': `Bearer ${sessionToken}`},
       })
-      const result = await response.json()
-      if (result.detail) {
-        throw new Error(result.detail)
-      }
       return result
     },
     async register() {
@@ -83,42 +79,21 @@ export const useAuthStore = defineStore('auth', {
       this.settings = await getSettings()
     },
     async loadUserInfo() {
-      const response = await apiFetch('/auth/api/user-info', { method: 'POST' })
-      let result = null
       try {
-        result = await response.json()
-      } catch (_) {
-        // ignore JSON parse errors (unlikely)
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+        console.log('User info loaded:', this.userInfo)
+      } catch (error) {
+        this.showMessage(error.message || 'Failed to load user info', 'error', 5000)
+        throw error
       }
-      if (!response.ok || result?.detail) {
-        const message = result?.detail || 'Failed to load user info'
-        this.showMessage(message, 'error', 5000)
-        throw new Error(message)
-      }
-      this.userInfo = result
-      console.log('User info loaded:', result)
     },
     async deleteCredential(uuid) {
-      const response = await apiFetch(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
-      const result = await response.json()
-      if (!response.ok || result.detail) {
-        throw new Error(result.detail || 'Failed to delete credential')
-      }
+      await apiJson(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
       await this.loadUserInfo()
     },
     async terminateSession(sessionId) {
       try {
-        const res = await apiFetch(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
-        let payload = null
-        try {
-          payload = await res.json()
-        } catch (_) {
-          // ignore JSON parse errors
-        }
-        if (!res.ok || payload?.detail) {
-          const message = payload?.detail || 'Failed to terminate session'
-          throw new Error(message)
-        }
+        const payload = await apiJson(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
         if (payload?.current_session_terminated) {
           sessionStorage.clear()
           location.reload()
@@ -133,17 +108,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logout() {
       try {
-        const res = await fetch('/auth/api/logout', {method: 'POST'})
-        if (!res.ok) {
-          let message = 'Logout failed'
-          try {
-            const data = await res.json()
-            if (data?.detail) message = data.detail
-          } catch (_) {
-            // ignore JSON parse errors
-          }
-          throw new Error(message)
-        }
+        await apiJson('/auth/api/logout', {method: 'POST'})
         sessionStorage.clear()
         location.reload()
       } catch (error) {
@@ -153,17 +118,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logoutEverywhere() {
       try {
-        const res = await fetch('/auth/api/user/logout-all', {method: 'POST'})
-        if (!res.ok) {
-          let message = 'Logout failed'
-          try {
-            const data = await res.json()
-            if (data?.detail) message = data.detail
-          } catch (_) {
-            // ignore JSON parse errors
-          }
-          throw new Error(message)
-        }
+        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
         sessionStorage.clear()
         location.reload()
       } catch (error) {
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
index e26ee27..a29fa80 100644
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -6,6 +6,9 @@
  * successful authentication.
  */
 
+/** Default timeout for API requests in milliseconds */
+const DEFAULT_TIMEOUT_MS = 1000
+
 /**
  * Custom error class for API errors with full response context.
  */
@@ -20,6 +23,17 @@ export class ApiError extends Error {
   }
 }
 
+/**
+ * Custom error class for network/timeout errors.
+ */
+export class NetworkError extends Error {
+  constructor(message, originalError = null) {
+    super(message)
+    this.name = 'NetworkError'
+    this.originalError = originalError
+  }
+}
+
 /**
  * Error thrown when user cancels authentication.
  */
@@ -139,18 +153,40 @@ if (typeof window !== 'undefined') {
  *
  * @param {string|URL} url - The URL to fetch
  * @param {RequestInit} [options] - Fetch options
+ * @param {number} [options.timeout] - Timeout in ms (default: 10000, use 0 to disable)
  * @returns {Promise<Response>} - The fetch response
  * @throws {AuthCancelledError} - If authentication is cancelled by user
+ * @throws {NetworkError} - If network error or timeout occurs
  */
 export async function apiFetch(url, options = {}) {
+  const { timeout = DEFAULT_TIMEOUT_MS, ...fetchOptions } = options
+
   // Ensure credentials are included for cookie-based auth
-  const fetchOptions = {
-    ...options,
-    credentials: options.credentials || 'include',
+  fetchOptions.credentials = fetchOptions.credentials || 'include'
+
+  // Add timeout signal if specified and not already present
+  if (timeout > 0 && !fetchOptions.signal) {
+    fetchOptions.signal = AbortSignal.timeout(timeout)
   }
 
   while (true) {
-    const response = await fetch(url, fetchOptions)
+    let response
+    try {
+      response = await fetch(url, fetchOptions)
+    } catch (error) {
+      // Handle network errors and timeouts
+      if (error.name === 'TimeoutError') {
+        throw new NetworkError('Request timed out', error)
+      }
+      if (error.name === 'AbortError') {
+        // Re-throw abort errors as-is (user-initiated cancellation)
+        throw error
+      }
+      if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
+        throw new NetworkError('Unable to connect to server', error)
+      }
+      throw new NetworkError(error.message || 'Network error', error)
+    }
 
     // Check for auth errors (401/403)
     if (response.status === 401 || response.status === 403) {
@@ -182,17 +218,25 @@ export async function apiFetch(url, options = {}) {
 
 /**
  * Convenience method for JSON API calls.
- * Automatically sets Content-Type for POST/PUT/PATCH with body.
+ * Automatically sets Accept and Content-Type headers.
+ * Returns parsed JSON directly if response is ok, throws ApiError otherwise.
  *
  * @param {string|URL} url - The URL to fetch
  * @param {RequestInit} [options] - Fetch options
  * @returns {Promise<any>} - Parsed JSON response
- * @throws {ApiError} - If response has error detail or request fails
+ * @throws {ApiError} - If response is not ok
+ * @throws {NetworkError} - If network error or timeout occurs
  * @throws {AuthCancelledError} - If authentication is cancelled by user
  */
 export async function apiJson(url, options = {}) {
   const fetchOptions = { ...options }
 
+  // Set default headers, allowing caller overrides
+  fetchOptions.headers = {
+    'Accept': 'application/json',
+    ...fetchOptions.headers,
+  }
+
   // Set Content-Type for requests with JSON body
   if (fetchOptions.body && typeof fetchOptions.body === 'object' && !(fetchOptions.body instanceof FormData)) {
     fetchOptions.headers = {
@@ -212,6 +256,39 @@ export async function apiJson(url, options = {}) {
   return data
 }
 
+/**
+ * Convert an error to a user-friendly message.
+ * @param {Error} error - The error to convert
+ * @returns {string} - User-friendly error message
+ */
+export function getUserFriendlyErrorMessage(error) {
+  if (error instanceof NetworkError) {
+    return error.message
+  }
+  if (error instanceof ApiError) {
+    return error.message
+  }
+  if (error.name === 'TimeoutError') {
+    return 'Request timed out'
+  }
+  if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
+    return 'Unable to connect to server'
+  }
+  return error.message || 'An error occurred'
+}
+
+/**
+ * Check if an error should show a toast to the user.
+ * @param {Error} error - The error to check
+ * @returns {boolean} - Whether to show a toast
+ */
+export function shouldShowErrorToast(error) {
+  // Don't show toast for user cancellations
+  if (error instanceof AuthCancelledError) return false
+  if (error.name === 'AbortError') return false
+  return true
+}
+
 /**
  * Create an API caller with error handling (toast + console.error).
  * Wraps apiJson calls with consistent error handling for apps.
@@ -229,14 +306,13 @@ export function createApiCaller(showMessage) {
     try {
       return await apiJson(url, options)
     } catch (error) {
-      if (error instanceof AuthCancelledError) {
-        // User cancelled - don't show error toast, just re-throw
+      if (!shouldShowErrorToast(error)) {
         throw error
       }
       // Log full error details
       console.error(`API error for ${url}:`, error instanceof ApiError ? { status: error.status, statusText: error.statusText, data: error.data } : error)
       // Show user-friendly toast
-      showMessage(error.message || 'An error occurred', 'error')
+      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
       throw error
     }
   }