From 6b5e4641ba55e5d1f6c870f2e4e1c2d4822d9786 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 18 Jun 2025 16:54:38 +0530
Subject: [PATCH] feat: update auth

---
 app/javascript/dashboard/api/notion_auth.js   | 14 ++++++++
 .../settings/integrations/Notion.vue          | 33 ++++++++++++++++---
 config/integration/apps.yml                   |  1 -
 3 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/dashboard/api/notion_auth.js

diff --git a/app/javascript/dashboard/api/notion_auth.js b/app/javascript/dashboard/api/notion_auth.js
new file mode 100644
index 000000000..8a0027f9b
--- /dev/null
+++ b/app/javascript/dashboard/api/notion_auth.js
@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class NotionOAuthClient extends ApiClient {
+  constructor() {
+    super('notion', { accountScoped: true });
+  }
+
+  generateAuthorization() {
+    return axios.post(`${this.url}/authorization`);
+  }
+}
+
+export default new NotionOAuthClient();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
index 970e3e1e9..c2d63ad22 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
@@ -5,12 +5,16 @@ import {
   useMapGetter,
   useStore,
 } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import ButtonNext from 'next/button/Button.vue';
+import notionClient from 'dashboard/api/notion_auth.js';
 
 import Integration from './Integration.vue';
 import Spinner from 'shared/components/Spinner.vue';
 
+const { t } = useI18n();
 const store = useStore();
-
 const integrationLoaded = ref(false);
 
 const integration = useFunctionGetter('integrations/getIntegration', 'notion');
@@ -21,9 +25,19 @@ const integrationAction = computed(() => {
   if (integration.value.enabled) {
     return 'disconnect';
   }
-  return integration.value.action;
+
+  return '';
 });
 
+const authorize = async () => {
+  const response = await notionClient.generateAuthorization();
+  const {
+    data: { url },
+  } = response;
+
+  window.location.href = url;
+};
+
 const initializeNotionIntegration = async () => {
   await store.dispatch('integrations/get', 'notion');
   integrationLoaded.value = true;
@@ -45,10 +59,19 @@ onMounted(() => {
         :integration-enabled="integration.enabled"
         :integration-action="integrationAction"
         :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
+          title: t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
+          message: t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
         }"
-      />
+      >
+        <template #action>
+          <ButtonNext
+            faded
+            blue
+            :label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
+            @click="authorize"
+          />
+        </template>
+      </Integration>
     </div>
     <div v-else class="flex items-center justify-center flex-1">
       <Spinner size="" color-scheme="primary" />
diff --git a/config/integration/apps.yml b/config/integration/apps.yml
index e97c37a1b..dd5c722a4 100644
--- a/config/integration/apps.yml
+++ b/config/integration/apps.yml
@@ -67,7 +67,6 @@ notion:
   id: notion
   logo: notion.png
   i18n_key: notion
-  action: https://api.notion.com/v1/oauth/authorize
   hook_type: account
   allow_multiple_hooks: false
 slack: