Figured out auth & middlewares

client/composables/lib/vForm/Form.js

@@ -1,8 +1,6 @@
 import {serialize} from 'object-to-formdata';
 import Errors from './Errors';
 import cloneDeep from 'clone-deep';
-import {useOpnFetch} from "~/composables/useOpnFetch.js";
-
 function hasFiles(data) {
   return data instanceof File ||
     data instanceof Blob ||
@@ -124,7 +122,7 @@ class Form {
     }
 
     return new Promise((resolve, reject) => {
-      useOpnFetch(config.url, config)
+      useOpnApi(config.url, config)
         .then(({data, error}) => {
           if (error.value) {
             this.handleErrors(error);

client/composables/useAmplitude.js

@@ -2,7 +2,10 @@ import amplitude from 'amplitude-js'
 import config from '~/opnform.config.js'
 
 export default () => {
-  const amplitudeClient = config.amplitude_code ? amplitude.getInstance().init(config.amplitude_code) : null;
+  const amplitudeClient = config.amplitude_code ? amplitude.getInstance() : null;
+  if (amplitudeClient) {
+    amplitudeClient.init(config.amplitude_code)
+  }
 
   const logEvent = function (eventName, eventData) {
     if (!config.production || !amplitudeClient) {
@@ -17,11 +20,12 @@ export default () => {
   }
 
   const setUser = function (user) {
+    if (!amplitudeClient) return
     amplitudeClient.setUserId(user.id)
     amplitudeClient.setUserProperties({
-      email: this.user.email,
-      subscribed: this.user.is_subscribed,
-      enterprise_subscription: this.user.has_enterprise_subscription
+      email: user.email,
+      subscribed: user.is_subscribed,
+      enterprise_subscription: user.has_enterprise_subscription
     })
   }
 

client/composables/useOpnApi.js

@@ -0,0 +1,49 @@
+import config from "~/opnform.config.js";
+
+function addAuthHeader(request, options) {
+  const authStore = useAuthStore()
+  if (authStore.token) {
+    options.headers = {Authorization: `Bearer ${authStore.token}`, ...options.headers}
+  }
+}
+
+function addPasswordToFormRequest(request, options) {
+  const url = request.url
+  if (!url || !url.startsWith('/api/forms/')) return
+
+  const slug = url.split('/')[3]
+  const passwordCookie = useCookie('password-' + slug, {maxAge: 60 * 60 * 24 * 30}) // 30 days
+  if (slug !== undefined && slug !== '' && passwordCookie.value !== undefined) {
+    options.headers['form-password'] = passwordCookie.value
+  }
+}
+
+export function getOpnRequestsOptions(request, opts) {
+  opts.headers = {accept: 'application/json', ...opts.headers}
+
+  addAuthHeader(request, opts)
+  addPasswordToFormRequest(request, opts)
+
+  return {
+    baseURL: config.api_url,
+    onResponseError({response}) {
+      const authStore = useAuthStore()
+      const {status} = response
+
+      if (status === 401 && authStore.check) {
+        console.log("Logging out due to 401")
+        authStore.logout()
+        useRouter().push({name: 'login'})
+      }
+
+      if (status >= 500) {
+        console.error('Request error', status)
+      }
+    },
+    ...opts
+  }
+}
+
+export const useOpnApi = (request, opts = {}) => {
+  return useFetch(request, getOpnRequestsOptions(request, opts))
+}

client/composables/useOpnFetch.js

@@ -1,5 +0,0 @@
-import config from "~/opnform.config.js";
-
-export const useOpnFetch = (request, opts) => {
-  return useFetch(request, { baseURL: config.api_url, ...opts })
-}