diff --git a/src/components/Configuration/ConnectionEdit.vue b/src/components/Configuration/ConnectionEdit.vue
new file mode 100644
index 0000000..102f541
--- /dev/null
+++ b/src/components/Configuration/ConnectionEdit.vue
@@ -0,0 +1,80 @@
+<template>
+    <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>
+    <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>
+            <wwEditorInput
+                type="query"
+                placeholder="sbp_bdd0********4f23"
+                :model-value="settings.privateData.accessToken"
+                :disabled="isOauth"
+                @update:modelValue="changeAccessToken"
+            ></wwEditorInput>
+        </wwEditorFormRow>
+        <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>
+
+<script>
+export default {
+    props: {
+        plugin: { type: Object, required: true },
+        settings: { type: Object, required: true },
+    },
+    emits: ['update:settings'],
+    data() {
+        return {
+            isKeyVisible: false,
+            projects: [],
+            isLoading: false,
+        };
+    },
+    computed: {
+        isOauth() {
+            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', {
+                ...this.settings,
+                privateData: { ...this.settings.privateData, accessToken },
+            });
+        },
+        async connect() {
+            this.isLoading = true;
+            const redirectUri = window.location.origin + window.location.pathname;
+            window.localStorage.setItem('supabase_oauth', true);
+            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('');
+        },
+    },
+};
+</script>
diff --git a/src/components/Configuration/ConnectionSummary.vue b/src/components/Configuration/ConnectionSummary.vue
new file mode 100644
index 0000000..064fd81
--- /dev/null
+++ b/src/components/Configuration/ConnectionSummary.vue
@@ -0,0 +1,24 @@
+<template>
+    <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>
+</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 c0d492f..e19ceed 100644
--- a/src/components/Configuration/SettingsEdit.vue
+++ b/src/components/Configuration/SettingsEdit.vue
@@ -1,25 +1,172 @@
 <template>
-    <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">
-                Find it here
-            </a>
-        </template>
-        <wwEditorInputRow
-            type="query"
-            placeholder="https://your-project.supabase.co"
-            :model-value="settings.publicData.projectUrl"
-            @update:modelValue="changeProjectUrl"
+    <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' },
+            ]"
         />
     </wwEditorFormRow>
-    <wwEditorInputRow
-        label="Public API key"
-        required
-        type="query"
-        placeholder="ey********"
-        :model-value="settings.publicData.apiKey"
-        @update:modelValue="changeApiKey"
-    />
+    <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>
+        <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">
+            <wwLoaderSmall loading class="mr-2" />
+            <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
+                label="Project name"
+                type="query"
+                placeholder="My new project"
+                required
+                v-model="newProject.name"
+            />
+            <wwEditorInputRow
+                label="Organization"
+                type="select"
+                placeholder="Select an organization"
+                required
+                v-model="newProject.organizationId"
+                :options="organizations.map(org => ({ label: org.name, value: org.id }))"
+            />
+            <wwEditorInputRow
+                label="Hosting region"
+                type="select"
+                placeholder="us-east-1"
+                required
+                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' },
+                ]"
+            />
+            <wwEditorFormRow label="Database password" required>
+                <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>
+    </template>
+    <wwLoader :loading="isLoading && !isComingUp" />
 </template>
 
 <script>
@@ -29,16 +176,66 @@ export default {
         settings: { type: Object, required: true },
     },
     emits: ['update:settings'],
