fix: generate basic auth header for client-side usage

Author: johannschopplich

src/prefetch.ts

@@ -1,7 +1,7 @@
 import { ofetch } from 'ofetch'
 import type { KirbyQueryResponse } from 'kirby-types'
 import { logger } from './kit'
-import { getAuthHeader } from './runtime/utils'
+import { createAuthHeader } from './runtime/utils'
 import type { ModuleOptions } from './module'
 
 export async function prefetchQueries(
@@ -13,7 +13,6 @@ export async function prefetchQueries(
     return results
 
   const start = Date.now()
-  const { auth, token, credentials } = options
 
   for (const [key, query] of Object.entries(options.prefetch)) {
     const language = 'language' in query ? query.language : undefined
@@ -33,7 +32,7 @@ export async function prefetchQueries(
           method: 'POST',
           body: language ? query.query : query,
           headers: {
-            ...getAuthHeader({ auth, token, credentials }),
+            ...createAuthHeader(options),
             ...(language && { 'X-Language': language }),
           },
         }),

src/runtime/composables/$kirby.ts

@@ -3,7 +3,7 @@ import { hash } from 'ohash'
 import type { NitroFetchOptions } from 'nitropack'
 import type { ModuleOptions } from '../../module'
 import type { ServerFetchOptions } from '../types'
-import { getAuthHeader, getProxyPath, headersToObject } from '../utils'
+import { createAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useNuxtApp, useRuntimeConfig } from '#imports'
 
 export type KirbyFetchOptions = Pick<
@@ -84,7 +84,7 @@ export function $kirby<T = any>(
     query,
     headers: {
       ...baseHeaders,
-      ...getAuthHeader(kql),
+      ...createAuthHeader(kql),
     },
     method,
     body,

src/runtime/composables/$kql.ts

@@ -3,7 +3,7 @@ import type { NitroFetchOptions } from 'nitropack'
 import type { KirbyQueryRequest, KirbyQueryResponse } from 'kirby-types'
 import type { ModuleOptions } from '../../module'
 import type { ServerFetchOptions } from '../types'
-import { getAuthHeader, getProxyPath, headersToObject } from '../utils'
+import { createAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useNuxtApp, useRuntimeConfig } from '#imports'
 
 export type KqlOptions = Pick<
@@ -64,7 +64,7 @@ export function $kql<T extends KirbyQueryResponse<any, boolean> = KirbyQueryResp
     body: query,
     headers: {
       ...baseHeaders,
-      ...getAuthHeader(kql),
+      ...createAuthHeader(kql),
     },
   }
 

src/runtime/composables/useKirbyData.ts

@@ -8,7 +8,7 @@ import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
 import { toValue } from '@vueuse/core'
 import type { MaybeRefOrGetter } from '@vueuse/core'
 import type { ModuleOptions } from '../../module'
-import { getAuthHeader, getProxyPath, headersToObject } from '../utils'
+import { createAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useAsyncData, useRuntimeConfig } from '#imports'
 
 type UseKirbyDataOptions<T> = Omit<AsyncDataOptions<T>, 'watch'> & Pick<
@@ -118,7 +118,7 @@ export function useKirbyData<T = any>(
             query,
             headers: {
               ...headersToObject(headers),
-              ...getAuthHeader(kql),
+              ...createAuthHeader(kql),
             },
             method,
             body,

src/runtime/composables/useKql.ts

@@ -8,7 +8,7 @@ import type { KirbyQueryRequest, KirbyQueryResponse } from 'kirby-types'
 import { toValue } from '@vueuse/core'
 import type { MaybeRefOrGetter } from '@vueuse/core'
 import type { ModuleOptions } from '../../module'
-import { getAuthHeader, getProxyPath, headersToObject } from '../utils'
+import { createAuthHeader, getProxyPath, headersToObject } from '../utils'
 import { useAsyncData, useRuntimeConfig } from '#imports'
 
 export type UseKqlOptions<T> = Omit<AsyncDataOptions<T>, 'watch'> & Pick<
@@ -107,8 +107,8 @@ export function useKql<
             body: _query.value,
             headers: {
               ...headersToObject(headers),
+              ...createAuthHeader(kql),
               ...(_language.value && { 'X-Language': _language.value }),
-              ...getAuthHeader(kql),
             },
           })) as ResT
         }

src/runtime/server/handler.ts

@@ -1,7 +1,7 @@
 import { createError, defineEventHandler, getRouterParam, readBody } from 'h3'
 import type { FetchError } from 'ofetch'
 import type { ModuleOptions } from '../../module'
-import { getAuthHeader } from '../utils'
+import { createAuthHeader } from '../utils'
 import type { ServerFetchOptions } from '../types'
 
 // @ts-expect-error: Will be resolved by Nitro
@@ -35,7 +35,7 @@ async function fetcher({
           }),
       headers: {
         ...headers,
-        ...getAuthHeader(kql),
+        ...createAuthHeader(kql),
       },
     })
 

src/runtime/server/imports.ts

@@ -1,7 +1,7 @@
 import { joinURL } from 'ufo'
 import type { NitroFetchOptions } from 'nitropack'
 import type { KirbyQueryRequest, KirbyQueryResponse } from 'kirby-types'
-import { getAuthHeader, headersToObject } from '../utils'
+import { createAuthHeader, headersToObject } from '../utils'
 import { useRuntimeConfig } from '#imports'
 
 export type KirbyFetchOptions = Omit<
@@ -46,7 +46,7 @@ export function $kirby<T = any>(
     baseURL: kql.url,
     headers: {
       ...headersToObject(headers),
-      ...getAuthHeader(kql),
+      ...createAuthHeader(kql),
     },
   }) as Promise<T>
 }
@@ -65,8 +65,8 @@ export function $kql<T extends KirbyQueryResponse<any, boolean> = KirbyQueryResp
     body: query,
     headers: {
       ...headersToObject(headers),
+      ...createAuthHeader(kql),
       ...(language && { 'X-Language': language }),
-      ...getAuthHeader(kql),
     },
   }) as Promise<T>
 }

src/runtime/utils.ts

@@ -11,20 +11,23 @@ export function headersToObject(headers: HeadersInit = {}): Record<string, strin
   return headers
 }
 
-export function getAuthHeader({
+export function createAuthHeader({
   auth,
   token,
   credentials,
 }: Pick<ModuleOptions, 'token' | 'credentials'> & { auth?: string }) {
-  const headers: Record<string, string> = {}
-
   if (auth === 'basic' && credentials) {
     const { username, password } = credentials
-    headers.Authorization = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`
+    let encoded = ''
+
+    if (process.server)
+      encoded = Buffer.from(`${username}:${password}`).toString('base64')
+    else if (process.client)
+      encoded = btoa(`${username}:${password}`)
+
+    return { Authorization: `Basic ${encoded}` }
   }
 
   if (auth === 'bearer')
-    headers.Authorization = `Bearer ${token}`
-
-  return headers
+    return { Authorization: `Bearer ${token}` }
 }