Nuxt API Party usage with auth store

auth.server.ts

import { useAuthStore } from '~/stores/auth'

export default defineNuxtPlugin(async () => {
  const authStore = useAuthStore()

  // Refresh the token once on the server
  if (authStore.isLoggedIn && authStore.isTokenExpired()) {
    await authStore.refresh()
  }
})

composables.ts

import { useAuthStore } from '~/stores/auth'
import { toValue } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import type { MaybeRefOrGetter } from '@vueuse/core'
import type { ApiFetchOptions } from 'nuxt-api-party/dist/runtime/composables/$api'
import type { UseApiDataOptions } from 'nuxt-api-party/dist/runtime/composables/useApiData'

export async function $api<T = any>(
  path: string,
  opts: ApiFetchOptions & {
    auth?: boolean
  } = {}
) {
  const { auth = true, ..._opts } = opts

  const headers: HeadersInit = {
    ...headersToObject(_opts.headers),
  }

  if (auth) {
    const authStore = useAuthStore()
    if (authStore.isLoggedIn) {
      if (authStore.isTokenExpired()) await authStore.refresh()
      headers.Authorization = `Bearer ${authStore.accessToken}`
    }
  }

  return await $realApi<T>(path, {
    ..._opts,
    headers,
  })
}

export async function useApiData<T = any>(
  path: MaybeRefOrGetter<string>,
  opts: UseApiDataOptions<T> & {
    auth?: boolean
  } = {}
) {
  const { auth, ..._opts } = opts
  const authStore = useAuthStore()
  const { isLoggedIn } = storeToRefs(authStore)

  if (
    import.meta.client &&
    auth &&
    isLoggedIn.value &&
    authStore.isTokenExpired()
  ) {
    await authStore.refresh()
  }

  const asyncData = await useRealApiData<T>(path, {
    ..._opts,
    headers: computed(() => ({
      ...headersToObject(toValue(_opts.headers)),
      ...(auth &&
        isLoggedIn.value && {
          Authorization: `Bearer ${authStore.accessToken}`,
        }),
    })),
    // Instead of watching all fetch options implicitly,
    // we watch only the ones we need
    watch: false,
  })

  // Always watch the query
  const fetchOptions = reactive({
    query: _opts.query,
  })

  watch(fetchOptions, () => asyncData.refresh())

  if (auth) {
    watch(isLoggedIn, () => asyncData.refresh())
  }

  return asyncData
}

utils.ts

export function headersToObject(
  headers: HeadersInit = {}
): Record<string, string> {
  if (headers instanceof Headers || Array.isArray(headers)) {
    return Object.fromEntries(headers)
  }

  return headers
}