fix: user auth

src/content/services/webService.js

@@ -1,8 +1,8 @@
 import { openDB } from 'idb';
 import { nanoid } from 'nanoid';
 import browser from 'webextension-polyfill';
-import { objectHasKey } from '@/utils/helper';
 import { sendMessage } from '@/utils/message';
+import { objectHasKey, parseJSON } from '@/utils/helper';
 
 function initWebListener() {
   const listeners = {};
@@ -38,6 +38,11 @@ function initWebListener() {
 
     await db.put('store', workflows, 'workflows');
 
+    const session =
+      parseJSON(localStorage.getItem('supabase.auth.token'), null)
+        ?.currentSession ?? null;
+    await browser.storage.local.set({ session });
+
     const webListener = initWebListener();
     webListener.on('open-workflow', ({ workflowId }) => {
       if (!workflowId) return;

src/lib/findSelector.js

@@ -6,18 +6,7 @@ export const finder = finderLib;
 
 export default function (element, options = {}) {
   let selector = finder(element, {
-    tagName: (name) => {
-      console.log(name);
-      return true;
-    },
-    attr: (name, value) => name === 'id' || (ariaAttrs.includes(name) && value),
-    ...options,
-  });
-  console.log({
-    tagName: (name) => {
-      console.log(name);
-      return true;
-    },
+    tagName: () => true,
     attr: (name, value) => name === 'id' || (ariaAttrs.includes(name) && value),
     ...options,
   });

src/newtab/App.vue

@@ -210,13 +210,12 @@ browser.runtime.onMessage.addListener(({ type, data }) => {
     retrieved.value = true;
 
     await userStore.loadUser();
-    if (userStore.user) {
-      await Promise.allSettled([
-        sharedWorkflowStore.fetchWorkflows(),
-        fetchUserData(),
-      ]);
-    }
-    await syncHostedWorkflows();
+
+    await Promise.allSettled([
+      sharedWorkflowStore.fetchWorkflows(),
+      fetchUserData(),
+      syncHostedWorkflows(),
+    ]);
 
     autoDeleteLogs();
   } catch (error) {

src/newtab/pages/Storage.vue

@@ -30,6 +30,6 @@ import StorageVariables from '@/components/newtab/storage/StorageVariables.vue';
 const { t } = useI18n();
 
 const state = reactive({
-  activeTab: 'variables',
+  activeTab: 'tables',
 });
 </script>

src/utils/api.js

@@ -14,12 +14,34 @@ function queryBuilder(obj) {
   return str;
 }
 
-export function fetchApi(path, options) {
+export async function fetchApi(path, options) {
   const urlPath = path.startsWith('/') ? path : `/${path}`;
+  const headers = {};
+
+  if (urlPath.startsWith('/me')) {
+    let { session } = await browser.storage.local.get('session');
+    if (!session) throw new Error('Unauthorized');
+
+    const isExpired = Date.now() > session.expires_at * 1000 - 64000;
+
+    if (isExpired) {
+      const response = await fetchApi(
+        `/session/refresh?token=${session.refresh_token}`
+      );
+      const result = await response.json();
+      if (!response.ok) throw new Error(result.message);
+
+      session = result;
+      await browser.storage.local.set({ session });
+    }
+
+    headers.Authorization = `Bearer ${session.access_token}`;
+  }
 
   return fetch(`${secrets.baseApiUrl}${urlPath}`, {
     headers: {
       'Content-Type': 'application/json',
+      ...headers,
     },
     ...options,
   });