@veristone/nuxt-v-app 0.1.0 → 0.1.1

package/app/composables/useVCrud.ts

@@ -207,12 +207,28 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     showError(title, message)
   }
 
-  // Get auth token for mutations
+  /**
+   * Get auth token from cookies
+   * Reads the stack_auth_access cookie for Bearer token
+   */
+  const getAuthToken = (): string | null => {
+    const tokenCookie = useCookie('stack_auth_access')
+    return tokenCookie.value || null
+  }
+
+  // Get auth headers with Bearer token
   const getAuthHeaders = () => {
-    return {
+    const headers: Record<string, string> = {
       'Content-Type': 'application/json',
       'X-Client-Version': 'v-app-1.0'
     }
+    
+    const token = getAuthToken()
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`
+    }
+    
+    return headers
   }
 
   // Get base URL
@@ -342,11 +358,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         })
       }
 
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint)}`, {
-        method: 'POST',
-        headers: getMutationHeaders(body),
-        body
-      })
+       const result = await $fetch<T>(constructUrl(endpoint), {
+         method: 'POST',
+         baseURL: getBaseUrl(),
+         headers: getMutationHeaders(body),
+         body
+       })
 
       notifyOk('Success', 'Record created successfully.')
       if (onCreated) onCreated(result)
@@ -394,11 +411,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         mergedParams.order = sortConfig.value.direction
       }
 
-      const response = await $fetch<any>(`${getBaseUrl()}${constructUrl(endpoint)}`, {
-        method: 'GET',
-        headers: getAuthHeaders(),
-        params: mergedParams
-      })
+       const response = await $fetch<any>(constructUrl(endpoint), {
+         method: 'GET',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders(),
+         params: mergedParams
+       })
 
       // Handle paginated responses: { data: [...], pagination: {...} }
       // Return just the data array if response is paginated, otherwise return as-is
@@ -429,10 +447,11 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     lastError.value = null
 
     try {
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'GET',
-        headers: getAuthHeaders()
-      })
+       const result = await $fetch<T>(constructUrl(endpoint, id), {
+         method: 'GET',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders()
+       })
 
       detailData.value = result
       syncFormData(result)
@@ -464,11 +483,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         })
       }
 
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'PUT',
-        headers: getMutationHeaders(body),
-        body
-      })
+       const result = await $fetch<T>(constructUrl(endpoint, id), {
+         method: 'PUT',
+         baseURL: getBaseUrl(),
+         headers: getMutationHeaders(body),
+         body
+       })
 
       detailData.value = result
       notifyOk('Saved', 'Changes saved successfully.')
@@ -502,11 +522,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
         })
       }
 
-      const result = await $fetch<T>(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'PATCH',
-        headers: getMutationHeaders(body),
-        body
-      })
+       const result = await $fetch<T>(constructUrl(endpoint, id), {
+         method: 'PATCH',
+         baseURL: getBaseUrl(),
+         headers: getMutationHeaders(body),
+         body
+       })
 
       detailData.value = result
       notifyOk('Saved', 'Record updated.')
