Initial commit

nuxt/plugins/app.ts

@@ -0,0 +1,129 @@
+import { ofetch } from 'ofetch'
+import type { FetchOptions } from 'ofetch';
+
+export default defineNuxtPlugin({
+  name: 'app',
+  enforce: 'default',
+  parallel: true,
+  async setup(nuxtApp) {
+    const config = useRuntimeConfig()
+    const auth = useAuthStore()
+
+    nuxtApp.provide('storage', (path: string): string => {
+      if (!path) return ''
+
+      return path.startsWith('http://') || path.startsWith('https://') ?
+        path
+        : config.public.storageBase + path
+    })
+
+    function buildHeaders(headers: HeadersInit = {}): HeadersInit {
+      // Initial headers with Accept
+      const initialHeaders = {
+        ...headers,
+        'Accept': 'application/json',
+      };
+
+      // Conditionally add server-specific headers
+      if (process.server) {
+        const serverHeaders = {
+          'referer': useRequestURL().toString(),
+          ...useRequestHeaders(['x-forwarded-for', 'user-agent', 'referer']),
+        };
+        Object.assign(initialHeaders, serverHeaders);
+      }
+
+      // Conditionally add authorization header if logged in
+      if (auth.isLoggedIn) {
+        const authHeaders = {
+          'Authorization': `Bearer ${auth.token}`,
+        };
+        Object.assign(initialHeaders, authHeaders);
+      }
+
+      return initialHeaders;
+    }
+
+    function buildBaseURL(baseURL: string): string {
+      if (baseURL) return baseURL;
+
+      return process.server ?
+        config.apiLocal + config.public.apiPrefix
+        : config.public.apiBase + config.public.apiPrefix;
+    }
+
+    function buildSecureMethod(options: FetchOptions): void {
+      if (process.server) return;
+
+      const method = options.method?.toLowerCase() ?? 'get'
+
+      if (options.body instanceof FormData && method === 'put') {
+        options.method = 'POST';
+        options.body.append('_method', 'PUT');
+      }
+    }
+
+    function isRequestWithAuth(baseURL: string, path: string): boolean {
+      return !baseURL
+        && !path.startsWith('/_nuxt')
+        && !path.startsWith('http://')
+        && !path.startsWith('https://');
+    }
+
+    globalThis.$fetch = ofetch.create({
+      retry: false,
+
+      onRequest({ request, options }) {
+        if (!isRequestWithAuth(options.baseURL ?? '', request.toString())) return
+
+        options.credentials = 'include';
+
+        options.baseURL = buildBaseURL(options.baseURL ?? '');
+        options.headers = buildHeaders(options.headers);
+
+        buildSecureMethod(options);
+      },
+
+      onRequestError({ error }) {
+        if (process.server) return;
+
+        if (error.name === 'AbortError') return;
+
+        useToast().add({
+          icon: 'i-heroicons-exclamation-circle-solid',
+          color: 'red',
+          title: error.message ?? 'Something went wrong',
+        })
+      },
+
+      onResponseError({ response }) {
+        if (response.status === 401) {
+          if (auth.isLoggedIn) {
+            auth.token = ''
+            auth.user = {} as User
+          }
+
+          if (process.client) {
+            useToast().add({
+              title: 'Please log in to continue',
+              icon: 'i-heroicons-exclamation-circle-solid',
+              color: 'primary',
+            })
+          }
+        } else if (response.status !== 422) {
+          if (process.client) {
+            useToast().add({
+              icon: 'i-heroicons-exclamation-circle-solid',
+              color: 'red',
+              title: response._data?.message ?? response.statusText ?? 'Something went wrong',
+            })
+          }
+        }
+      }
+    } as FetchOptions)
+
+    if (auth.isLoggedIn) {
+      await auth.fetchUser();
+    }
+  },
+})