+    data() {
+        return {
+            projects: [],
+            isLoading: false,
+            isComingUp: false,
+            showSettings: false,
+            showDbPass: false,
+            selectMode: 'select',
+            newProject: {
+                name: '',
+                region: 'us-east-1',
+                organizationId: '',
+                dbPass: '',
+            },
+            organizations: [],
+        };
+    },
+    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(),
+                };
+            }
+        },
+    },
+    computed: {
+        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`,
+                    }))
+                    // sort paused at the end
+                    .sort((a, b) => (a.label.includes('#PAUSED') ? 1 : 0) - (b.label.includes('#PAUSED') ? 1 : 0))
+            );
+        },
+    },
     mounted() {
-        const isSettingsValid = this.settings.publicData.projectUrl && this.settings.publicData.apiKey;
+        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;
         const isOtherPluginSettingsValid =
             wwLib.wwPlugins.supabaseAuth &&
             wwLib.wwPlugins.supabaseAuth.settings.publicData.projectUrl &&
             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.$emit('update:settings', {
                 ...this.settings,
                 publicData: {
@@ -46,26 +243,166 @@ export default {
                     apiKey: wwLib.wwPlugins.supabaseAuth.settings.publicData.apiKey,
                     projectUrl: wwLib.wwPlugins.supabaseAuth.settings.publicData.projectUrl,
                 },
+                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,
+                    connectionString: wwLib.wwPlugins.supabaseAuth.settings.privateData.connectionString,
+                },
             });
         }
     },
     methods: {
-        changeProjectUrl(projectUrl) {
+        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, 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 },
+                publicData: { ...this.settings.publicData, projectUrl, apiKey },
+                privateData: {
+                    ...this.settings.privateData,
+                    apiKey: privateApiKey,
+                    connectionString: connectionString,
+                },
             });
-            this.$nextTick(this.loadInstance);
         },
         changeApiKey(apiKey) {
             this.$emit('update:settings', {
                 ...this.settings,
                 publicData: { ...this.settings.publicData, apiKey },
             });
-            this.$nextTick(this.loadInstance);
         },
-        loadInstance() {
-            this.plugin.load(this.settings.publicData.projectUrl, this.settings.publicData.apiKey);
+        changePrivateApiKey(apiKey) {
+            this.$emit('update:settings', {
+                ...this.settings,
+                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,
+                privateData: { ...this.settings.privateData, databasePassword },
+            });
+        },
+        async refreshProjects() {
+            this.isLoading = true;
+            try {
+                const { data } = await wwAxios.post(
+                    `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                        this.$store.getters['websiteData/getDesignInfo'].id
+                    }/supabase/projects/list`,
+                    { accessToken: this.settings.privateData.accessToken }
+                );
+                this.projects = data?.data;
+                this.isLoading = false;
+            } catch (error) {
+                this.isLoading = false;
+                throw error;
+            }
+        },
+        async fetchProject(projectId) {
+            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;
+            }
+        },
+        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 {
+                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
+                    }/supabase/projects`,
+                    {
+                        name: this.newProject.name,
+                        organization_id: this.newProject.organizationId,
+                        region: this.newProject.region,
+                        db_pass: this.newProject.dbPass,
+                    }
+                );
+                this.isLoading = false;
+                this.isComingUp = true;
+                const projectId = data?.data.id;
+                const projectUrl = `https://${data?.data.id}.supabase.co`;
+
+                let interval = setInterval(async () => {
+                    await this.refreshProjects();
+                    if (this.projects.find(project => project.id === data?.data.id)?.status === 'ACTIVE_HEALTHY') {
+                        clearInterval(interval);
+
+                        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;
+                        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.selectMode = 'select';
+                    }
+                }, 5000);
+            } catch (error) {
+                this.isLoading = false;
+                throw error;
+            }
         },
     },
 };
diff --git a/src/components/Configuration/SettingsSummary.vue b/src/components/Configuration/SettingsSummary.vue
index bfd532a..2bb0906 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="link" class="mr-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">
+    <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>
     </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>
diff --git a/src/components/Functions/InvokeEdge.vue b/src/components/Functions/InvokeEdge.vue
index 6971203..624ee18 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"
@@ -81,6 +87,7 @@
         </template>
     </wwEditorInputRow>
     <wwEditorInputRow
+        v-if="method !== 'GET'"
         label="Body"
         type="code"
         bindable
@@ -104,6 +111,7 @@ export default {
         return {
             isAdvancedOpen: false,
             isLoading: false,
+            functionsOptions: [],
         };
     },
     computed: {
@@ -123,10 +131,28 @@ 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`
+                );
+                console.log(data);
+                this.functionsOptions = data?.data.map(func => ({ label: func.name, value: func.slug }));
+                this.isLoading = false;
+            } catch (error) {
+                this.isLoading = false;
+            }
+        },
     },
 };
 </script>
diff --git a/src/wwPlugin.js b/src/wwPlugin.js
index dc1779a..22bb6fd 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';
@@ -35,12 +37,31 @@ 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
+        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: wwLib.wwApiRequests._getPluginsUrl() + '/supabase/redirect' }
+            );
+            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.publicData.projectUrl, settings.privateData.accessToken);
         this.subscribeTables(settings.publicData.realtimeTables || {});
     },
     /*  Called by supabase auth plugin
@@ -52,6 +73,49 @@ 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 install() {
+        await wwAxios.post(
+            `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                wwLib.$store.getters['websiteData/getDesignInfo'].id
+            }/supabase/install`
+        );
+    },
+    async fetchProjectInfo(
+        projectUrl = wwLib.wwPlugins.supabase.settings.publicData?.projectUrl,
+        accessToken = wwLib.wwPlugins.supabase.settings.privateData?.accessToken
+    ) {
+        if (!accessToken || !projectUrl) return;
+        const { data: schemaData } = await wwAxios.get(
+            `${wwLib.wwApiRequests._getPluginsUrl()}/designs/${
+                wwLib.$store.getters['websiteData/getDesignInfo'].id
+            }/supabase/schema`
+        );
+        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 this.projectInfo;
+    },
+    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 || {});
+    },
     /*=============================================m_ÔÔ_m=============================================\
         Collection API
     \================================================================================================*/
@@ -310,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,
@@ -318,13 +382,21 @@ 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, {
+                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 });
+            throw new Error('Relay error: ' + error.message, {
+                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 });
+            throw new Error('Fetch error: ' + error.message, {
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json?.() },
+            });
         } else if (error) {
-            throw new Error(error.message, { cause: error, data });
+            throw new Error(error.message, {
+                cause: { ...error, status: error?.context?.status, data: await error?.context?.json?.() },
+            });
         }
 
         try {
diff --git a/ww-config.js b/ww-config.js
index b45c3a7..7192792 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -4,14 +4,29 @@ 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;
+                },
+                onSave: 'onSave',
+            },
             {
                 label: 'Configuration',
                 icon: 'advanced',
                 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
+                    );
                 },
+                onSave: 'onSave',
             },
             {
                 label: 'Realtime collections',