From d38c99f05f9ace9b9436896187c4e7ee9eb1732d Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 6 Jan 2025 19:17:16 +0100
Subject: [PATCH 01/54] feat: add access token

---
 src/components/Configuration/SettingsEdit.vue | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index c0d492f..1cb72fa 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -20,6 +20,20 @@
         :model-value="settings.publicData.apiKey"
         @update:modelValue="changeApiKey"
     />
+    <wwEditorInputRow
+        label="Personal Access Token"
+        required
+        type="query"
+        placeholder="sbp_bdd0********4f23"
+        :model-value="settings.privateData.accessToken"
+        @update:modelValue="changeAccessToken"
+    >
+        <template #append-label>
+            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
+                Find it here
+            </a>
+        </template>
+    </wwEditorInputRow>
 </template>
 
 <script>
@@ -39,6 +53,7 @@ export default {
         if (!isSettingsValid && isOtherPluginSettingsValid) {
             this.changeProjectUrl(wwLib.wwPlugins.supabaseAuth.settings.publicData.projectUrl);
             this.changeApiKey(wwLib.wwPlugins.supabaseAuth.settings.publicData.apiKey);
+            this.changeAccessToken(wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken);
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: {
@@ -46,6 +61,10 @@ export default {
                     apiKey: wwLib.wwPlugins.supabaseAuth.settings.publicData.apiKey,
                     projectUrl: wwLib.wwPlugins.supabaseAuth.settings.publicData.projectUrl,
                 },
+                privateData: {
+                    ...this.settings.privateData,
+                    accessToken: wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken,
+                },
             });
         }
     },
@@ -64,6 +83,12 @@ export default {
             });
             this.$nextTick(this.loadInstance);
         },
+        changeAccessToken(accessToken) {
+            this.$emit('update:settings', {
+                ...this.settings,
+                privateData: { ...this.settings.privateData, accessToken },
+            });
+        },
         loadInstance() {
             this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
         },

From 92c62cde049cdf5cfd993146609e2b5f2e2bc6c5 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Tue, 7 Jan 2025 12:36:42 +0100
Subject: [PATCH 02/54] feat: add edge function list

---
 src/components/Functions/InvokeEdge.vue | 42 +++++++++++++++++++------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/Functions/InvokeEdge.vue b/src/components/Functions/InvokeEdge.vue
index 6971203..a09cc8a 100644
--- a/src/components/Functions/InvokeEdge.vue
+++ b/src/components/Functions/InvokeEdge.vue
@@ -1,13 +1,19 @@
 <template>
-    <wwEditorInputRow
-        label="Function name"
-        type="query"
-        placeholder="hello"
-        bindable
-        required
-        :model-value="functionName"
-        @update:modelValue="setArgs({ functionName: $event })"
-    />
+    <wwEditorFormRow label="Function" required>
+        <div class="flex items-center">
+            <wwEditorInputTextSelect
+                class="w-100"
+                placeholder="Select a function"
+                required
+                :model-value="functionName"
+                :options="functionsOptions"
+                @update:modelValue="setArgs({ functionName: $event })"
+            />
+            <button type="button" class="ww-editor-button -primary -small -icon ml-2" @click="fetchFunctions">
+                <wwEditorIcon name="refresh" medium />
+            </button>
+        </div>
+    </wwEditorFormRow>
     <wwEditorInputRow
         label="Method"
         type="select"
@@ -104,6 +110,7 @@ export default {
         return {
             isAdvancedOpen: false,
             isLoading: false,
+            functionsOptions: [],
         };
     },
     computed: {
@@ -123,10 +130,27 @@ export default {
             return this.args.body;
         },
     },
+    mounted() {
+        this.fetchFunctions();
+    },
     methods: {
         setArgs(arg) {
             this.$emit('update:args', { ...this.args, ...arg });
         },
+        async fetchFunctions() {
+            this.isLoading = true;
+            try {
+                const { data } = await wwAxios.get(
+                    `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                        this.$store.getters['websiteData/getDesignInfo'].id
+                    }/supabase/edge`
+                );
+                this.functionsOptions = data.map(func => ({ label: func.name, value: func.slug }));
+                this.isLoading = false;
+            } catch (error) {
+                this.isLoading = false;
+            }
+        },
     },
 };
 </script>

From 401af114348fbb806f836c958e21d648025e45ea Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Tue, 7 Jan 2025 12:40:52 +0100
Subject: [PATCH 03/54] feat: add data log

---
 src/components/Functions/InvokeEdge.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Functions/InvokeEdge.vue b/src/components/Functions/InvokeEdge.vue
index a09cc8a..63de8cc 100644
--- a/src/components/Functions/InvokeEdge.vue
+++ b/src/components/Functions/InvokeEdge.vue
@@ -145,6 +145,7 @@ export default {
                         this.$store.getters['websiteData/getDesignInfo'].id
                     }/supabase/edge`
                 );
+                console.log(data);
                 this.functionsOptions = data.map(func => ({ label: func.name, value: func.slug }));
                 this.isLoading = false;
             } catch (error) {

From e6c641e241c403c9e732db88d23124fbbe270bdf Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Tue, 7 Jan 2025 12:42:18 +0100
Subject: [PATCH 04/54] fix: data

---
 src/components/Functions/InvokeEdge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Functions/InvokeEdge.vue b/src/components/Functions/InvokeEdge.vue
index 63de8cc..f3f0e76 100644
--- a/src/components/Functions/InvokeEdge.vue
+++ b/src/components/Functions/InvokeEdge.vue
@@ -146,7 +146,7 @@ export default {
                     }/supabase/edge`
                 );
                 console.log(data);
-                this.functionsOptions = data.map(func => ({ label: func.name, value: func.slug }));
+                this.functionsOptions = data?.data.map(func => ({ label: func.name, value: func.slug }));
                 this.isLoading = false;
             } catch (error) {
                 this.isLoading = false;

From 37e63d0c7f9d900476b6b9b467ca72e90d4a138c Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 9 Jan 2025 15:10:24 +0100
Subject: [PATCH 05/54] feat: add database password

---
 src/components/Configuration/SettingsEdit.vue | 40 ++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 1cb72fa..2673741 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -20,20 +20,36 @@
         :model-value="settings.publicData.apiKey"
         @update:modelValue="changeApiKey"
     />
-    <wwEditorInputRow
-        label="Personal Access Token"
-        required
-        type="query"
-        placeholder="sbp_bdd0********4f23"
-        :model-value="settings.privateData.accessToken"
-        @update:modelValue="changeAccessToken"
-    >
+    <wwEditorFormRow label="Personal Access Token">
         <template #append-label>
             <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
                 Find it here
             </a>
         </template>
-    </wwEditorInputRow>
+        <wwEditorInputRow
+            type="query"
+            placeholder="sbp_bdd0********4f23"
+            :model-value="settings.privateData.accessToken"
+            @update:modelValue="changeAccessToken"
+        ></wwEditorInputRow>
+    </wwEditorFormRow>
+    <wwEditorFormRow label="Database password">
+        <template #append-label>
+            <a
+                class="ww-editor-link ml-2"
+                href="https://supabase.com/dashboard/project/_/settings/database"
+                target="_blank"
+            >
+                Find it here
+            </a>
+        </template>
+        <wwEditorInputRow
+            type="query"
+            placeholder=""
+            :model-value="settings.privateData.databasePassword"
+            @update:modelValue="changeDatabasePassword"
+        ></wwEditorInputRow>
+    </wwEditorFormRow>
 </template>
 
 <script>
@@ -89,6 +105,12 @@ export default {
                 privateData: { ...this.settings.privateData, accessToken },
             });
         },
+        changeDatabasePassword(databasePassword) {
+            this.$emit('update:settings', {
+                ...this.settings,
+                privateData: { ...this.settings.privateData, databasePassword },
+            });
+        },
         loadInstance() {
             this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
         },

From 4d0456604cf7671e445d5529418aac08ec6acbf3 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 18:13:31 +0100
Subject: [PATCH 06/54] feat: add project list

---
 src/components/Configuration/SettingsEdit.vue | 50 ++++++++++++++-----
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 2673741..298b5b9 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,4 +1,17 @@
 <template>
+    <wwEditorFormRow label="Personal Access Token">
+        <template #append-label>
+            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
+                Find it here
+            </a>
+        </template>
+        <wwEditorInputRow
+            type="query"
+            placeholder="sbp_bdd0********4f23"
+            :model-value="settings.privateData.accessToken"
+            @update:modelValue="changeAccessToken"
+        ></wwEditorInputRow>
+    </wwEditorFormRow>
     <wwEditorFormRow required label="Project URL">
         <template #append-label>
             <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/project/_/settings/api" target="_blank">
@@ -6,11 +19,20 @@
             </a>
         </template>
         <wwEditorInputRow
+            v-if="!settings.privateData.accessToken"
             type="query"
             placeholder="https://your-project.supabase.co"
             :model-value="settings.publicData.projectUrl"
             @update:modelValue="changeProjectUrl"
         />
+        <wwEditorInputRow
+            v-else
+            type="select"
+            placeholder="https://your-project.supabase.co"
+            :model-value="settings.publicData.projectUrl"
+            :options="projects.map(project => ({ label: project.name, value: `https://${project.id}.supabase.co` }))"
+            @update:modelValue="changeProjectUrl"
+        />
     </wwEditorFormRow>
     <wwEditorInputRow
         label="Public API key"
@@ -20,19 +42,6 @@
         :model-value="settings.publicData.apiKey"
         @update:modelValue="changeApiKey"
     />
-    <wwEditorFormRow label="Personal Access Token">
-        <template #append-label>
-            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
-                Find it here
-            </a>
-        </template>
-        <wwEditorInputRow
-            type="query"
-            placeholder="sbp_bdd0********4f23"
-            :model-value="settings.privateData.accessToken"
-            @update:modelValue="changeAccessToken"
-        ></wwEditorInputRow>
-    </wwEditorFormRow>
     <wwEditorFormRow label="Database password">
         <template #append-label>
             <a
@@ -59,7 +68,15 @@ export default {
         settings: { type: Object, required: true },
     },
     emits: ['update:settings'],
+    data() {
+        return {
+            projects: [],
+        };
+    },
     mounted() {
+        if (this.settings.privateData.accessToken) {
+            this.fetchProjects();
+        }
         const isSettingsValid = this.settings.publicData.projectUrl && this.settings.publicData.apiKey;
         const isOtherPluginSettingsValid =
             wwLib.wwPlugins.supabaseAuth &&
@@ -114,6 +131,13 @@ export default {
         loadInstance() {
             this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
         },
+        async fetchProjects() {
+            this.projects = await wwAxios.get(
+                `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                    this.$store.getters['websiteData/getDesignInfo'].id
+                }/supabase/projects`
+            );
+        },
     },
 };
 </script>

From 75c6d5441a9a4e50980ae514dea1b498aaea8537 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 18:20:41 +0100
Subject: [PATCH 07/54] fix: label for projects

---
 src/components/Configuration/SettingsEdit.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 298b5b9..a07017a 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -30,7 +30,12 @@
             type="select"
             placeholder="https://your-project.supabase.co"
             :model-value="settings.publicData.projectUrl"
-            :options="projects.map(project => ({ label: project.name, value: `https://${project.id}.supabase.co` }))"
+            :options="
+                projects.map(project => ({
+                    label: `${project.name} (${project.id}) ${project.status === 'INACTIVE' ? '#PAUSED' : ''}`,
+                    value: `https://${project.id}.supabase.co`,
+                }))
+            "
             @update:modelValue="changeProjectUrl"
         />
     </wwEditorFormRow>
@@ -132,11 +137,12 @@ export default {
             this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
         },
         async fetchProjects() {
-            this.projects = await wwAxios.get(
+            const { data } = await wwAxios.get(
                 `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
                     this.$store.getters['websiteData/getDesignInfo'].id
                 }/supabase/projects`
             );
+            this.projects = data?.data;
         },
     },
 };

From 8976a2e3c1ea9aecd20400566f03bf1df8f3cefc Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:14:27 +0100
Subject: [PATCH 08/54] feat: load api key

---
 src/components/Configuration/SettingsEdit.vue | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index a07017a..cbcfc91 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -107,11 +107,19 @@ export default {
         }
     },
     methods: {
-        changeProjectUrl(projectUrl) {
+        async changeProjectUrl(projectUrl) {
+            let apiKey = this.settings.publicData.apiKey;
+            if (this.settings.privateData.accessToken) {
+                const { apiKeys } = await this.fetchProject(
+                    projectUrl.replace('https://', '').replace('.supabase.co', '')
+                );
+                apiKey = apiKeys.find(key => key.role === 'anon').api_key;
+            }
             this.$emit('update:settings', {
                 ...this.settings,
-                publicData: { ...this.settings.publicData, projectUrl },
+                publicData: { ...this.settings.publicData, projectUrl, apiKey },
             });
+
             this.$nextTick(this.loadInstance);
         },
         changeApiKey(apiKey) {
@@ -144,6 +152,14 @@ export default {
             );
             this.projects = data?.data;
         },
+        async fetchProject(projectId) {
+            const { data } = await wwAxios.get(
+                `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                    this.$store.getters['websiteData/getDesignInfo'].id
+                }/supabase/projects:${projectId}`
+            );
+            return data?.data;
+        },
     },
 };
 </script>

From d9a3a36c3c00ce26cd16fbc1ff2d53bc7010f812 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:15:45 +0100
Subject: [PATCH 09/54] fix: endpoint url