@@ -528,10 +549,11 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     isDeleting.value = true
 
     try {
-      await $fetch(`${getBaseUrl()}${constructUrl(endpoint, id)}`, {
-        method: 'DELETE',
-        headers: getAuthHeaders()
-      })
+       await $fetch(constructUrl(endpoint, id), {
+         method: 'DELETE',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders()
+       })
 
       notifyOk('Deleted', 'Record removed permanently.')
       if (onDeleted) onDeleted()
@@ -559,11 +581,12 @@ export const useVCrud = <T = any>(endpoint: string, options: VCrudOptions<T> = {
     isDeleting.value = true
 
     try {
-      await $fetch(`${getBaseUrl()}${constructUrl(endpoint)}/bulk-delete`, {
-        method: 'DELETE',
-        headers: getAuthHeaders(),
-        body: { ids }
-      })
+       await $fetch(constructUrl(endpoint) + '/bulk-delete', {
+         method: 'DELETE',
+         baseURL: getBaseUrl(),
+         headers: getAuthHeaders(),
+         body: { ids }
+       })
 
       notifyOk('Batch Deleted', `${ids.length} records removed.`)
       if (onDeleted) onDeleted()

package/app/composables/useVFetch.ts

@@ -5,6 +5,31 @@
 import type { UseFetchOptions } from 'nuxt/app'
 import { useVToast } from './useVToast'
 
+/**
+ * Get auth token from cookies
+ * Reads the stack_auth_access cookie for Bearer token
+ */
+function getAuthToken(): string | null {
+  const tokenCookie = useCookie('stack_auth_access')
+  return tokenCookie.value || null
+}
+
+/**
+ * Get default auth headers including Bearer token
+ */
+function getAuthHeaders(): Record<string, string> {
+  const headers: Record<string, string> = {
+    'X-Client-Version': 'v-app-1.0'
+  }
+  
+  const token = getAuthToken()
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`
+  }
+  
+  return headers
+}
+
 export async function useVFetch<T>(
   endpoint: string,
   opts: UseFetchOptions<T> = {},
@@ -13,13 +38,13 @@ export async function useVFetch<T>(
   const { error: notifyError } = useVToast()
   const runtimeConfig = useRuntimeConfig()
 
-  // Construct Base Config
+  // Construct Base Config with auth headers
   const fetchConfig: UseFetchOptions<T> = {
     baseURL: (runtimeConfig.public.apiUrl as string) || '/',
     retry: 1,
     retryStatusCodes: [408, 409, 429, 500, 502, 503, 504], // Extended retry codes
     headers: {
-      'X-Client-Version': 'v-app-1.0',
+      ...getAuthHeaders(),
       ...opts.headers
     },
     

package/app/pages/test-api-auth.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+const endpoint = 'http://localhost:3002/admin/portfolio/loans'
+
+const crud = useVCrud(endpoint, { immediate: false })
+
+// Store results for each method
+const results = ref<Record<string, any>>({})
+const loading = ref<Record<string, boolean>>({})
+const errors = ref<Record<string, string>>({})
+
+// Test GET (findAll)
+const testGet = async () => {
+  loading.value.get = true
+  errors.value.get = ''
+  try {
+    const data = await crud.findAll()
+    results.value.get = data
+  } catch (err: any) {
+    errors.value.get = err.message || 'Failed'
+  } finally {
+    loading.value.get = false
+  }
+}
+
+// Test GET single (findOne) - using first ID if available
+const testGetOne = async () => {
+  const testId = 'test-id-123'
+  loading.value.getOne = true
+  errors.value.getOne = ''
+  try {
+    const data = await crud.findOne(testId)
+    results.value.getOne = data
+  } catch (err: any) {
+    errors.value.getOne = err.message || 'Failed'
+  } finally {
+    loading.value.getOne = false
+  }
+}
+
+// Test POST (create)
+const testPost = async () => {
+  loading.value.post = true
+  errors.value.post = ''
+  try {
+    const data = await crud.create({ name: 'Test Loan', amount: 1000 })
+    results.value.post = data
+  } catch (err: any) {
+    errors.value.post = err.message || 'Failed'
+  } finally {
+    loading.value.post = false
+  }
+}
+
+// Test PUT (update)
+const testPut = async () => {
+  const testId = 'test-id-123'
+  loading.value.put = true
+  errors.value.put = ''
+  try {
+    const data = await crud.update(testId, { name: 'Updated Loan', amount: 2000 })
+    results.value.put = data
+  } catch (err: any) {
+    errors.value.put = err.message || 'Failed'
+  } finally {
+    loading.value.put = false
+  }
+}
+
+// Test PATCH
+const testPatch = async () => {
+  const testId = 'test-id-123'
+  loading.value.patch = true
+  errors.value.patch = ''
+  try {
+    const data = await crud.patch(testId, { amount: 1500 })
+    results.value.patch = data
+  } catch (err: any) {
+    errors.value.patch = err.message || 'Failed'
+  } finally {
+    loading.value.patch = false
+  }
+}
+
+// Test DELETE
+const testDelete = async () => {
+  const testId = 'test-id-123'
+  loading.value.delete = true
+  errors.value.delete = ''
+  try {
+    const data = await crud.remove(testId)
+    results.value.delete = data
+  } catch (err: any) {
+    errors.value.delete = err.message || 'Failed'
+  } finally {
+    loading.value.delete = false
+  }
+}
+
+// Run all tests
+const testAll = async () => {
+  await testGet()
+  await testGetOne()
+  await testPost()
+  await testPut()
+  await testPatch()
+  await testDelete()
+}
+</script>
+
+<template>
+  <div class="p-8 space-y-8">
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-bold">API Methods Test</h1>
+      <button 
+        @click="testAll" 
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Test All Methods
+      </button>
+    </div>
+
+    <!-- GET (findAll) -->
+    <div class="border p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">GET (findAll)</h2>
+        <button 
+          @click="testGet" 
+          :disabled="loading.get"
+          class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
+        >
+          {{ loading.get ? 'Loading...' : 'Test GET' }}
+        </button>
+      </div>
+      <div v-if="errors.get" class="text-red-500 mb-2">Error: {{ errors.get }}</div>
+      <pre v-if="results.get" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.get, null, 2) }}</pre>
+    </div>
+
+    <!-- GET One (findOne) -->
+    <div class="border p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">GET Single (findOne)</h2>
+        <button 
+          @click="testGetOne" 
+          :disabled="loading.getOne"
+          class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
+        >
+          {{ loading.getOne ? 'Loading...' : 'Test GET One' }}
+        </button>
+      </div>
+      <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123</div>
+      <div v-if="errors.getOne" class="text-red-500 mb-2">Error: {{ errors.getOne }}</div>
+      <pre v-if="results.getOne" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.getOne, null, 2) }}</pre>
+    </div>
+
+    <!-- POST (create) -->
+    <div class="border p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">POST (create)</h2>
+        <button 
+          @click="testPost" 
+          :disabled="loading.post"
+          class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+        >
+          {{ loading.post ? 'Loading...' : 'Test POST' }}
+        </button>
+      </div>
+      <div class="text-sm text-gray-500 mb-2">Payload: { name: 'Test Loan', amount: 1000 }</div>
+      <div v-if="errors.post" class="text-red-500 mb-2">Error: {{ errors.post }}</div>
+      <pre v-if="results.post" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.post, null, 2) }}</pre>
+    </div>
+
+    <!-- PUT (update) -->
+    <div class="border p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">PUT (update)</h2>
+        <button 
+          @click="testPut" 
+          :disabled="loading.put"
+          class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 disabled:opacity-50"
+        >
+          {{ loading.put ? 'Loading...' : 'Test PUT' }}
+        </button>
+      </div>
+      <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123 | Payload: { name: 'Updated Loan', amount: 2000 }</div>
+      <div v-if="errors.put" class="text-red-500 mb-2">Error: {{ errors.put }}</div>
+      <pre v-if="results.put" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.put, null, 2) }}</pre>
+    </div>
+
+    <!-- PATCH -->
+    <div class="border p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">PATCH</h2>
+        <button 
+          @click="testPatch" 
+          :disabled="loading.patch"
+          class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50"
+        >
+          {{ loading.patch ? 'Loading...' : 'Test PATCH' }}
+        </button>
+      </div>
+      <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123 | Payload: { amount: 1500 }</div>
+      <div v-if="errors.patch" class="text-red-500 mb-2">Error: {{ errors.patch }}</div>
+      <pre v-if="results.patch" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.patch, null, 2) }}</pre>
+    </div>
+
+    <!-- DELETE -->
+    <div class="border p-4 rounded">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold">DELETE (remove)</h2>
+        <button 
+          @click="testDelete" 
+          :disabled="loading.delete"
+          class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 disabled:opacity-50"
+        >
+          {{ loading.delete ? 'Loading...' : 'Test DELETE' }}
+        </button>
+      </div>
+      <div class="text-sm text-gray-500 mb-2">Testing with ID: test-id-123</div>
+      <div v-if="errors.delete" class="text-red-500 mb-2">Error: {{ errors.delete }}</div>
+      <pre v-if="results.delete" class="text-sm bg-gray-100 p-4 rounded overflow-auto max-h-48">{{ JSON.stringify(results.delete, null, 2) }}</pre>
+    </div>
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "keywords": [