✨ Proper user login

app/composables/useCustomTheme.ts

@@ -3,7 +3,7 @@ import { useDark, useToggle } from "@vueuse/core"
 // composables/useCustomTheme.ts
 export function useCustomTheme(): {
   isDark: WritableComputedRef<boolean, boolean>
-  toggle: (value?: boolean | undefined) => boolean
+  toggle: (value?: boolean | undefined) => boolean,
 } {
   const { $vuetify } = useNuxtApp()
 

app/composables/useSolarNetwork.ts

@@ -1,28 +1,45 @@
 // Solar Network aka the api client
-import { keysToCamel, keysToSnake } from '~/utils/transformKeys'
+import { keysToCamel, keysToSnake } from "~/utils/transformKeys"
 
 export const useSolarNetwork = () => {
-  const apiBase = useSolarNetworkUrl();
+  const apiBase = useSolarNetworkUrl()
 
   return $fetch.create({
     baseURL: apiBase,
-    credentials: 'include',
+    credentials: "include",
+    // Add Authorization header with Bearer token
+    onRequest: ({ options }) => {
+      // Get token from user store
+      const userStore = useUserStore()
+      const token = userStore.token
+
+      if (token) {
+        if (!options.headers) {
+          options.headers = new Headers()
+        }
+        if (options.headers instanceof Headers) {
+          options.headers.set("Authorization", `Bearer ${token}`)
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ;(options.headers as any)["Authorization"] = `Bearer ${token}`
+        }
+      }
+
+      // Transform request data from camelCase to snake_case
+      if (options.body && typeof options.body === "object") {
+        options.body = keysToSnake(options.body)
+      }
+    },
     // Transform response keys from snake_case to camelCase
     onResponse: ({ response }) => {
       if (response._data) {
         response._data = keysToCamel(response._data)
       }
-    },
-    // Transform request data from camelCase to snake_case
-    onRequest: ({ options }) => {
-      if (options.body && typeof options.body === 'object') {
-        options.body = keysToSnake(options.body)
-      }
     }
   })
 }
 
 export const useSolarNetworkUrl = () => {
   const config = useRuntimeConfig()
-  return config.public.apiBase
+  return config.public.development ? "/api" : config.public.apiBase
 }