---
 src/components/Configuration/SettingsEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index cbcfc91..cf62133 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -156,7 +156,7 @@ export default {
             const { data } = await wwAxios.get(
                 `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
                     this.$store.getters['websiteData/getDesignInfo'].id
-                }/supabase/projects:${projectId}`
+                }/supabase/projects/${projectId}`
             );
             return data?.data;
         },

From d0ccd4d41eba5908f5f6050d946bf613370eb98a Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:17:08 +0100
Subject: [PATCH 10/54] fix: name instead of role

---
 src/components/Configuration/SettingsEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index cf62133..c975bc7 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -113,7 +113,7 @@ export default {
                 const { apiKeys } = await this.fetchProject(
                     projectUrl.replace('https://', '').replace('.supabase.co', '')
                 );
-                apiKey = apiKeys.find(key => key.role === 'anon').api_key;
+                apiKey = apiKeys.find(key => key.name === 'anon').api_key;
             }
             this.$emit('update:settings', {
                 ...this.settings,

From 025113fbdd6c55f56d0ff32e7de375c944c16dcc Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:29:13 +0100
Subject: [PATCH 11/54] feat: forward database pass

---
 src/components/Configuration/SettingsEdit.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index c975bc7..6322c30 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -14,7 +14,12 @@
     </wwEditorFormRow>
     <wwEditorFormRow required label="Project URL">
         <template #append-label>
-            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/project/_/settings/api" target="_blank">
+            <a
+                v-if="!settings.privateData.accessToken"
+                class="ww-editor-link ml-2"
+                href="https://supabase.com/dashboard/project/_/settings/api"
+                target="_blank"
+            >
                 Find it here
             </a>
         </template>
@@ -102,6 +107,7 @@ export default {
                 privateData: {
                     ...this.settings.privateData,
                     accessToken: wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken,
+                    databasePassword: wwLib.wwPlugins.supabaseAuth.settings.privateData.databasePassword,
                 },
             });
         }

From 990dc0ae39848ea9e798590b2c8e8d207c208764 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:36:50 +0100
Subject: [PATCH 12/54] feat: add loader

---
 src/components/Configuration/SettingsEdit.vue | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 6322c30..736cb2f 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -69,6 +69,7 @@
             @update:modelValue="changeDatabasePassword"
         ></wwEditorInputRow>
     </wwEditorFormRow>
+    <wwLoader :loading="isLoading" />
 </template>
 
 <script>
@@ -81,6 +82,7 @@ export default {
     data() {
         return {
             projects: [],
+            isLoading: false,
         };
     },
     mounted() {
@@ -151,20 +153,34 @@ export default {
             this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
         },
         async fetchProjects() {
-            const { data } = await wwAxios.get(
-                `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
-                    this.$store.getters['websiteData/getDesignInfo'].id
-                }/supabase/projects`
-            );
-            this.projects = data?.data;
+            this.isLoading = true;
+            try {
+                const { data } = await wwAxios.get(
+                    `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                        this.$store.getters['websiteData/getDesignInfo'].id
+                    }/supabase/projects`
+                );
+                this.projects = data?.data;
+                this.isLoading = false;
+            } catch (error) {
+                this.isLoading = false;
+                throw error;
+            }
         },
         async fetchProject(projectId) {
-            const { data } = await wwAxios.get(
-                `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
-                    this.$store.getters['websiteData/getDesignInfo'].id
-                }/supabase/projects/${projectId}`
-            );
-            return data?.data;
+            this.isLoading = true;
+            try {
+                const { data } = await wwAxios.get(
+                    `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                        this.$store.getters['websiteData/getDesignInfo'].id
+                    }/supabase/projects/${projectId}`
+                );
+                this.isLoading = false;
+                return data?.data;
+            } catch (error) {
+                this.isLoading = false;
+                throw error;
+            }
         },
     },
 };

From f3ef6956b530f3c0ca16c70c01fddfc4ee0285b0 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:45:51 +0100
Subject: [PATCH 13/54] feat: improve db link

---
 src/components/Configuration/SettingsEdit.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 736cb2f..432e8b0 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -56,7 +56,7 @@
         <template #append-label>
             <a
                 class="ww-editor-link ml-2"
-                href="https://supabase.com/dashboard/project/_/settings/database"
+                :href="`https://supabase.com/dashboard/project/${projectRef}/settings/database`"
                 target="_blank"
             >
                 Find it here
@@ -65,6 +65,7 @@
         <wwEditorInputRow
             type="query"
             placeholder=""
+            :tooltip="`Required if you want Copilot to be able to update your database.`"
             :model-value="settings.privateData.databasePassword"
             @update:modelValue="changeDatabasePassword"
         ></wwEditorInputRow>
@@ -85,6 +86,11 @@ export default {
             isLoading: false,
         };
     },
+    computed: {
+        projectRef() {
+            return this.settings.publicData.projectUrl.replace('https://', '').replace('.supabase.co', '');
+        },
+    },
     mounted() {
         if (this.settings.privateData.accessToken) {
             this.fetchProjects();

From dc62669a3c92f73f2f6f36d07ce80e08a18845d8 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 19:59:08 +0100
Subject: [PATCH 14/54] fix: add defensive code

---
 src/components/Configuration/SettingsEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 432e8b0..f499f91 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -88,7 +88,7 @@ export default {
     },
     computed: {
         projectRef() {
-            return this.settings.publicData.projectUrl.replace('https://', '').replace('.supabase.co', '');
+            return this.settings?.publicData?.projectUrl?.replace('https://', '').replace('.supabase.co', '');
         },
     },
     mounted() {

From d518b55be2224a19990cd3f7f58d1da250ca70bb Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 20:04:35 +0100
Subject: [PATCH 15/54] feat: fetch projects after entering the key

---
 src/components/Configuration/SettingsEdit.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index f499f91..802b41c 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -148,6 +148,7 @@ export default {
                 ...this.settings,
                 privateData: { ...this.settings.privateData, accessToken },
             });
+            this.$nextTick(this.fetchProjects);
         },
         changeDatabasePassword(databasePassword) {
             this.$emit('update:settings', {

From f668e6b1ad829abd45097228765e509c283275ae Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 20:18:28 +0100
Subject: [PATCH 16/54] feat: split connection step

---
 .../Configuration/ConnectionEdit.vue          | 40 +++++++++++++++++++
 .../Configuration/ConnectionSummary.vue       | 22 ++++++++++
 src/components/Configuration/SettingsEdit.vue | 20 ----------
 src/wwPlugin.js                               |  2 +
 ww-config.js                                  |  9 +++++
 5 files changed, 73 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Configuration/ConnectionEdit.vue
 create mode 100644 src/components/Configuration/ConnectionSummary.vue

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
new file mode 100644
index 0000000..af1c9d1
--- /dev/null
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -0,0 +1,40 @@
+<template>
+    <wwEditorFormRow label="Personal Access Token">
+        <template #append-label>
+            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
+                Find it here
+            </a>
+        </template>
+        <wwEditorInputRow
+            type="query"
+            placeholder="sbp_bdd0********4f23"
+            :model-value="settings.privateData.accessToken"
+            @update:modelValue="changeAccessToken"
+        ></wwEditorInputRow>
+    </wwEditorFormRow>
+</template>
+
+<script>
+export default {
+    props: {
+        plugin: { type: Object, required: true },
+        settings: { type: Object, required: true },
+    },
+    emits: ['update:settings'],
+    data() {
+        return {
+            isKeyVisible: false,
+            projects: [],
+            isLoading: false,
+        };
+    },
+    methods: {
+        changeAccessToken(accessToken) {
+            this.$emit('update:settings', {
+                ...this.settings,
+                privateData: { ...this.settings.privateData, accessToken },
+            });
+        },
+    },
+};
+</script>
diff --git a/src/components/Configuration/ConnectionSummary.vue b/src/components/Configuration/ConnectionSummary.vue
new file mode 100644
index 0000000..2a5cdcb
--- /dev/null
+++ b/src/components/Configuration/ConnectionSummary.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="flex items-center body-2 mb-2">
+        <wwEditorIcon name="link" class="mr-2" />
+        <div class="text-ellipsis">{{ settings.publicData.accessToken ? 'Linked' : 'Not linked' }}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        settings: { type: Object, required: true },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>
diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 802b41c..18f1158 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,17 +1,4 @@
 <template>
-    <wwEditorFormRow label="Personal Access Token">
-        <template #append-label>
-            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
-                Find it here
-            </a>
-        </template>
-        <wwEditorInputRow
-            type="query"
-            placeholder="sbp_bdd0********4f23"
-            :model-value="settings.privateData.accessToken"
-            @update:modelValue="changeAccessToken"
-        ></wwEditorInputRow>
-    </wwEditorFormRow>
     <wwEditorFormRow required label="Project URL">
         <template #append-label>
             <a
@@ -143,13 +130,6 @@ export default {
             });
             this.$nextTick(this.loadInstance);
         },
-        changeAccessToken(accessToken) {
-            this.$emit('update:settings', {
-                ...this.settings,
-                privateData: { ...this.settings.privateData, accessToken },
-            });
-            this.$nextTick(this.fetchProjects);
-        },
         changeDatabasePassword(databasePassword) {
             this.$emit('update:settings', {
                 ...this.settings,
diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index dc1779a..adc28d9 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -1,4 +1,6 @@
 /* wwEditor:start */
+import './components/Configuration/ConnectionEdit.vue';
+import './components/Configuration/ConnectionSummary.vue';
 import './components/Configuration/SettingsEdit.vue';
 import './components/Configuration/SettingsSummary.vue';
 import './components/Realtime/SettingsEdit.vue';
diff --git a/ww-config.js b/ww-config.js
index b45c3a7..6323a62 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -4,6 +4,15 @@ export default {
     },
     editor: {
         settings: [
+            {
+                label: 'Connection',
+                icon: 'advanced',
+                edit: () => import('./src/components/Configuration/ConnectionEdit.vue'),
+                summary: () => import('./src/components/Configuration/ConnectionSummary.vue'),
+                getIsValid(settings) {
+                    return !!settings.privateData.accessToken;
+                },
+            },
             {
                 label: 'Configuration',
                 icon: 'advanced',

From bb90876da7c75a480c2ad7e1a77acf281e5516f9 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 10 Jan 2025 23:20:42 +0100
Subject: [PATCH 17/54] feat: split settings and fix

---
 .../Configuration/ConnectionSummary.vue       |  2 +-
 src/components/Configuration/SettingsEdit.vue | 84 +++++++++++--------
 2 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/components/Configuration/ConnectionSummary.vue b/src/components/Configuration/ConnectionSummary.vue
index 2a5cdcb..a9e6c83 100644
--- a/src/components/Configuration/ConnectionSummary.vue
+++ b/src/components/Configuration/ConnectionSummary.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex items-center body-2 mb-2">
         <wwEditorIcon name="link" class="mr-2" />
-        <div class="text-ellipsis">{{ settings.publicData.accessToken ? 'Linked' : 'Not linked' }}</div>
+        <div class="text-ellipsis">{{ settings.privateData.accessToken ? 'Linked' : 'Not linked' }}</div>
     </div>
 </template>
 
diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 18f1158..21d6fd9 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,36 +1,43 @@
 <template>
-    <wwEditorFormRow required label="Project URL">
-        <template #append-label>
-            <a
+    <div class="flex items-center">
+        <wwEditorFormRow required label="Project URL" class="w-100">
+            <template #append-label>
+                <a
+                    v-if="!settings.privateData.accessToken"
+                    class="ww-editor-link ml-2"
+                    href="https://supabase.com/dashboard/project/_/settings/api"
+                    target="_blank"
+                >
+                    Find it here
+                </a>
+            </template>
+            <wwEditorInputRow
                 v-if="!settings.privateData.accessToken"
-                class="ww-editor-link ml-2"
-                href="https://supabase.com/dashboard/project/_/settings/api"
-                target="_blank"
-            >
-                Find it here
-            </a>
-        </template>
-        <wwEditorInputRow
-            v-if="!settings.privateData.accessToken"
-            type="query"
-            placeholder="https://your-project.supabase.co"
-            :model-value="settings.publicData.projectUrl"
-            @update:modelValue="changeProjectUrl"
-        />
-        <wwEditorInputRow
-            v-else
-            type="select"
-            placeholder="https://your-project.supabase.co"
-            :model-value="settings.publicData.projectUrl"
-            :options="
-                projects.map(project => ({
-                    label: `${project.name} (${project.id}) ${project.status === 'INACTIVE' ? '#PAUSED' : ''}`,
-                    value: `https://${project.id}.supabase.co`,
-                }))
-            "
-            @update:modelValue="changeProjectUrl"
-        />
-    </wwEditorFormRow>
+                type="query"
+                placeholder="https://your-project.supabase.co"
+                :model-value="settings.publicData.projectUrl"
+                @update:modelValue="changeProjectUrl"
+            />
+
+            <wwEditorInputRow
+                v-else
+                type="select"
+                placeholder="https://your-project.supabase.co"
+                :model-value="settings.publicData.projectUrl"
+                :options="projectsOptions"
+                @update:modelValue="changeProjectUrl"
+                class="-full"
+            />
+        </wwEditorFormRow>
+        <button
+            v-if="settings.privateData.accessToken"
+            type="button"
+            class="ww-editor-button -primary -small -icon ml-2"
+            @click="refreshProjects"
+        >
+            <wwEditorIcon name="refresh" medium />
+        </button>
+    </div>
     <wwEditorInputRow
         label="Public API key"
         required
@@ -77,10 +84,16 @@ export default {
         projectRef() {
             return this.settings?.publicData?.projectUrl?.replace('https://', '').replace('.supabase.co', '');
         },
+        projectsOptions() {
+            return this.projects.map(project => ({
+                label: `${project.name} (${project.id}) ${project.status === 'INACTIVE' ? '#PAUSED' : ''}`,
+                value: `https://${project.id}.supabase.co`,
+            }));
+        },
     },
     mounted() {
         if (this.settings.privateData.accessToken) {
-            this.fetchProjects();
+            this.refreshProjects();
         }
         const isSettingsValid = this.settings.publicData.projectUrl && this.settings.publicData.apiKey;
         const isOtherPluginSettingsValid =
@@ -139,13 +152,14 @@ export default {
         loadInstance() {
             this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
         },
-        async fetchProjects() {
+        async refreshProjects() {
             this.isLoading = true;
             try {
-                const { data } = await wwAxios.get(
+                const { data } = await wwAxios.post(
                     `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
                         this.$store.getters['websiteData/getDesignInfo'].id
-                    }/supabase/projects`
+                    }/supabase/projects/list`,
+                    { accessToken: this.settings.privateData.accessToken }
                 );
                 this.projects = data?.data;
                 this.isLoading = false;

From f8010da50038beaaf609d2f28fc55999d970b847 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 13 Jan 2025 12:13:23 +0100
Subject: [PATCH 18/54] feat: add oauth

---
 src/components/Configuration/ConnectionEdit.vue   | 12 ++++++++++++
 .../Configuration/ConnectionSummary.vue           |  4 +++-
 src/wwPlugin.js                                   | 15 +++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index af1c9d1..415371f 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -1,4 +1,9 @@
 <template>
+    <button class="ww-editor-button -secondary" @click="connect">
+        <wwEditorIcon name="logos/supabase" class="ww-editor-button-icon -left" />
+        Connect Supabase
+    </button>
+    <span class="my-2">Or</span>
     <wwEditorFormRow label="Personal Access Token">
         <template #append-label>
             <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
@@ -35,6 +40,13 @@ export default {
                 privateData: { ...this.settings.privateData, accessToken },
             });
         },
+        connect() {
+            this.isLoading = true;
+            const clientId = '609eb9b4-60cb-462f-92ab-5a5eb180f666';
+            const redirectUri = window.location.origin + window.location.pathname;
+            window.localStorage.setItem('supabase_oauth', true);
+            window.location.href = `https://api.supabase.com/v1/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;
+        },
     },
 };
 </script>
diff --git a/src/components/Configuration/ConnectionSummary.vue b/src/components/Configuration/ConnectionSummary.vue
index a9e6c83..40cd390 100644
--- a/src/components/Configuration/ConnectionSummary.vue
+++ b/src/components/Configuration/ConnectionSummary.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="flex items-center body-2 mb-2">
         <wwEditorIcon name="link" class="mr-2" />
-        <div class="text-ellipsis">{{ settings.privateData.accessToken ? 'Linked' : 'Not linked' }}</div>
+        <div class="text-ellipsis" :class="{ 'content-success': accessToken }">
+            {{ settings.privateData.accessToken ? 'Account connected' : 'No account connected' }}
+        </div>
     </div>
 </template>
 
diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index adc28d9..dc51faf 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -42,6 +42,21 @@ export default {
         Plugin API
     \================================================================================================*/
     async _onLoad(settings) {
+        // check oauth in local storage
+        const isConnecting = window.localStorage.getItem('supabase_oauth');
+        // get code params from url
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        if (isConnecting && code) {
+            window.localStorage.removeItem('supabase_oauth');
+            await wwAxios.post(
+                `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                    wwLib.$store.getters['websiteData/getDesignInfo'].id
+                }/supabase/connect`,
+                { code, redirectUri: window.location.origin + window.location.pathname }
+            );
+            wwLib.wwNotification.open({ text: 'Your supabase account has been linked.', color: 'success' });
+        }
         await this.load(settings.publicData.projectUrl, settings.publicData.apiKey);
         this.subscribeTables(settings.publicData.realtimeTables || {});
     },

From 3ef210af61830bcc276f1f262ecc2b648e4c9303 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 13 Jan 2025 12:32:23 +0100
Subject: [PATCH 19/54] feat: improve oauth ui

---
 .../Configuration/ConnectionEdit.vue          | 45 ++++++++++++-------
 src/components/Configuration/SettingsEdit.vue |  2 +-
 src/wwPlugin.js                               |  2 +-
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index 415371f..ca32e81 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -1,22 +1,29 @@
 <template>
-    <button class="ww-editor-button -secondary" @click="connect">
+    <button v-if="!isOauth" class="ww-editor-button -secondary" @click="connect">
         <wwEditorIcon name="logos/supabase" class="ww-editor-button-icon -left" />
         Connect Supabase
     </button>
-    <span class="my-2">Or</span>
-    <wwEditorFormRow label="Personal Access Token">
-        <template #append-label>
-            <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
-                Find it here
-            </a>
-        </template>
-        <wwEditorInputRow
-            type="query"
-            placeholder="sbp_bdd0********4f23"
-            :model-value="settings.privateData.accessToken"
-            @update:modelValue="changeAccessToken"
-        ></wwEditorInputRow>
-    </wwEditorFormRow>
+    <span v-if="!isOauth" class="my-4 border-top-primary"></span>
+    <div class="flex items-center">
+        <wwEditorFormRow :label="isOauth ? 'Access token' : 'Personal Access Token'" class="w-100">
+            <template #append-label>
+                <a class="ww-editor-link ml-2" href="https://supabase.com/dashboard/account/tokens" target="_blank">
+                    Find it here
+                </a>
+            </template>
+            <wwEditorInputRow
+                type="query"
+                placeholder="sbp_bdd0********4f23"
+                :model-value="settings.privateData.accessToken"
+                :tooltip="`You can enter it manually or auto fill it through the connect button.`"
+                :disabled="isOauth"
+                @update:modelValue="changeAccessToken"
+            ></wwEditorInputRow>
+        </wwEditorFormRow>
+        <button v-if="isOauth" type="button" class="ww-editor-button -secondary -small -icon ml-2" @click="unlink">
+            <wwEditorIcon name="unlink" medium />
+        </button>
+    </div>
 </template>
 
 <script>
@@ -33,6 +40,11 @@ export default {
             isLoading: false,
         };
     },
+    computed: {
+        isOauth() {
+            return this.settings.privateData.accessToken?.startsWith('sbp_oauth');
+        },
+    },
     methods: {
         changeAccessToken(accessToken) {
             this.$emit('update:settings', {
@@ -47,6 +59,9 @@ export default {
             window.localStorage.setItem('supabase_oauth', true);
             window.location.href = `https://api.supabase.com/v1/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;
         },
+        unlink() {
+            this.changeAccessToken('');
+        },
     },
 };
 </script>
diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 21d6fd9..f5009c8 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -58,7 +58,7 @@
         </template>
         <wwEditorInputRow
             type="query"
-            placeholder=""
+            placeholder="Enter your database password"
             :tooltip="`Required if you want Copilot to be able to update your database.`"
             :model-value="settings.privateData.databasePassword"
             @update:modelValue="changeDatabasePassword"
diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index dc51faf..c5b75c4 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -55,7 +55,7 @@ export default {
                 }/supabase/connect`,
                 { code, redirectUri: window.location.origin + window.location.pathname }
             );
-            wwLib.wwNotification.open({ text: 'Your supabase account has been linked.', color: 'success' });
+            wwLib.wwNotification.open({ text: 'Your supabase account has been linked.', color: 'green' });
         }
         await this.load(settings.publicData.projectUrl, settings.publicData.apiKey);
         this.subscribeTables(settings.publicData.realtimeTables || {});

From 11692bd672a1f0113cfb80a976071baf7df21e38 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 13 Jan 2025 13:35:38 +0100
Subject: [PATCH 20/54] feat: add disabled state

---
 src/components/Configuration/ConnectionEdit.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index ca32e81..c042469 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -11,14 +11,13 @@
                     Find it here
                 </a>
             </template>
-            <wwEditorInputRow
+            <wwEditorInput
                 type="query"
                 placeholder="sbp_bdd0********4f23"
                 :model-value="settings.privateData.accessToken"
-                :tooltip="`You can enter it manually or auto fill it through the connect button.`"
                 :disabled="isOauth"
                 @update:modelValue="changeAccessToken"
-            ></wwEditorInputRow>
+            ></wwEditorInput>
         </wwEditorFormRow>
         <button v-if="isOauth" type="button" class="ww-editor-button -secondary -small -icon ml-2" @click="unlink">
             <wwEditorIcon name="unlink" medium />

From aeaa5ab4458d6fa7902a217847b1ee9fad6f72d5 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 13 Jan 2025 13:43:55 +0100
Subject: [PATCH 21/54] feat: improve ui for connection

---
 src/components/Configuration/ConnectionEdit.vue    | 4 ++--
 src/components/Configuration/ConnectionSummary.vue | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index c042469..5b67fd0 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -19,8 +19,8 @@
                 @update:modelValue="changeAccessToken"
             ></wwEditorInput>
         </wwEditorFormRow>
-        <button v-if="isOauth" type="button" class="ww-editor-button -secondary -small -icon ml-2" @click="unlink">
-            <wwEditorIcon name="unlink" medium />
+        <button v-if="isOauth" type="button" class="ww-editor-button -secondary -small -icon ml-2 mt-2" @click="unlink">
+            <wwEditorIcon name="unbind" medium />
         </button>
     </div>
 </template>
diff --git a/src/components/Configuration/ConnectionSummary.vue b/src/components/Configuration/ConnectionSummary.vue
index 40cd390..064fd81 100644
--- a/src/components/Configuration/ConnectionSummary.vue
+++ b/src/components/Configuration/ConnectionSummary.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex items-center body-2 mb-2">
-        <wwEditorIcon name="link" class="mr-2" />
-        <div class="text-ellipsis" :class="{ 'content-success': accessToken }">
+    <div class="flex items-center body-2 mb-2" :class="{ 'content-success': settings.privateData.accessToken }">
+        <wwEditorIcon :name="settings.privateData.accessToken ? 'bind' : 'unbind'" class="mr-2" />
+        <div class="text-ellipsis">
             {{ settings.privateData.accessToken ? 'Account connected' : 'No account connected' }}
         </div>
     </div>

From a1ceed4907a985aada77ea2ed9b52d21bfee7393 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 13 Jan 2025 13:44:32 +0100
Subject: [PATCH 22/54] fix: type button

---
 src/components/Configuration/ConnectionEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index 5b67fd0..0f4a98d 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -1,5 +1,5 @@
 <template>
-    <button v-if="!isOauth" class="ww-editor-button -secondary" @click="connect">
+    <button v-if="!isOauth" class="ww-editor-button -secondary" @click="connect" type="button">
         <wwEditorIcon name="logos/supabase" class="ww-editor-button-icon -left" />
         Connect Supabase
     </button>

From 459eb90888dd5bf30bc0002e48d9dd03ab55379e Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 12:40:23 +0100
Subject: [PATCH 23/54] feat: implement new settings and sync

---
 .../Configuration/ConnectionEdit.vue          |  8 ++
 src/components/Configuration/SettingsEdit.vue | 78 ++++++++++++-------
 .../Configuration/SettingsSummary.vue         |  2 +-
 src/wwPlugin.js                               | 13 ++++
 ww-config.js                                  |  9 ++-
 5 files changed, 78 insertions(+), 32 deletions(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index 0f4a98d..c76c997 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -44,6 +44,14 @@ export default {
             return this.settings.privateData.accessToken?.startsWith('sbp_oauth');
         },
     },
+    mounted() {
+        if (
+            !this.settings.privateData.accessToken &&
+            wwLib.wwPlugins?.supabaseAuth?.settings?.privateData?.accessToken
+        ) {
+            this.changeAccessToken(wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken);
+        }
+    },
     methods: {
         changeAccessToken(accessToken) {
             this.$emit('update:settings', {
diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index f5009c8..53b0ddb 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,26 +1,14 @@
 <template>
-    <div class="flex items-center">
-        <wwEditorFormRow required label="Project URL" class="w-100">
-            <template #append-label>
-                <a
-                    v-if="!settings.privateData.accessToken"
-                    class="ww-editor-link ml-2"
-                    href="https://supabase.com/dashboard/project/_/settings/api"
-                    target="_blank"
-                >
-                    Find it here
-                </a>
-            </template>
-            <wwEditorInputRow
+    <div class="flex items-center" v-if="settings.privateData.accessToken">
+        <wwEditorFormRow required label="Project" class="w-100">
+            <wwEditorInput
                 v-if="!settings.privateData.accessToken"
                 type="query"
                 placeholder="https://your-project.supabase.co"
                 :model-value="settings.publicData.projectUrl"
                 @update:modelValue="changeProjectUrl"
             />
-
-            <wwEditorInputRow
-                v-else
+            <wwEditorInput
                 type="select"
                 placeholder="https://your-project.supabase.co"
                 :model-value="settings.publicData.projectUrl"
@@ -38,14 +26,42 @@
             <wwEditorIcon name="refresh" medium />
         </button>
     </div>
+    <wwEditorInputRow
+        label="Project URL"
+        type="query"
+        placeholder="https://your-project.supabase.co"
+        :disabled="settings.privateData.accessToken"
+        :model-value="settings.publicData.projectUrl"
+        @update:modelValue="changeProjectUrl"
+    />
     <wwEditorInputRow
         label="Public API key"
         required
         type="query"
         placeholder="ey********"
+        :disabled="settings.privateData.accessToken"
         :model-value="settings.publicData.apiKey"
         @update:modelValue="changeApiKey"
     />
+    <wwEditorFormRow label="Service role key">
+        <div class="flex items-center">
+            <wwEditorInputText
+                :type="isKeyVisible ? 'text' : 'password'"
+                placeholder="ey********"
+                :model-value="settings.privateData.apiKey"
+                :style="{ '-webkit-text-security': isKeyVisible ? 'none' : 'disc' }"
+                large
+                @update:modelValue="changePrivateApiKey"
+                class="w-full"
+            />
+            <wwEditorQuestionMark
+                tooltip-position="top-left"
+                forced-content="Required if you want to manage your users and roles from the Editor or restrict access to a page for a specific role."
+                class="ml-2"
+                :class="{ 'text-yellow-500': !settings.privateData.apiKey }"
+            />
+        </div>
+    </wwEditorFormRow>
     <wwEditorFormRow label="Database password">
         <template #append-label>
             <a
@@ -56,13 +72,19 @@
                 Find it here
             </a>
         </template>
-        <wwEditorInputRow
-            type="query"
-            placeholder="Enter your database password"
-            :tooltip="`Required if you want Copilot to be able to update your database.`"
-            :model-value="settings.privateData.databasePassword"
-            @update:modelValue="changeDatabasePassword"
-        ></wwEditorInputRow>
+        <div class="flex items-center">
+            <wwEditorInputText
+                type="password"
+                placeholder="**********"
+                :style="{ '-webkit-text-security': 'disc' }"
+                large
+                :tooltip="`Required if you want Copilot to be able to update your database.`"
+                :disabled="settings.privateData.accessToken"
+                :model-value="settings.privateData.databasePassword"
+                @update:modelValue="changeDatabasePassword"
+                class="w-full"
+            />
+        </div>
     </wwEditorFormRow>
     <wwLoader :loading="isLoading" />
 </template>
@@ -95,7 +117,8 @@ export default {
         if (this.settings.privateData.accessToken) {
             this.refreshProjects();
         }
-        const isSettingsValid = this.settings.publicData.projectUrl && this.settings.publicData.apiKey;
+        const isSettingsValid =
+            this.settings.publicData.projectUrl && this.settings.publicData.apiKey && this.settings.privateData.apiKey;
         const isOtherPluginSettingsValid =
             wwLib.wwPlugins.supabaseAuth &&
             wwLib.wwPlugins.supabaseAuth.settings.publicData.projectUrl &&
@@ -114,6 +137,7 @@ export default {
                 },
                 privateData: {
                     ...this.settings.privateData,
+                    apiKey: wwLib.wwPlugins.supabaseAuth.settings.privateData.apiKey,
                     accessToken: wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken,
                     databasePassword: wwLib.wwPlugins.supabaseAuth.settings.privateData.databasePassword,
                 },
@@ -133,15 +157,12 @@ export default {
                 ...this.settings,
                 publicData: { ...this.settings.publicData, projectUrl, apiKey },
             });
-
-            this.$nextTick(this.loadInstance);
         },
         changeApiKey(apiKey) {
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: { ...this.settings.publicData, apiKey },
             });
-            this.$nextTick(this.loadInstance);
         },
         changeDatabasePassword(databasePassword) {
             this.$emit('update:settings', {
@@ -149,9 +170,6 @@ export default {
                 privateData: { ...this.settings.privateData, databasePassword },
             });
         },
-        loadInstance() {
-            this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
-        },
         async refreshProjects() {
             this.isLoading = true;
             try {
diff --git a/src/components/Configuration/SettingsSummary.vue b/src/components/Configuration/SettingsSummary.vue
index bfd532a..495e1b3 100644
--- a/src/components/Configuration/SettingsSummary.vue
+++ b/src/components/Configuration/SettingsSummary.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center body-2 mb-2">
-        <wwEditorIcon name="link" class="mr-2" />
+        <wwEditorIcon name="database" class="mr-2" />
         <div class="text-ellipsis">{{ settings.publicData.projectUrl }}</div>
     </div>
     <div class="flex items-center body-2">
diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index c5b75c4..f678b7a 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -69,6 +69,19 @@ export default {
             this.subscribeTables(wwLib.wwPlugins.supabase.settings.publicData.realtimeTables || {});
         }
     },
+    async syncSettings(settings) {
+        await wwAxios.post(
+            `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                wwLib.$store.getters['websiteData/getDesignInfo'].id
+            }/supabase/sync`,
+            { source: 'supabase', settings }
+        );
+    },
+    async onSave(settings) {
+        await this.syncSettings(settings);
+        await this.load(settings.publicData.projectUrl, settings.publicData.apiKey);
+        this.subscribeTables(settings.publicData.realtimeTables || {});
+    },
     /*=============================================m_ÔÔ_m=============================================\
         Collection API
     \================================================================================================*/
diff --git a/ww-config.js b/ww-config.js
index 6323a62..16a2282 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -12,6 +12,7 @@ export default {
                 getIsValid(settings) {
                     return !!settings.privateData.accessToken;
                 },
+                onSave: 'onSave',
             },
             {
                 label: 'Configuration',
@@ -19,8 +20,14 @@ export default {
                 edit: () => import('./src/components/Configuration/SettingsEdit.vue'),
                 summary: () => import('./src/components/Configuration/SettingsSummary.vue'),
                 getIsValid(settings) {
-                    return !!settings.publicData.projectUrl && !!settings.publicData.apiKey;
+                    return (
+                        !!settings.publicData.projectUrl &&
+                        !!settings.publicData.apiKey &&
+                        !!settings.privateData.apiKey &&
+                        !!settings.privateData.databasePassword
+                    );
                 },
+                onSave: 'onSave',
             },
             {
                 label: 'Realtime collections',

From d3da4f9fa8195fe74d2a43a1aec794b6cb11c699 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 12:50:16 +0100
Subject: [PATCH 24/54] feat: add error in edge function

---
 src/wwPlugin.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index f678b7a..2d0e03b 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -348,13 +348,27 @@ export default {
         });
 
         if (error instanceof FunctionsHttpError) {
-            throw new Error('Function returned an error with status code ' + error.context.status, { cause: error });
+            throw new Error('Function returned an error with status code ' + error.context.status, {
+                status: error?.context?.status,
+                data,
+                cause: error,
+            });
         } else if (error instanceof FunctionsRelayError) {
-            throw new Error('Relay error: ' + error.message, { cause: error });
+            throw new Error('Relay error: ' + error.message, {
+                status: error?.context?.status,
+                data,
+                cause: error,
+                data,
+            });
         } else if (error instanceof FunctionsFetchError) {
-            throw new Error('Fetch error: ' + error.message, { cause: error });
+            throw new Error('Fetch error: ' + error.message, {
+                status: error?.context?.status,
+                data,
+                cause: error,
+                data,
+            });
         } else if (error) {
-            throw new Error(error.message, { cause: error, data });
+            throw new Error(error.message, { status: error?.context?.status, data, cause: error });
         }
 
         try {

From 03c06b1fa2ec20a7c9aef87637ae8ce2219c7141 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 13:53:06 +0100
Subject: [PATCH 25/54] feat: add required

---
 src/components/Configuration/SettingsEdit.vue | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 53b0ddb..58b2be7 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -43,16 +43,17 @@
         :model-value="settings.publicData.apiKey"
         @update:modelValue="changeApiKey"
     />
-    <wwEditorFormRow label="Service role key">
+    <wwEditorFormRow label="Service role key" required>
         <div class="flex items-center">
             <wwEditorInputText
-                :type="isKeyVisible ? 'text' : 'password'"
+                type="password"
                 placeholder="ey********"
-                :model-value="settings.privateData.apiKey"
-                :style="{ '-webkit-text-security': isKeyVisible ? 'none' : 'disc' }"
                 large
-                @update:modelValue="changePrivateApiKey"
                 class="w-full"
+                :style="{ '-webkit-text-security': 'disc' }"
+                :disabled="settings.privateData.accessToken"
+                :model-value="settings.privateData.apiKey"
+                @update:modelValue="changePrivateApiKey"
             />
             <wwEditorQuestionMark
                 tooltip-position="top-left"
@@ -62,7 +63,7 @@
             />
         </div>
     </wwEditorFormRow>
-    <wwEditorFormRow label="Database password">
+    <wwEditorFormRow label="Database password" required>
         <template #append-label>
             <a
                 class="ww-editor-link ml-2"
@@ -79,7 +80,6 @@
                 :style="{ '-webkit-text-security': 'disc' }"
                 large
                 :tooltip="`Required if you want Copilot to be able to update your database.`"
-                :disabled="settings.privateData.accessToken"
                 :model-value="settings.privateData.databasePassword"
                 @update:modelValue="changeDatabasePassword"
                 class="w-full"
@@ -164,6 +164,12 @@ export default {
                 publicData: { ...this.settings.publicData, apiKey },
             });
         },
+        changePrivateApiKey(apiKey) {
+            this.$emit('update:settings', {
+                ...this.settings,
+                privateData: { ...this.settings.privateData, apiKey },
+            });
+        },
         changeDatabasePassword(databasePassword) {
             this.$emit('update:settings', {
                 ...this.settings,

From 34dfc6bb6e458602ec9c6d830edf2a35bbaeae97 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 13:56:05 +0100
Subject: [PATCH 26/54] fix: service role key in supabase plugin

---
 src/components/Configuration/SettingsEdit.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 58b2be7..193f1b9 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -156,6 +156,7 @@ export default {
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: { ...this.settings.publicData, projectUrl, apiKey },
+                privateData: { ...this.settings.privateData, apiKey: this.settings.privateData.apiKey },
             });
         },
         changeApiKey(apiKey) {

From 1d6409ed4077a68242255fe83e679acd7e2eb3b2 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 14:52:36 +0100
Subject: [PATCH 27/54] fix: private key missing

---
 src/components/Configuration/SettingsEdit.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 193f1b9..7aac18f 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -147,16 +147,18 @@ export default {
     methods: {
         async changeProjectUrl(projectUrl) {
             let apiKey = this.settings.publicData.apiKey;
+            let privateApiKey = this.settings.privateData.apiKey;
             if (this.settings.privateData.accessToken) {
                 const { apiKeys } = await this.fetchProject(
                     projectUrl.replace('https://', '').replace('.supabase.co', '')
                 );
                 apiKey = apiKeys.find(key => key.name === 'anon').api_key;
+                privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
             }
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: { ...this.settings.publicData, projectUrl, apiKey },
-                privateData: { ...this.settings.privateData, apiKey: this.settings.privateData.apiKey },
+                privateData: { ...this.settings.privateData, apiKey: privateApiKey },
             });
         },
         changeApiKey(apiKey) {

From 11d99d7593ca329393cc0aa9961e96fce230b2a8 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 15:06:32 +0100
Subject: [PATCH 28/54] feat: improve summary

---
 src/components/Configuration/SettingsEdit.vue    | 2 +-
 src/components/Configuration/SettingsSummary.vue | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 7aac18f..8c5b589 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -76,7 +76,7 @@
         <div class="flex items-center">
             <wwEditorInputText
                 type="password"
-                placeholder="**********"
+                placeholder="Enter your database password"
                 :style="{ '-webkit-text-security': 'disc' }"
                 large
                 :tooltip="`Required if you want Copilot to be able to update your database.`"
diff --git a/src/components/Configuration/SettingsSummary.vue b/src/components/Configuration/SettingsSummary.vue
index 495e1b3..9e59607 100644
--- a/src/components/Configuration/SettingsSummary.vue
+++ b/src/components/Configuration/SettingsSummary.vue
@@ -1,12 +1,21 @@
 <template>
     <div class="flex items-center body-2 mb-2">
         <wwEditorIcon name="database" class="mr-2" />
+        <div class="mr-2 content-secondary">project</div>
         <div class="text-ellipsis">{{ settings.publicData.projectUrl }}</div>
     </div>
     <div class="flex items-center body-2">
         <wwEditorIcon name="key" class="mr-2" />
+        <div class="mr-2 content-secondary">public</div>
         <div class="text-ellipsis">{{ settings.publicData.apiKey }}</div>
     </div>
+    <div class="flex items-center body-2">
+        <wwEditorIcon name="key" class="mr-2" />
+        <div class="mr-2 content-secondary">service_role</div>
+        <div class="text-ellipsis" :class="{ 'text-dark-400': !settings.privateData.apiKey }">
+            {{ settings.privateData?.apiKey?.replace(/./g, '*') || 'No service role key provided' }}
+        </div>
+    </div>
 </template>
 
 <script>

From 7599b11513c7d36ff26de1ae51bb47dad2362b9c Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 15:19:59 +0100
Subject: [PATCH 29/54] feat: add install script

---
 src/wwPlugin.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index 2d0e03b..e5d6d3f 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -77,8 +77,18 @@ export default {
             { source: 'supabase', settings }
         );
     },
+    async install() {
+        await wwAxios.post(
+            `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                wwLib.$store.getters['websiteData/getDesignInfo'].id
+            }/supabase/install`
+        );
+    },
     async onSave(settings) {
         await this.syncSettings(settings);
+        if (settings.privateData.accessToken && settings.publicData.projectUrl) {
+            await this.install();
+        }
         await this.load(settings.publicData.projectUrl, settings.publicData.apiKey);
         this.subscribeTables(settings.publicData.realtimeTables || {});
     },

From 90db10e759c4b2aac288a87baeec14b9305e71fe Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 15:51:02 +0100
Subject: [PATCH 30/54] feat: add fetch project info onLoad

---
 src/components/Configuration/SettingsSummary.vue |  2 +-
 src/wwPlugin.js                                  | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/SettingsSummary.vue b/src/components/Configuration/SettingsSummary.vue
index 9e59607..2bb0906 100644
--- a/src/components/Configuration/SettingsSummary.vue
+++ b/src/components/Configuration/SettingsSummary.vue
@@ -4,7 +4,7 @@
         <div class="mr-2 content-secondary">project</div>
         <div class="text-ellipsis">{{ settings.publicData.projectUrl }}</div>
     </div>
-    <div class="flex items-center body-2">
+    <div class="flex items-center body-2 mb-2">
         <wwEditorIcon name="key" class="mr-2" />
         <div class="mr-2 content-secondary">public</div>
         <div class="text-ellipsis">{{ settings.publicData.apiKey }}</div>
diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index e5d6d3f..6a15ac5 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -37,11 +37,13 @@ export default {
     channels: {},
     /* wwEditor:start */
     doc: null,
+    projectInfo: null,
     /* wwEditor:end */
     /*=============================================m_ÔÔ_m=============================================\
         Plugin API
     \================================================================================================*/
     async _onLoad(settings) {
+        /* wwEditor:start */
         // check oauth in local storage
         const isConnecting = window.localStorage.getItem('supabase_oauth');
         // get code params from url
@@ -57,7 +59,9 @@ export default {
             );
             wwLib.wwNotification.open({ text: 'Your supabase account has been linked.', color: 'green' });
         }
+        /* wwEditor:end */
         await this.load(settings.publicData.projectUrl, settings.publicData.apiKey);
+        await this.fetchProjectInfo(settings.privateData.accessToken);
         this.subscribeTables(settings.publicData.realtimeTables || {});
     },
     /*  Called by supabase auth plugin
@@ -84,6 +88,16 @@ export default {
             }/supabase/install`
         );
     },
+    async fetchProjectInfo(accessToken) {
+        if (!accessToken) return;
+        const { data } = await wwAxios.get(
+            `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                this.$store.getters['websiteData/getDesignInfo'].id
+            }/supabase/schema`
+        );
+        this.projectInfo = data;
+        return data;
+    },
     async onSave(settings) {
         await this.syncSettings(settings);
         if (settings.privateData.accessToken && settings.publicData.projectUrl) {

From fc2c4b00c48ff137050babb151e21a7d04e50b77 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 15:59:10 +0100
Subject: [PATCH 31/54] fix: projectInfo load

---
 src/wwPlugin.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index 6a15ac5..b74ab71 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -61,7 +61,7 @@ export default {
         }
         /* wwEditor:end */
         await this.load(settings.publicData.projectUrl, settings.publicData.apiKey);
-        await this.fetchProjectInfo(settings.privateData.accessToken);
+        await this.fetchProjectInfo(settings.publicData.projectUrl, settings.privateData.accessToken);
         this.subscribeTables(settings.publicData.realtimeTables || {});
     },
     /*  Called by supabase auth plugin
@@ -88,14 +88,17 @@ export default {
             }/supabase/install`
         );
     },
-    async fetchProjectInfo(accessToken) {
-        if (!accessToken) return;
+    async fetchProjectInfo(
+        projectUrl = wwLib.wwPlugins.supabase.settings.publicData?.projectUrl,
+        accessToken = wwLib.wwPlugins.supabase.settings.privateData?.accessToken
+    ) {
+        if (!accessToken || !projectUrl) return;
         const { data } = await wwAxios.get(
             `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
-                this.$store.getters['websiteData/getDesignInfo'].id
+                wwLib.$store.getters['websiteData/getDesignInfo'].id
             }/supabase/schema`
         );
-        this.projectInfo = data;
+        this.projectInfo = data?.data;
         return data;
     },
     async onSave(settings) {

From f3bc38a0a7a5379aa15daed45725cad4ff07b7c1 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 16:37:17 +0100
Subject: [PATCH 32/54] fix: fetch should return data

---
 src/wwPlugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index b74ab71..7b5eab0 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -99,7 +99,7 @@ export default {
             }/supabase/schema`
         );
         this.projectInfo = data?.data;
-        return data;
+        return data?.data;
     },
     async onSave(settings) {
         await this.syncSettings(settings);

From d763792bcaa098810850230ef431248d6fe5159f Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 16:44:16 +0100
Subject: [PATCH 33/54] feat: add refresh event

---
 src/wwPlugin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index 7b5eab0..1d13daf 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -99,6 +99,7 @@ export default {
             }/supabase/schema`
         );
         this.projectInfo = data?.data;
+        wwLib.$emit('wwTopBar:supabase:refresh');
         return data?.data;
     },
     async onSave(settings) {

From 4137a4be11709ee7ef3685e0394210898638aed5 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 17:34:09 +0100
Subject: [PATCH 34/54] fix: issue with auto update

---
 src/components/Configuration/SettingsEdit.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 8c5b589..e4ce231 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -125,9 +125,6 @@ export default {
             wwLib.wwPlugins.supabaseAuth.settings.publicData.apiKey &&
             wwLib.wwPlugins.supabaseAuth.settings.privateData.apiKey;
         if (!isSettingsValid && isOtherPluginSettingsValid) {
-            this.changeProjectUrl(wwLib.wwPlugins.supabaseAuth.settings.publicData.projectUrl);
-            this.changeApiKey(wwLib.wwPlugins.supabaseAuth.settings.publicData.apiKey);
-            this.changeAccessToken(wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken);
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: {

From c31ec2d183eb3796081cfc2755a13d379670e6e9 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 22:17:05 +0100
Subject: [PATCH 35/54] feat: use new redirect uri

---
 src/components/Configuration/ConnectionEdit.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index c76c997..0b912db 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -64,7 +64,9 @@ export default {
             const clientId = '609eb9b4-60cb-462f-92ab-5a5eb180f666';
             const redirectUri = window.location.origin + window.location.pathname;
             window.localStorage.setItem('supabase_oauth', true);
-            window.location.href = `https://api.supabase.com/v1/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;
+            window.location.href = `https://api.supabase.com/v1/oauth/authorize?client_id=${clientId}&redirect_uri=${
+                wwLib.wwApiRequests._getPluginsUrl() + '/supabase/redirect'
+            }&state=${redirectUri}&response_type=code`;
         },
         unlink() {
             this.changeAccessToken('');

From 094f7d95e3ecdd46809c132e01d0f7530ce14384 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 22:22:09 +0100
Subject: [PATCH 36/54] fix: wrong redirect uri

---
 src/wwPlugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index 1d13daf..0ec16f5 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -55,7 +55,7 @@ export default {
                 `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
                     wwLib.$store.getters['websiteData/getDesignInfo'].id
                 }/supabase/connect`,
-                { code, redirectUri: window.location.origin + window.location.pathname }
+                { code, redirectUri: wwLib.wwApiRequests._getPluginsUrl() + '/supabase/redirect' }
             );
             wwLib.wwNotification.open({ text: 'Your supabase account has been linked.', color: 'green' });
         }

From 1890785750de91cf10144507d366b13d1ad8f4aa Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 23:34:54 +0100
Subject: [PATCH 37/54] feat: new endpoint for redirect uri

---
 src/components/Configuration/ConnectionEdit.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index 0b912db..d7eda1a 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -61,12 +61,16 @@ export default {
         },
         connect() {
             this.isLoading = true;
-            const clientId = '609eb9b4-60cb-462f-92ab-5a5eb180f666';
             const redirectUri = window.location.origin + window.location.pathname;
             window.localStorage.setItem('supabase_oauth', true);
-            window.location.href = `https://api.supabase.com/v1/oauth/authorize?client_id=${clientId}&redirect_uri=${
-                wwLib.wwApiRequests._getPluginsUrl() + '/supabase/redirect'
-            }&state=${redirectUri}&response_type=code`;
+            const { data } = await wwAxios.post(
+                `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                    wwLib.$store.getters['websiteData/getDesignInfo'].id
+                }/supabase/authorize`,
+                { redirectUri, oauthRedirectUri: wwLib.wwApiRequests._getPluginsUrl() + '/supabase/redirect' }
+            );
+            if (!data?.data) throw new Error ('No authorization URL returned');
+            window.location.href = data?.data;
         },
         unlink() {
             this.changeAccessToken('');

From 84f0b8245be4f3d9b05efff253890c8323c2fc87 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 15 Jan 2025 23:36:50 +0100
Subject: [PATCH 38/54] fix: async

---
 src/components/Configuration/ConnectionEdit.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
index d7eda1a..102f541 100644
--- a/src/components/Configuration/ConnectionEdit.vue
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -59,7 +59,7 @@ export default {
                 privateData: { ...this.settings.privateData, accessToken },
             });
         },
-        connect() {
+        async connect() {
             this.isLoading = true;
             const redirectUri = window.location.origin + window.location.pathname;
             window.localStorage.setItem('supabase_oauth', true);
@@ -69,7 +69,7 @@ export default {
                 }/supabase/authorize`,
                 { redirectUri, oauthRedirectUri: wwLib.wwApiRequests._getPluginsUrl() + '/supabase/redirect' }
             );
-            if (!data?.data) throw new Error ('No authorization URL returned');
+            if (!data?.data) throw new Error('No authorization URL returned');
             window.location.href = data?.data;
         },
         unlink() {

From cf4d7e11bea867720e58d99054d853aa46c22a4c Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 11:14:28 +0100
Subject: [PATCH 39/54] feat: add edge functions in project info

---
 src/wwPlugin.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index 0ec16f5..8ca5579 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -93,12 +93,18 @@ export default {
         accessToken = wwLib.wwPlugins.supabase.settings.privateData?.accessToken
     ) {
         if (!accessToken || !projectUrl) return;
-        const { data } = await wwAxios.get(
+        const { data: schemaData } = await wwAxios.get(
             `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
                 wwLib.$store.getters['websiteData/getDesignInfo'].id
             }/supabase/schema`
         );
-        this.projectInfo = data?.data;
+        const { data: edgeData } = await wwAxios.get(
+            `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                wwLib.$store.getters['websiteData/getDesignInfo'].id
+            }/supabase/edge`
+        );
+        this.projectInfo = schemaData?.data;
+        this.projectInfo.edge = edgeData?.data;
         wwLib.$emit('wwTopBar:supabase:refresh');
         return data?.data;
     },

From 90f7e45f33119a9b05a9de0b8b32a674ad749245 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 11:21:59 +0100
Subject: [PATCH 40/54] fix: wrong return

---
 src/wwPlugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index 8ca5579..a70626e 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -106,7 +106,7 @@ export default {
         this.projectInfo = schemaData?.data;
         this.projectInfo.edge = edgeData?.data;
         wwLib.$emit('wwTopBar:supabase:refresh');
-        return data?.data;
+        return this.projectInfo;
     },
     async onSave(settings) {
         await this.syncSettings(settings);

From 6ce2f239d2da610c87c4f894e0046bf73b5e3029 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 16:03:37 +0100
Subject: [PATCH 41/54] feat: add connection string

---
 src/components/Configuration/SettingsEdit.vue | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index e4ce231..2a5e659 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,14 +1,7 @@
 <template>
-    <div class="flex items-center" v-if="settings.privateData.accessToken">
-        <wwEditorFormRow required label="Project" class="w-100">
-            <wwEditorInput
-                v-if="!settings.privateData.accessToken"
-                type="query"
-                placeholder="https://your-project.supabase.co"
-                :model-value="settings.publicData.projectUrl"
-                @update:modelValue="changeProjectUrl"
-            />
-            <wwEditorInput
+    <div class="flex items-center">
+        <wwEditorFormRow v-if="settings.privateData.accessToken" required label="Project URL" class="w-100">
+            <wwEditorInputRow
                 type="select"
                 placeholder="https://your-project.supabase.co"
                 :model-value="settings.publicData.projectUrl"
@@ -20,7 +13,7 @@
         <button
             v-if="settings.privateData.accessToken"
             type="button"
-            class="ww-editor-button -primary -small -icon ml-2"
+            class="ww-editor-button -primary -small -icon ml-2 mt-1"
             @click="refreshProjects"
         >
             <wwEditorIcon name="refresh" medium />
@@ -63,6 +56,15 @@
             />
         </div>
     </wwEditorFormRow>
+    <wwEditorInputRow
+        label="Connection string"
+        required
+        type="query"
+        placeholder="postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-eu-west-3.pooler.supabase.com:6543/postgres"
+        :disabled="settings.privateData.accessToken"
+        :model-value="settings.privateData.connectionString"
+        @update:modelValue="changeConnectionString"
+    />
     <wwEditorFormRow label="Database password" required>
         <template #append-label>
             <a
@@ -137,6 +139,7 @@ export default {
                     apiKey: wwLib.wwPlugins.supabaseAuth.settings.privateData.apiKey,
                     accessToken: wwLib.wwPlugins.supabaseAuth.settings.privateData.accessToken,
                     databasePassword: wwLib.wwPlugins.supabaseAuth.settings.privateData.databasePassword,
+                    connectionString: wwLib.wwPlugins.supabaseAuth.settings.privateData.connectionString,
                 },
             });
         }
@@ -145,17 +148,23 @@ export default {
         async changeProjectUrl(projectUrl) {
             let apiKey = this.settings.publicData.apiKey;
             let privateApiKey = this.settings.privateData.apiKey;
+            let connectionString = this.settings.privateData.connectionString;
             if (this.settings.privateData.accessToken) {
-                const { apiKeys } = await this.fetchProject(
+                const { apiKeys, pgbouncer } = await this.fetchProject(
                     projectUrl.replace('https://', '').replace('.supabase.co', '')
                 );
                 apiKey = apiKeys.find(key => key.name === 'anon').api_key;
                 privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
+                connectionString = pgbouncer.connection_string;
             }
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: { ...this.settings.publicData, projectUrl, apiKey },
-                privateData: { ...this.settings.privateData, apiKey: privateApiKey },
+                privateData: {
+                    ...this.settings.privateData,
+                    apiKey: privateApiKey,
+                    connectionString: connectionString,
+                },
             });
         },
         changeApiKey(apiKey) {
@@ -170,6 +179,12 @@ export default {
                 privateData: { ...this.settings.privateData, apiKey },
             });
         },
+        changeConnectionString(connectionString) {
+            this.$emit('update:settings', {
+                ...this.settings,
+                privateData: { ...this.settings.privateData, connectionString },
+            });
+        },
         changeDatabasePassword(databasePassword) {
             this.$emit('update:settings', {
                 ...this.settings,

From 220ee0d05e1c255c86e8df691392e230a53a5265 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 19:55:37 +0100
Subject: [PATCH 42/54] feat: add project creation

---
 src/components/Configuration/SettingsEdit.vue | 280 ++++++++++++------
 1 file changed, 193 insertions(+), 87 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 2a5e659..eb64620 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,93 +1,141 @@
 <template>
-    <div class="flex items-center">
-        <wwEditorFormRow v-if="settings.privateData.accessToken" required label="Project URL" class="w-100">
-            <wwEditorInputRow
-                type="select"
-                placeholder="https://your-project.supabase.co"
-                :model-value="settings.publicData.projectUrl"
-                :options="projectsOptions"
-                @update:modelValue="changeProjectUrl"
-                class="-full"
-            />
-        </wwEditorFormRow>
-        <button
-            v-if="settings.privateData.accessToken"
-            type="button"
-            class="ww-editor-button -primary -small -icon ml-2 mt-1"
-            @click="refreshProjects"
-        >
-            <wwEditorIcon name="refresh" medium />
-        </button>
-    </div>
-    <wwEditorInputRow
-        label="Project URL"
-        type="query"
-        placeholder="https://your-project.supabase.co"
-        :disabled="settings.privateData.accessToken"
-        :model-value="settings.publicData.projectUrl"
-        @update:modelValue="changeProjectUrl"
-    />
-    <wwEditorInputRow
-        label="Public API key"
-        required
-        type="query"
-        placeholder="ey********"
-        :disabled="settings.privateData.accessToken"
-        :model-value="settings.publicData.apiKey"
-        @update:modelValue="changeApiKey"
-    />
-    <wwEditorFormRow label="Service role key" required>
-        <div class="flex items-center">
-            <wwEditorInputText
-                type="password"
-                placeholder="ey********"
-                large
-                class="w-full"
-                :style="{ '-webkit-text-security': 'disc' }"
-                :disabled="settings.privateData.accessToken"
-                :model-value="settings.privateData.apiKey"
-                @update:modelValue="changePrivateApiKey"
-            />
-            <wwEditorQuestionMark
-                tooltip-position="top-left"
-                forced-content="Required if you want to manage your users and roles from the Editor or restrict access to a page for a specific role."
-                class="ml-2"
-                :class="{ 'text-yellow-500': !settings.privateData.apiKey }"
-            />
-        </div>
+    <wwEditorFormRow class="w-100">
+        <wwEditorInputRadio
+            v-model="selectMode"
+            :choices="[
+                { label: 'Select a project', value: 'select' },
+                { label: 'Create a project', value: 'create' },
+            ]"
+        />
     </wwEditorFormRow>
-    <wwEditorInputRow
-        label="Connection string"
-        required
-        type="query"
-        placeholder="postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-eu-west-3.pooler.supabase.com:6543/postgres"
-        :disabled="settings.privateData.accessToken"
-        :model-value="settings.privateData.connectionString"
-        @update:modelValue="changeConnectionString"
-    />
-    <wwEditorFormRow label="Database password" required>
-        <template #append-label>
-            <a
-                class="ww-editor-link ml-2"
-                :href="`https://supabase.com/dashboard/project/${projectRef}/settings/database`"
-                target="_blank"
-            >
-                Find it here
-            </a>
-        </template>
-        <div class="flex items-center">
-            <wwEditorInputText
-                type="password"
-                placeholder="Enter your database password"
-                :style="{ '-webkit-text-security': 'disc' }"
-                large
-                :tooltip="`Required if you want Copilot to be able to update your database.`"
-                :model-value="settings.privateData.databasePassword"
-                @update:modelValue="changeDatabasePassword"
-                class="w-full"
-            />
+    <template v-if="selectMode === 'select'">
+        <div class="flex items-center" v-if="settings.privateData.accessToken">
+            <wwEditorFormRow required label="Project URL" class="w-100">
+                <wwEditorInput
+                    type="select"
+                    placeholder="https://your-project.supabase.co"
+                    :model-value="settings.publicData.projectUrl"
+                    :options="projectsOptions"
+                    @update:modelValue="changeProjectUrl"
+                    class="-full"
+                />
+            </wwEditorFormRow>
+            <button type="button" class="ww-editor-button -primary -small -icon ml-2 mt-1" @click="refreshProjects">
+                <wwEditorIcon name="refresh" medium />
+            </button>
         </div>
-    </wwEditorFormRow>
+        <wwEditorInputRow
+            label="Project URL"
+            type="query"
+            placeholder="https://your-project.supabase.co"
+            :disabled="settings.privateData.accessToken"
+            :model-value="settings.publicData.projectUrl"
+            @update:modelValue="changeProjectUrl"
+        />
+        <wwEditorInputRow
+            label="Public API key"
+            required
+            type="query"
+            placeholder="ey********"
+            :disabled="settings.privateData.accessToken"
+            :model-value="settings.publicData.apiKey"
+            @update:modelValue="changeApiKey"
+        />
+        <wwEditorFormRow label="Service role key" required>
+            <div class="flex items-center">
+                <wwEditorInputText
+                    type="password"
+                    placeholder="ey********"
+                    large
+                    class="w-full"
+                    :style="{ '-webkit-text-security': 'disc' }"
+                    :disabled="settings.privateData.accessToken"
+                    :model-value="settings.privateData.apiKey"
+                    @update:modelValue="changePrivateApiKey"
+                />
+                <wwEditorQuestionMark
+                    tooltip-position="top-left"
+                    forced-content="Required if you want to manage your users and roles from the Editor or restrict access to a page for a specific role."
+                    class="ml-2"
+                    :class="{ 'text-yellow-500': !settings.privateData.apiKey }"
+                />
+            </div>
+        </wwEditorFormRow>
+        <wwEditorInputRow
+            label="Connection string"
+            type="query"
+            placeholder="postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-eu-west-3.pooler.supabase.com:6543/postgres"
+            :disabled="settings.privateData.accessToken"
+            :model-value="settings.privateData.connectionString"
+            @update:modelValue="changeConnectionString"
+        />
+        <wwEditorFormRow label="Database password">
+            <template #append-label>
+                <a
+                    class="ww-editor-link ml-2"
+                    :href="`https://supabase.com/dashboard/project/${projectRef}/settings/database`"
+                    target="_blank"
+                >
+                    Find it here
+                </a>
+            </template>
+            <div class="flex items-center">
+                <wwEditorInputText
+                    type="password"
+                    placeholder="Enter your database password"
+                    :style="{ '-webkit-text-security': 'disc' }"
+                    large
+                    :tooltip="`Required if you want Copilot to be able to update your database.`"
+                    :model-value="settings.privateData.databasePassword"
+                    @update:modelValue="changeDatabasePassword"
+                    class="w-full"
+                />
+            </div>
+        </wwEditorFormRow>
+    </template>
+    <template v-if="selectMode === 'create'">
+        <wwEditorInputRow label="Project name" type="query" placeholder="My new project" v-model="newProject.name" />
+        <wwEditorInputRow
+            label="Organization"
+            type="select"
+            placeholder="us-east-1"
+            v-model="newProject.organizationId"
+            :options="[{ label: 'Orga 1', value: 'id' }]"
+        />
+        <wwEditorInputRow
+            label="Region"
+            type="select"
+            placeholder="us-east-1"
+            v-model="newProject.region"
+            :options="[
+                { label: 'us-east-1', value: 'us-east-1' },
+                { label: 'us-east-2', value: 'us-east-2' },
+                { label: 'us-west-1', value: 'us-west-1' },
+                { label: 'us-west-2', value: 'us-west-2' },
+                { label: 'ap-east-1', value: 'ap-east-1' },
+                { label: 'ap-southeast-1', value: 'ap-southeast-1' },
+                { label: 'ap-northeast-1', value: 'ap-northeast-1' },
+                { label: 'ap-northeast-2', value: 'ap-northeast-2' },
+                { label: 'ap-southeast-2', value: 'ap-southeast-2' },
+                { label: 'eu-west-1', value: 'eu-west-1' },
+                { label: 'eu-west-2', value: 'eu-west-2' },
+                { label: 'eu-west-3', value: 'eu-west-3' },
+                { label: 'eu-north-1', value: 'eu-north-1' },
+                { label: 'eu-central-1', value: 'eu-central-1' },
+                { label: 'eu-central-2', value: 'eu-central-2' },
+                { label: 'ca-central-1', value: 'ca-central-1' },
+                { label: 'ap-south-1', value: 'ap-south-1' },
+                { label: 'sa-east-1', value: 'sa-east-1' },
+            ]"
+        />
+        <wwEditorInputRow
+            label="Database password"
+            type="query"
+            placeholder="Enter a database password"
+            v-model="newProject.dbPass"
+        />
+        <button class="ww-editor-button -primary" @click="createProject">Create project</button>
+    </template>
     <wwLoader :loading="isLoading" />
 </template>
 
@@ -102,8 +150,29 @@ export default {
         return {
             projects: [],
             isLoading: false,
+            selectMode: 'select',
+            newProject: {
+                name: '',
+                region: 'us-east-1',
+                organizationId: '',
+                dbPass: '',
+            },
+            organizations: [],
         };
     },
+    watch: {
+        async selectMode(mode) {
+            if (mode === 'create') {
+                this.newProject = {
+                    name: 'WeWeb - ' + wwLib.$store.getters['websiteData/getDesignInfo'].name,
+                    region: 'us-east-1',
+                    organizationId: this.organizations[0]?.id,
+                    dbPass: wwLib.wwUtils.getUid(),
+                };
+                this.organizations = await this.fetchOrganizations();
+            }
+        },
+    },
     computed: {
         projectRef() {
             return this.settings?.publicData?.projectUrl?.replace('https://', '').replace('.supabase.co', '');
@@ -222,6 +291,43 @@ export default {
                 throw error;
             }
         },
+        async fetchOrganizations() {
+            this.isLoading = true;
+            try {
+                const { data } = await wwAxios.get(
+                    `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                        wwLib.$store.getters['websiteData/getDesignInfo'].id
+                    }/supabase/organizations`
+                );
+                this.isLoading = false;
+                return data?.data;
+            } catch (error) {
+                this.isLoading = false;
+                throw error;
+            }
+        },
+        async createProject() {
+            this.isLoading = true;
+            try {
+                const { data } = await wwAxios.post(
+                    `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                        wwLib.$store.getters['websiteData/getDesignInfo'].id
+                    }/supabase/projects`,
+                    {
+                        name: this.newProject.name,
+                        organization_id: this.newProject.organizationId,
+                        region: this.newProject.region,
+                        db_pass: this.newProject.dbPass,
+                    }
+                );
+                this.isLoading = false;
+                this.changeProjectUrl(`https://${data?.data.id}.supabase.co`);
+                this.mode = 'select';
+            } catch (error) {
+                this.isLoading = false;
+                throw error;
+            }
+        },
     },
 };
 </script>

From 2f07701ad35c3bf2f67d96d7b0adec9d198476ae Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 20:04:41 +0100
Subject: [PATCH 43/54] fix: auto select first orga

---
 src/components/Configuration/SettingsEdit.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index eb64620..60d6d87 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -100,7 +100,7 @@
             type="select"
             placeholder="us-east-1"
             v-model="newProject.organizationId"
-            :options="[{ label: 'Orga 1', value: 'id' }]"
+            :options="organizations.map(org => ({ label: org.name, value: org.id }))"
         />
         <wwEditorInputRow
             label="Region"
@@ -163,13 +163,13 @@ export default {
     watch: {
         async selectMode(mode) {
             if (mode === 'create') {
+                this.organizations = await this.fetchOrganizations();
                 this.newProject = {
                     name: 'WeWeb - ' + wwLib.$store.getters['websiteData/getDesignInfo'].name,
                     region: 'us-east-1',
                     organizationId: this.organizations[0]?.id,
                     dbPass: wwLib.wwUtils.getUid(),
                 };
-                this.organizations = await this.fetchOrganizations();
             }
         },
     },

From 30a19842f9a70089d75fbe311f57b88ceb73cae5 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 21:16:10 +0100
Subject: [PATCH 44/54] fix: better handle project creation

---
 src/components/Configuration/SettingsEdit.vue | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 60d6d87..89c7b53 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -134,9 +134,9 @@
             placeholder="Enter a database password"
             v-model="newProject.dbPass"
         />
-        <button class="ww-editor-button -primary" @click="createProject">Create project</button>
+        <button class="ww-editor-button -primary" @click="createProject" type="button">Create project</button>
     </template>
-    <wwLoader :loading="isLoading" />
+    <wwLoader :loading="isLoading || isComingUp" />
 </template>
 
 <script>
@@ -150,6 +150,7 @@ export default {
         return {
             projects: [],
             isLoading: false,
+            isComingUp: false,
             selectMode: 'select',
             newProject: {
                 name: '',
@@ -172,6 +173,17 @@ export default {
                 };
             }
         },
+        isComingUp(value, oldValue) {
+            if (!oldValue && value) {
+                let interval = setInterval(async () => {
+                    const project = await this.fetchProject();
+                    if (project.status !== 'COMING_UP') {
+                        this.isComingUp = false;
+                        clearInterval(interval);
+                    }
+                }, 5000);
+            }
+        },
     },
     computed: {
         projectRef() {
@@ -219,12 +231,15 @@ export default {
             let privateApiKey = this.settings.privateData.apiKey;
             let connectionString = this.settings.privateData.connectionString;
             if (this.settings.privateData.accessToken) {
-                const { apiKeys, pgbouncer } = await this.fetchProject(
+                const { apiKeys, pgbouncer, project } = await this.fetchProject(
                     projectUrl.replace('https://', '').replace('.supabase.co', '')
                 );
                 apiKey = apiKeys.find(key => key.name === 'anon').api_key;
                 privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
                 connectionString = pgbouncer.connection_string;
+                if (project.status === 'COMING_UP') {
+                    this.isComingUp = true;
+                }
             }
             this.$emit('update:settings', {
                 ...this.settings,

From b15cab26719fed6bff083a1a8ce6438ef29621b1 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 21:27:53 +0100
Subject: [PATCH 45/54] fix: store project url in state

---
 src/components/Configuration/SettingsEdit.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 89c7b53..f4f306c 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -176,7 +176,7 @@ export default {
         isComingUp(value, oldValue) {
             if (!oldValue && value) {
                 let interval = setInterval(async () => {
-                    const project = await this.fetchProject();
+                    const project = await this.fetchProject(value);
                     if (project.status !== 'COMING_UP') {
                         this.isComingUp = false;
                         clearInterval(interval);
@@ -238,7 +238,7 @@ export default {
                 privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
                 connectionString = pgbouncer.connection_string;
                 if (project.status === 'COMING_UP') {
-                    this.isComingUp = true;
+                    this.isComingUp = projectUrl;
                 }
             }
             this.$emit('update:settings', {

From a160ef122aa28f2def4ae6ce11b94cc4409b563b Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 21:55:59 +0100
Subject: [PATCH 46/54] fix: wait for healthty status

---
 src/components/Configuration/SettingsEdit.vue | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index f4f306c..4800f95 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -190,10 +190,15 @@ export default {
             return this.settings?.publicData?.projectUrl?.replace('https://', '').replace('.supabase.co', '');
         },
         projectsOptions() {
-            return this.projects.map(project => ({
-                label: `${project.name} (${project.id}) ${project.status === 'INACTIVE' ? '#PAUSED' : ''}`,
-                value: `https://${project.id}.supabase.co`,
-            }));
+            return (
+                this.projects
+                    .map(project => ({
+                        label: `${project.name} (${project.id}) ${project.status === 'INACTIVE' ? '#PAUSED' : ''}`,
+                        value: `https://${project.id}.supabase.co`,
+                    }))
+                    // sort paused at the end
+                    .sort((a, b) => (a.label.includes('#PAUSED') ? 1 : 0) - (b.label.includes('#PAUSED') ? 1 : 0))
+            );
         },
     },
     mounted() {
@@ -231,15 +236,12 @@ export default {
             let privateApiKey = this.settings.privateData.apiKey;
             let connectionString = this.settings.privateData.connectionString;
             if (this.settings.privateData.accessToken) {
-                const { apiKeys, pgbouncer, project } = await this.fetchProject(
+                const { apiKeys, pgbouncer } = await this.fetchProject(
                     projectUrl.replace('https://', '').replace('.supabase.co', '')
                 );
                 apiKey = apiKeys.find(key => key.name === 'anon').api_key;
                 privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
                 connectionString = pgbouncer.connection_string;
-                if (project.status === 'COMING_UP') {
-                    this.isComingUp = projectUrl;
-                }
             }
             this.$emit('update:settings', {
                 ...this.settings,
@@ -335,9 +337,20 @@ export default {
                         db_pass: this.newProject.dbPass,
                     }
                 );
-                this.isLoading = false;
-                this.changeProjectUrl(`https://${data?.data.id}.supabase.co`);
-                this.mode = 'select';
+
+                let interval = setInterval(async () => {
+                    const { data: projectsData } = await wwAxios.post(
+                        `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                            wwLib.$store.getters['websiteData/getDesignInfo'].id
+                        }/supabase/projects/list`
+                    );
+                    if (projectsData?.data.find(project => project.id === data?.data.id)?.status === 'ACTIVE_HEALTHY') {
+                        clearInterval(interval);
+                        this.isLoading = false;
+                        this.changeProjectUrl(`https://${data?.data.id}.supabase.co`);
+                        this.mode = 'select';
+                    }
+                }, 3000);
             } catch (error) {
                 this.isLoading = false;
                 throw error;

From d83610283e09601a99d77b0f4062576d2fcf7100 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 22:22:28 +0100
Subject: [PATCH 47/54] chore: test new flow

---
 src/components/Configuration/SettingsEdit.vue | 132 ++++++++++++------
 1 file changed, 87 insertions(+), 45 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 4800f95..02992d2 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,7 +1,9 @@
 <template>
     <wwEditorFormRow class="w-100">
         <wwEditorInputRadio
+            v-if="settings.privateData.accessToken"
             v-model="selectMode"
+            :disabled="isComingUp"
             :choices="[
                 { label: 'Select a project', value: 'select' },
                 { label: 'Create a project', value: 'create' },
@@ -94,49 +96,60 @@
         </wwEditorFormRow>
     </template>
     <template v-if="selectMode === 'create'">
-        <wwEditorInputRow label="Project name" type="query" placeholder="My new project" v-model="newProject.name" />
-        <wwEditorInputRow
-            label="Organization"
-            type="select"
-            placeholder="us-east-1"
-            v-model="newProject.organizationId"
-            :options="organizations.map(org => ({ label: org.name, value: org.id }))"
-        />
-        <wwEditorInputRow
-            label="Region"
-            type="select"
-            placeholder="us-east-1"
-            v-model="newProject.region"
-            :options="[
-                { label: 'us-east-1', value: 'us-east-1' },
-                { label: 'us-east-2', value: 'us-east-2' },
-                { label: 'us-west-1', value: 'us-west-1' },
-                { label: 'us-west-2', value: 'us-west-2' },
-                { label: 'ap-east-1', value: 'ap-east-1' },
-                { label: 'ap-southeast-1', value: 'ap-southeast-1' },
-                { label: 'ap-northeast-1', value: 'ap-northeast-1' },
-                { label: 'ap-northeast-2', value: 'ap-northeast-2' },
-                { label: 'ap-southeast-2', value: 'ap-southeast-2' },
-                { label: 'eu-west-1', value: 'eu-west-1' },
-                { label: 'eu-west-2', value: 'eu-west-2' },
-                { label: 'eu-west-3', value: 'eu-west-3' },
-                { label: 'eu-north-1', value: 'eu-north-1' },
-                { label: 'eu-central-1', value: 'eu-central-1' },
-                { label: 'eu-central-2', value: 'eu-central-2' },
-                { label: 'ca-central-1', value: 'ca-central-1' },
-                { label: 'ap-south-1', value: 'ap-south-1' },
-                { label: 'sa-east-1', value: 'sa-east-1' },
-            ]"
-        />
-        <wwEditorInputRow
-            label="Database password"
-            type="query"
-            placeholder="Enter a database password"
-            v-model="newProject.dbPass"
-        />
-        <button class="ww-editor-button -primary" @click="createProject" type="button">Create project</button>
+        <div v-if="isComingUp" class="body-md flex items-center">
+            <wwLoaderSmall loading class="mr-2" />
+            <div>We are preparing your database, please wait, it should take a couple of seconds</div>
+        </div>
+        <template v-else>
+            <wwEditorInputRow
+                label="Project name"
+                type="query"
+                placeholder="My new project"
+                v-model="newProject.name"
+            />
+            <wwEditorInputRow
+                label="Organization"
+                type="select"
+                placeholder="us-east-1"
+                v-model="newProject.organizationId"
+                :options="organizations.map(org => ({ label: org.name, value: org.id }))"
+            />
+            <wwEditorInputRow
+                label="Region"
+                type="select"
+                placeholder="us-east-1"
+                v-model="newProject.region"
+                :options="[
+                    { label: 'us-east-1', value: 'us-east-1' },
+                    { label: 'us-east-2', value: 'us-east-2' },
+                    { label: 'us-west-1', value: 'us-west-1' },
+                    { label: 'us-west-2', value: 'us-west-2' },
+                    { label: 'ap-east-1', value: 'ap-east-1' },
+                    { label: 'ap-southeast-1', value: 'ap-southeast-1' },
+                    { label: 'ap-northeast-1', value: 'ap-northeast-1' },
+                    { label: 'ap-northeast-2', value: 'ap-northeast-2' },
+                    { label: 'ap-southeast-2', value: 'ap-southeast-2' },
+                    { label: 'eu-west-1', value: 'eu-west-1' },
+                    { label: 'eu-west-2', value: 'eu-west-2' },
+                    { label: 'eu-west-3', value: 'eu-west-3' },
+                    { label: 'eu-north-1', value: 'eu-north-1' },
+                    { label: 'eu-central-1', value: 'eu-central-1' },
+                    { label: 'eu-central-2', value: 'eu-central-2' },
+                    { label: 'ca-central-1', value: 'ca-central-1' },
+                    { label: 'ap-south-1', value: 'ap-south-1' },
+                    { label: 'sa-east-1', value: 'sa-east-1' },
+                ]"
+            />
+            <wwEditorInputRow
+                label="Database password"
+                type="query"
+                placeholder="Enter a database password"
+                v-model="newProject.dbPass"
+            />
+            <button class="ww-editor-button -primary" @click="createProject" type="button">Create project</button>
+        </template>
     </template>
-    <wwLoader :loading="isLoading || isComingUp" />
+    <wwLoader :loading="isLoading && !isComingUp" />
 </template>
 
 <script>
@@ -326,6 +339,16 @@ export default {
         async createProject() {
             this.isLoading = true;
             try {
+                this.$emit('update:settings', {
+                    ...this.settings,
+                    publicData: { ...this.settings.publicData, projectUrl: '', apiKey: '' },
+                    privateData: {
+                        ...this.settings.privateData,
+                        apiKey: '',
+                        connectionString: '',
+                        databasePassword: '',
+                    },
+                });
                 const { data } = await wwAxios.post(
                     `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
                         wwLib.$store.getters['websiteData/getDesignInfo'].id
@@ -337,6 +360,8 @@ export default {
                         db_pass: this.newProject.dbPass,
                     }
                 );
+                this.isLoading = false;
+                this.isComingUp = true;
 
                 let interval = setInterval(async () => {
                     const { data: projectsData } = await wwAxios.post(
@@ -346,11 +371,28 @@ export default {
                     );
                     if (projectsData?.data.find(project => project.id === data?.data.id)?.status === 'ACTIVE_HEALTHY') {
                         clearInterval(interval);
-                        this.isLoading = false;
-                        this.changeProjectUrl(`https://${data?.data.id}.supabase.co`);
+
+                        const { apiKeys, pgbouncer } = await this.fetchProject(
+                            projectUrl.replace('https://', '').replace('.supabase.co', '')
+                        );
+                        const apiKey = apiKeys.find(key => key.name === 'anon').api_key;
+                        const privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
+                        const connectionString = pgbouncer.connection_string;
+                        const databasePassword = this.newProject.dbPass;
+                        this.$emit('update:settings', {
+                            ...this.settings,
+                            publicData: { ...this.settings.publicData, projectUrl, apiKey },
+                            privateData: {
+                                ...this.settings.privateData,
+                                apiKey: privateApiKey,
+                                connectionString: connectionString,
+                                databasePassword,
+                            },
+                        });
+                        this.isComingUp = false;
                         this.mode = 'select';
                     }
-                }, 3000);
+                }, 5000);
             } catch (error) {
                 this.isLoading = false;
                 throw error;

From 739bdd44d7eb9e4d5000bebb5850f410686e9fae Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 22:29:30 +0100
Subject: [PATCH 48/54] fix: something

---
 src/components/Configuration/SettingsEdit.vue | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 02992d2..eaecc7f 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -186,17 +186,6 @@ export default {
                 };
             }
         },
-        isComingUp(value, oldValue) {
-            if (!oldValue && value) {
-                let interval = setInterval(async () => {
-                    const project = await this.fetchProject(value);
-                    if (project.status !== 'COMING_UP') {
-                        this.isComingUp = false;
-                        clearInterval(interval);
-                    }
-                }, 5000);
-            }
-        },
     },
     computed: {
         projectRef() {
@@ -362,19 +351,15 @@ export default {
                 );
                 this.isLoading = false;
                 this.isComingUp = true;
+                const projectId = data?.data.id;
+                const projectUrl = `https://${data?.data.id}.supabase.co`;
 
                 let interval = setInterval(async () => {
-                    const { data: projectsData } = await wwAxios.post(
-                        `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
-                            wwLib.$store.getters['websiteData/getDesignInfo'].id
-                        }/supabase/projects/list`
-                    );
-                    if (projectsData?.data.find(project => project.id === data?.data.id)?.status === 'ACTIVE_HEALTHY') {
+                    await this.refreshProjects();
+                    if (this.projects.find(project => project.id === data?.data.id)?.status === 'ACTIVE_HEALTHY') {
                         clearInterval(interval);
 
-                        const { apiKeys, pgbouncer } = await this.fetchProject(
-                            projectUrl.replace('https://', '').replace('.supabase.co', '')
-                        );
+                        const { apiKeys, pgbouncer } = await this.fetchProject(projectId);
                         const apiKey = apiKeys.find(key => key.name === 'anon').api_key;
                         const privateApiKey = apiKeys.find(key => key.name === 'service_role').api_key;
                         const connectionString = pgbouncer.connection_string;
@@ -390,7 +375,7 @@ export default {
                             },
                         });
                         this.isComingUp = false;
-                        this.mode = 'select';
+                        this.selectMode = 'select';
                     }
                 }, 5000);
             } catch (error) {

From 36514fca58f8084ed2d26c8df0ca59aa2ef23f7d Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Thu, 16 Jan 2025 22:53:16 +0100
Subject: [PATCH 49/54] chore: update design

---
 src/components/Configuration/SettingsEdit.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index eaecc7f..8146a57 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -96,9 +96,9 @@
         </wwEditorFormRow>
     </template>
     <template v-if="selectMode === 'create'">
-        <div v-if="isComingUp" class="body-md flex items-center">
+        <div v-if="isComingUp" class="body-md flex items-center p-2">
             <wwLoaderSmall loading class="mr-2" />
-            <div>We are preparing your database, please wait, it should take a couple of seconds</div>
+            <div>We're now preparing your database. Please wait a few moments, it may take up to 1 minute.</div>
         </div>
         <template v-else>
             <wwEditorInputRow

From 22c3b61cb68c616f723e31cd6bd4eba94ce0dfec Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 17 Jan 2025 12:30:02 +0100
Subject: [PATCH 50/54] feat: add advanced settings

---
 src/components/Configuration/SettingsEdit.vue | 163 ++++++++++--------
 ww-config.js                                  |   3 +-
 2 files changed, 88 insertions(+), 78 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index 8146a57..ea5c007 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -26,74 +26,75 @@
                 <wwEditorIcon name="refresh" medium />
             </button>
         </div>
-        <wwEditorInputRow
-            label="Project URL"
-            type="query"
-            placeholder="https://your-project.supabase.co"
-            :disabled="settings.privateData.accessToken"
-            :model-value="settings.publicData.projectUrl"
-            @update:modelValue="changeProjectUrl"
-        />
-        <wwEditorInputRow
-            label="Public API key"
-            required
-            type="query"
-            placeholder="ey********"
-            :disabled="settings.privateData.accessToken"
-            :model-value="settings.publicData.apiKey"
-            @update:modelValue="changeApiKey"
-        />
-        <wwEditorFormRow label="Service role key" required>
-            <div class="flex items-center">
-                <wwEditorInputText
-                    type="password"
-                    placeholder="ey********"
-                    large
-                    class="w-full"
-                    :style="{ '-webkit-text-security': 'disc' }"
-                    :disabled="settings.privateData.accessToken"
-                    :model-value="settings.privateData.apiKey"
-                    @update:modelValue="changePrivateApiKey"
-                />
-                <wwEditorQuestionMark
-                    tooltip-position="top-left"
-                    forced-content="Required if you want to manage your users and roles from the Editor or restrict access to a page for a specific role."
-                    class="ml-2"
-                    :class="{ 'text-yellow-500': !settings.privateData.apiKey }"
-                />
-            </div>
-        </wwEditorFormRow>
-        <wwEditorInputRow
-            label="Connection string"
-            type="query"
-            placeholder="postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-eu-west-3.pooler.supabase.com:6543/postgres"
-            :disabled="settings.privateData.accessToken"
-            :model-value="settings.privateData.connectionString"
-            @update:modelValue="changeConnectionString"
-        />
-        <wwEditorFormRow label="Database password">
-            <template #append-label>
-                <a
-                    class="ww-editor-link ml-2"
-                    :href="`https://supabase.com/dashboard/project/${projectRef}/settings/database`"
-                    target="_blank"
-                >
-                    Find it here
-                </a>
-            </template>
-            <div class="flex items-center">
-                <wwEditorInputText
-                    type="password"
-                    placeholder="Enter your database password"
-                    :style="{ '-webkit-text-security': 'disc' }"
-                    large
-                    :tooltip="`Required if you want Copilot to be able to update your database.`"
-                    :model-value="settings.privateData.databasePassword"
-                    @update:modelValue="changeDatabasePassword"
-                    class="w-full"
-                />
-            </div>
-        </wwEditorFormRow>
+        <button @click="showSettings = !showSettings" class="ww-editor-button -primary -small mb-2" type="button">
+            {{ showSettings ? 'Close' : 'Edit' }} advanced settings
+        </button>
+        <template v-if="showSettings">
+            <wwEditorInputRow
+                label="Project URL"
+                type="query"
+                placeholder="https://your-project.supabase.co"
+                :model-value="settings.publicData.projectUrl"
+                @update:modelValue="changeProjectUrl"
+            />
+            <wwEditorInputRow
+                label="Public API key"
+                required
+                type="query"
+                placeholder="ey********"
+                :model-value="settings.publicData.apiKey"
+                @update:modelValue="changeApiKey"
+            />
+            <wwEditorFormRow label="Service role key" required>
+                <div class="flex items-center">
+                    <wwEditorInputText
+                        type="password"
+                        placeholder="ey********"
+                        large
+                        class="w-full"
+                        :style="{ '-webkit-text-security': 'disc' }"
+                        :model-value="settings.privateData.apiKey"
+                        @update:modelValue="changePrivateApiKey"
+                    />
+                    <wwEditorQuestionMark
+                        tooltip-position="top-left"
+                        forced-content="Required if you want to manage your users and roles from the Editor or restrict access to a page for a specific role."
+                        class="ml-2"
+                        :class="{ 'text-yellow-500': !settings.privateData.apiKey }"
+                    />
+                </div>
+            </wwEditorFormRow>
+            <wwEditorInputRow
+                label="Connection string"
+                type="query"
+                placeholder="postgres://postgres.[YOUR-PROJECT-REF]:[YOUR-PASSWORD]@aws-0-eu-west-3.pooler.supabase.com:6543/postgres"
+                :model-value="settings.privateData.connectionString"
+                @update:modelValue="changeConnectionString"
+            />
+            <wwEditorFormRow label="Database password">
+                <template #append-label>
+                    <a
+                        class="ww-editor-link ml-2"
+                        :href="`https://supabase.com/dashboard/project/${projectRef}/settings/database`"
+                        target="_blank"
+                    >
+                        Find it here
+                    </a>
+                </template>
+                <div class="flex items-center">
+                    <wwEditorInputText
+                        type="password"
+                        placeholder="Enter your database password"
+                        :style="{ '-webkit-text-security': 'disc' }"
+                        large
+                        :tooltip="`Required if you want Copilot to be able to update your database.`"
+                        :model-value="settings.privateData.databasePassword"
+                        @update:modelValue="changeDatabasePassword"
+                        class="w-full"
+                    />
+                </div>
+            </wwEditorFormRow>
+        </template>
     </template>
     <template v-if="selectMode === 'create'">
         <div v-if="isComingUp" class="body-md flex items-center p-2">
@@ -105,19 +106,22 @@
                 label="Project name"
                 type="query"
                 placeholder="My new project"
+                required
                 v-model="newProject.name"
             />
             <wwEditorInputRow
                 label="Organization"
                 type="select"
-                placeholder="us-east-1"
+                placeholder="Select an organization"
+                required
                 v-model="newProject.organizationId"
                 :options="organizations.map(org => ({ label: org.name, value: org.id }))"
             />
             <wwEditorInputRow
-                label="Region"
+                label="Hosting region"
                 type="select"
                 placeholder="us-east-1"
+                required
                 v-model="newProject.region"
                 :options="[
                     { label: 'us-east-1', value: 'us-east-1' },
@@ -140,12 +144,16 @@
                     { label: 'sa-east-1', value: 'sa-east-1' },
                 ]"
             />
-            <wwEditorInputRow
-                label="Database password"
-                type="query"
-                placeholder="Enter a database password"
-                v-model="newProject.dbPass"
-            />
+            <wwEditorFormRow label="Database password" required>
+                <wwEditorInputText
+                    type="password"
+                    placeholder="Enter your database password"
+                    :style="{ '-webkit-text-security': 'disc' }"
+                    large
+                    v-model="newProject.dbPass"
+                    class="w-full"
+                />
+            </wwEditorFormRow>
             <button class="ww-editor-button -primary" @click="createProject" type="button">Create project</button>
         </template>
     </template>
@@ -164,6 +172,7 @@ export default {
             projects: [],
             isLoading: false,
             isComingUp: false,
+            showSettings: false,
             selectMode: 'select',
             newProject: {
                 name: '',
@@ -206,6 +215,8 @@ export default {
     mounted() {
         if (this.settings.privateData.accessToken) {
             this.refreshProjects();
+        } else {
+            this.showSettings = true;
         }
         const isSettingsValid =
             this.settings.publicData.projectUrl && this.settings.publicData.apiKey && this.settings.privateData.apiKey;
diff --git a/ww-config.js b/ww-config.js
index 16a2282..7192792 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -23,8 +23,7 @@ export default {
                     return (
                         !!settings.publicData.projectUrl &&
                         !!settings.publicData.apiKey &&
-                        !!settings.privateData.apiKey &&
-                        !!settings.privateData.databasePassword
+                        !!settings.privateData.apiKey
                     );
                 },
                 onSave: 'onSave',

From d124acab5949d374721ce85488faf3fd8d0e24b3 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Fri, 17 Jan 2025 12:43:13 +0100
Subject: [PATCH 51/54] feat: improve db pass

---
 src/components/Configuration/SettingsEdit.vue | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Configuration/SettingsEdit.vue b/src/components/Configuration/SettingsEdit.vue
index ea5c007..e19ceed 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -145,14 +145,23 @@
                 ]"
             />
             <wwEditorFormRow label="Database password" required>
-                <wwEditorInputText
-                    type="password"
-                    placeholder="Enter your database password"
-                    :style="{ '-webkit-text-security': 'disc' }"
-                    large
-                    v-model="newProject.dbPass"
-                    class="w-full"
-                />
+                <div class="flex items-center">
+                    <wwEditorInputText
+                        :type="showDbPass ? 'text' : 'password'"
+                        placeholder="Enter your database password"
+                        :style="{ '-webkit-text-security': showDbPass ? 'none' : 'disc' }"
+                        large
+                        v-model="newProject.dbPass"
+                        class="w-full"
+                    />
+                    <button
+                        type="button"
+                        class="ww-editor-button -secondary -small -icon ml-2"
+                        @click="showDbPass = !showDbPass"
+                    >
+                        <wwEditorIcon :name="showDbPass ? '16/eye' : '16/eye-off'" medium />
+                    </button>
+                </div>
             </wwEditorFormRow>
             <button class="ww-editor-button -primary" @click="createProject" type="button">Create project</button>
         </template>
@@ -173,6 +182,7 @@ export default {
             isLoading: false,
             isComingUp: false,
             showSettings: false,
+            showDbPass: false,
             selectMode: 'select',
             newProject: {
                 name: '',

From f95e86e68d561862b4e4189959fe63c2f0f92572 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Mon, 20 Jan 2025 11:38:01 +0100
Subject: [PATCH 52/54] chore: improve errors

---
 src/wwPlugin.js | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index a70626e..e2f864e 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -383,26 +383,20 @@ export default {
 
         if (error instanceof FunctionsHttpError) {
             throw new Error('Function returned an error with status code ' + error.context.status, {
-                status: error?.context?.status,
-                data,
-                cause: error,
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
             });
         } else if (error instanceof FunctionsRelayError) {
             throw new Error('Relay error: ' + error.message, {
-                status: error?.context?.status,
-                data,
-                cause: error,
-                data,
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
             });
         } else if (error instanceof FunctionsFetchError) {
             throw new Error('Fetch error: ' + error.message, {
-                status: error?.context?.status,
-                data,
-                cause: error,
-                data,
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
             });
         } else if (error) {
-            throw new Error(error.message, { status: error?.context?.status, data, cause: error });
+            throw new Error(error.message, {
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
+            });
         }
 
         try {

From 78a159a73a89465b88fc10de2aff4982cb0712b6 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 29 Jan 2025 12:44:44 +0100
Subject: [PATCH 53/54] fix: only send body for non get invokation

---
 src/wwPlugin.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index e2f864e..22bb6fd 100644
--- a/src/wwPlugin.js
+++ b/src/wwPlugin.js
@@ -374,7 +374,7 @@ export default {
             ? query.reduce((result, item) => `${result}${item.key}=${item.value}&`, '?')
             : '';
         const { data, error } = await this.instance.functions.invoke(functionName + queryString, {
-            body,
+            body: method === 'GET' ? undefined : body,
             headers: Array.isArray(headers)
                 ? headers.reduce((result, item) => ({ ...result, [item.key]: item.value }), {})
                 : headers,
@@ -383,19 +383,19 @@ export default {
 
         if (error instanceof FunctionsHttpError) {
             throw new Error('Function returned an error with status code ' + error.context.status, {
-                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json?.() },
             });
         } else if (error instanceof FunctionsRelayError) {
             throw new Error('Relay error: ' + error.message, {
-                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json?.() },
             });
         } else if (error instanceof FunctionsFetchError) {
             throw new Error('Fetch error: ' + error.message, {
-                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json?.() },
             });
         } else if (error) {
             throw new Error(error.message, {
-                cause: { ...error, status: error?.context?.status, data: await error?.context?.json() },
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json?.() },
             });
         }
 

From b47e601c9a670ad0246e388ad9fff574a08a8057 Mon Sep 17 00:00:00 2001
From: Alexis JC <alexisjc.dev@gmail.com>
Date: Wed, 29 Jan 2025 12:45:24 +0100
Subject: [PATCH 54/54] feat: hide body for get method

---
 src/components/Functions/InvokeEdge.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Functions/InvokeEdge.vue b/src/components/Functions/InvokeEdge.vue
index f3f0e76..624ee18 100644
--- a/src/components/Functions/InvokeEdge.vue
+++ b/src/components/Functions/InvokeEdge.vue
@@ -87,6 +87,7 @@
         </template>
     </wwEditorInputRow>
     <wwEditorInputRow
+        v-if="method !== 'GET'"
         label="Body"
         type="code"
         bindable