chore: merge hoppscotch/main into hoppscotch/release/2023.12.0

packages/hoppscotch-common/src/pages/index.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, onBeforeMount } from "vue"
+import { ref, onMounted, onBeforeUnmount } from "vue"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import { useRoute } from "vue-router"
@@ -114,7 +114,6 @@ import {
 } from "rxjs"
 import { useToast } from "~/composables/toast"
 import { watchDebounced } from "@vueuse/core"
-import { oauthRedirect } from "~/helpers/oauth"
 import { useReadonlyStream } from "~/composables/stream"
 import {
   changeCurrentSyncStatus,
@@ -414,28 +413,6 @@ function setupTabStateSync() {
   })
 }
 
-function oAuthURL() {
-  onBeforeMount(async () => {
-    try {
-      const tokenInfo = await oauthRedirect()
-      if (
-        typeof tokenInfo === "object" &&
-        tokenInfo.hasOwnProperty("access_token")
-      ) {
-        if (
-          tabs.currentActiveTab.value.document.request.auth.authType ===
-          "oauth-2"
-        ) {
-          tabs.currentActiveTab.value.document.request.auth.token =
-            tokenInfo.access_token
-        }
-      }
-
-      // eslint-disable-next-line no-empty
-    } catch (_) {}
-  })
-}
-
 defineActionHandler("contextmenu.open", ({ position, text }) => {
   if (text) {
     contextMenu.value = {
@@ -454,7 +431,6 @@ defineActionHandler("contextmenu.open", ({ position, text }) => {
 
 setupTabStateSync()
 bindRequestToURLParams()
-oAuthURL()
 
 defineActionHandler("rest.request.open", ({ doc }) => {
   tabs.createNewTab(doc)

packages/hoppscotch-common/src/pages/oauth.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex items-center justify-center">
+    <HoppSmartSpinner />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { handleOAuthRedirect } from "~/helpers/oauth"
+import { useToast } from "~/composables/toast"
+import { useI18n } from "~/composables/i18n"
+
+import * as E from "fp-ts/Either"
+import { useService } from "dioc/vue"
+import { RESTTabService } from "~/services/tab/rest"
+import { onMounted } from "vue"
+
+import { useRouter } from "vue-router"
+
+const t = useI18n()
+const router = useRouter()
+
+const toast = useToast()
+
+const tabs = useService(RESTTabService)
+
+function translateOAuthRedirectError(error: string) {
+  switch (error) {
+    case "AUTH_SERVER_RETURNED_ERROR":
+      return t("authorization.oauth.redirect_auth_server_returned_error")
+
+    case "NO_AUTH_CODE":
+      return t("authorization.oauth.redirect_no_auth_code")
+
+    case "INVALID_STATE":
+      return t("authorization.oauth.redirect_invalid_state")
+
+    case "NO_TOKEN_ENDPOINT":
+      return t("authorization.oauth.redirect_no_token_endpoint")
+
+    case "NO_CLIENT_ID":
+      return t("authorization.oauth.redirect_no_client_id")
+
+    case "NO_CLIENT_SECRET":
+      return t("authorization.oauth.redirect_no_client_secret")
+
+    case "NO_CODE_VERIFIER":
+      return t("authorization.oauth.redirect_no_code_verifier")
+
+    case "AUTH_TOKEN_REQUEST_FAILED":
+      return t("authorization.oauth.redirect_auth_token_request_failed")
+
+    case "AUTH_TOKEN_REQUEST_INVALID_RESPONSE":
+      return t(
+        "authorization.oauth.redirect_auth_token_request_invalid_response"
+      )
+
+    default:
+      return t("authorization.oauth.something_went_wrong_on_oauth_redirect")
+  }
+}
+
+onMounted(async () => {
+  const tokenInfo = await handleOAuthRedirect()
+
+  if (E.isLeft(tokenInfo)) {
+    toast.error(translateOAuthRedirectError(tokenInfo.left))
+    router.push("/")
+    return
+  }
+
+  if (
+    tabs.currentActiveTab.value.document.request.auth.authType === "oauth-2"
+  ) {
+    tabs.currentActiveTab.value.document.request.auth.token =
+      tokenInfo.right.access_token
+
+    router.push("/")
+    return
+  }
+})
+</script>