feat: oauth revamp + support for multiple grant types in oauth (#3885)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
2024-03-20 00:18:03 +05:30
parent 457857a711
commit 6b58915caa
44 changed files with 2736 additions and 371 deletions
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -1,5 +1,7 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 import "@vue/runtime-core"

--- a/packages/hoppscotch-common/src/components/collections/Properties.vue
+++ b/packages/hoppscotch-common/src/components/collections/Properties.vue
@@ -8,7 +8,7 @@
  >
    <template #body>
      <HoppSmartTabs
-        v-model="selectedOptionTab"
+        v-model="activeTab"
        styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10 !-py-4"
        render-inactive-tabs
      >
@@ -16,7 +16,6 @@
          <HttpHeaders
            v-model="editableCollection"
            :is-collection-property="true"
-            @change-tab="changeOptionTab"
          />
          <div
            class="bg-bannerInfo px-4 py-2 flex items-center sticky bottom-0"
@@ -34,6 +33,7 @@
            :is-collection-property="true"
            :is-root-collection="editingProperties?.isRootCollection"
            :inherited-properties="editingProperties?.inheritedProperties"
+            :source="source"
          />
          <div
            class="bg-bannerInfo px-4 py-2 flex items-center sticky bottom-0"
@@ -64,16 +64,20 @@
 </template>

 <script setup lang="ts">
-import { watch, ref } from "vue"
 import { useI18n } from "@composables/i18n"
 import { HoppCollection, HoppRESTAuth, HoppRESTHeaders } from "@hoppscotch/data"
-import { RESTOptionTabs } from "../http/RequestOptions.vue"
 import { clone } from "lodash-es"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { PersistenceService } from "~/services/persistence"
+import { useService } from "dioc/vue"
+import { ref, watch } from "vue"

+import { useVModel } from "@vueuse/core"
+
+const persistenceService = useService(PersistenceService)
 const t = useI18n()

-type EditingProperties = {
+export type EditingProperties = {
  collection: Partial<HoppCollection> | null
  isRootCollection: boolean
  path: string
@@ -85,6 +89,8 @@ const props = withDefaults(
    show: boolean
    loadingState: boolean
    editingProperties: EditingProperties | null
+    source: "REST" | "GraphQL"
+    modelValue: string
  }>(),
  {
    show: false,
@@ -99,6 +105,7 @@ const emit = defineEmits<{
    newCollection: Omit<EditingProperties, "inheritedProperties">
  ): void
  (e: "hide-modal"): void
+  (e: "update:modelValue"): void
 }>()

 const editableCollection = ref<{
@@ -112,11 +119,27 @@ const editableCollection = ref<{
  },
 })

-const selectedOptionTab = ref("headers")
+watch(
+  editableCollection,
+  (updatedEditableCollection) => {
+    if (props.show) {
+      persistenceService.setLocalConfig(
+        "unsaved_collection_properties",
+        JSON.stringify(<EditingProperties>{
+          collection: updatedEditableCollection,
+          isRootCollection: props.editingProperties?.isRootCollection,
+          path: props.editingProperties?.path,
+          inheritedProperties: props.editingProperties?.inheritedProperties,
+        })
+      )
+    }
+  },
+  {
+    deep: true,
+  }
+)

-const changeOptionTab = (tab: RESTOptionTabs) => {
-  selectedOptionTab.value = tab
-}
+const activeTab = useVModel(props, "modelValue", emit)

 watch(
  () => props.show,
@@ -136,6 +159,8 @@ watch(
          authActive: false,
        },
      }
+
+      persistenceService.removeLocalConfig("unsaved_collection_properties")
    }
  }
 )
@@ -152,9 +177,11 @@ const saveEditedCollection = () => {
    isRootCollection: props.editingProperties.isRootCollection,
  }
  emit("set-collection-properties", collection as EditingProperties)
+  persistenceService.removeLocalConfig("unsaved_collection_properties")
 }

 const hideModal = () => {
+  persistenceService.removeLocalConfig("unsaved_collection_properties")
  emit("hide-modal")
 }
 </script>
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -146,8 +146,10 @@
      @hide-modal="displayModalImportExport(false)"
    />
    <CollectionsProperties
+      v-model="collectionPropertiesModalActiveTab"
      :show="showModalEditProperties"
      :editing-properties="editingProperties"
+      source="GraphQL"
      @hide-modal="displayModalEditProperties(false)"
      @set-collection-properties="setCollectionProperties"
    />
@@ -155,7 +157,7 @@
 </template>

 <script setup lang="ts">
-import { nextTick, ref } from "vue"
+import { nextTick, onMounted, ref } from "vue"
 import { clone, cloneDeep } from "lodash-es"
 import {
  graphqlCollections$,
@@ -178,6 +180,7 @@ import { GQLTabService } from "~/services/tab/graphql"
 import { computed } from "vue"
 import {
  HoppCollection,
+  HoppGQLAuth,
  HoppGQLRequest,
  makeGQLRequest,
 } from "@hoppscotch/data"
@@ -186,6 +189,10 @@ import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { updateInheritedPropertiesForAffectedRequests } from "~/helpers/collection/collection"
 import { useToast } from "~/composables/toast"
 import { getRequestsByPath } from "~/helpers/collection/request"
+import { PersistenceService } from "~/services/persistence"
+import { PersistedOAuthConfig } from "~/services/oauth/oauth.service"
+import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
+import { EditingProperties } from "../Properties.vue"

 const t = useI18n()
 const toast = useToast()
@@ -232,6 +239,52 @@ const editingProperties = ref<{

 const filterText = ref("")

+const persistenceService = useService(PersistenceService)
+
+const collectionPropertiesModalActiveTab = ref<GQLOptionTabs>("headers")
+
+onMounted(() => {
+  const localOAuthTempConfig =
+    persistenceService.getLocalConfig("oauth_temp_config")
+
+  if (!localOAuthTempConfig) {
+    return
+  }
+
+  const { context, source, token }: PersistedOAuthConfig =
+    JSON.parse(localOAuthTempConfig)
+
+  if (source === "REST") {
+    return
+  }
+
+  if (context?.type === "collection-properties") {
+    // load the unsaved editing properties
+    const unsavedCollectionPropertiesString = persistenceService.getLocalConfig(
+      "unsaved_collection_properties"
+    )
+
+    if (unsavedCollectionPropertiesString) {
+      const unsavedCollectionProperties: EditingProperties<"GraphQL"> =
+        JSON.parse(unsavedCollectionPropertiesString)
+
+      const auth = unsavedCollectionProperties.collection?.auth
+
+      if (auth?.authType === "oauth-2") {
+        const grantTypeInfo = auth.grantTypeInfo
+
+        grantTypeInfo && (grantTypeInfo.token = token ?? "")
+      }
+
+      editingProperties.value = unsavedCollectionProperties
+    }
+
+    persistenceService.removeLocalConfig("oauth_temp_config")
+    collectionPropertiesModalActiveTab.value = "authorization"
+    showModalEditProperties.value = true
+  }
+})
+
 const filteredCollections = computed(() => {
  const collectionsClone = clone(collections.value)

--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -161,8 +161,10 @@
      @hide-modal="displayTeamModalAdd(false)"
    />
    <CollectionsProperties
+      v-model="collectionPropertiesModalActiveTab"
      :show="showModalEditProperties"
      :editing-properties="editingProperties"
+      source="REST"
      @hide-modal="displayModalEditProperties(false)"
      @set-collection-properties="setCollectionProperties"
    />
@@ -170,7 +172,7 @@
 </template>

 <script setup lang="ts">
-import { computed, nextTick, PropType, ref, watch } from "vue"
+import { computed, nextTick, onMounted, PropType, ref, watch } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
@@ -248,6 +250,10 @@ import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { TeamSearchService } from "~/helpers/teams/TeamsSearch.service"
+import { PersistenceService } from "~/services/persistence"
+import { PersistedOAuthConfig } from "~/services/oauth/oauth.service"
+import { RESTOptionTabs } from "../http/RequestOptions.vue"
+import { EditingProperties } from "./Properties.vue"

 const t = useI18n()
 const toast = useToast()
@@ -299,12 +305,7 @@ const editingRequestName = ref("")
 const editingRequestIndex = ref<number | null>(null)
 const editingRequestID = ref<string | null>(null)

-const editingProperties = ref<{
-  collection: Partial<HoppCollection> | null
-  isRootCollection: boolean
-  path: string
-  inheritedProperties?: HoppInheritedProperty
-}>({
+const editingProperties = ref<EditingProperties>({
  collection: null,
  isRootCollection: false,
  path: "",
@@ -387,6 +388,55 @@ watch(
    immediate: true,
  }
 )
+const persistenceService = useService(PersistenceService)
+
+const collectionPropertiesModalActiveTab = ref<RESTOptionTabs>("headers")
+
+onMounted(() => {
+  const localOAuthTempConfig =
+    persistenceService.getLocalConfig("oauth_temp_config")
+
+  if (!localOAuthTempConfig) {
+    return
+  }
+
+  const { context, source, token }: PersistedOAuthConfig =
+    JSON.parse(localOAuthTempConfig)
+
+  if (source === "GraphQL") {
+    return
+  }
+
+  if (context?.type === "collection-properties") {
+    // load the unsaved editing properties
+    const unsavedCollectionPropertiesString = persistenceService.getLocalConfig(
+      "unsaved_collection_properties"
+    )
+
+    if (unsavedCollectionPropertiesString) {
+      const unsavedCollectionProperties: EditingProperties<"REST"> = JSON.parse(
+        unsavedCollectionPropertiesString
+      )
+
+      // casting because the type `EditingProperties["collection"]["auth"] and the usage in Properties.vue is different. there it's casted as an any.
+      // FUTURE-TODO: look into this
+      // @ts-expect-error because of the above reason
+      const auth = unsavedCollectionProperties.collection?.auth as HoppRESTAuth
+
+      if (auth?.authType === "oauth-2") {
+        const grantTypeInfo = auth.grantTypeInfo
+
+        grantTypeInfo && (grantTypeInfo.token = token ?? "")
+      }
+
+      editingProperties.value = unsavedCollectionProperties
+    }
+
+    persistenceService.removeLocalConfig("oauth_temp_config")
+    collectionPropertiesModalActiveTab.value = "authorization"
+    showModalEditProperties.value = true
+  }
+})

 watch(
  () => myTeams.value,
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -82,7 +82,7 @@
                :active="authName === 'OAuth 2.0'"
                @click="
                  () => {
-                    auth.authType = 'oauth-2'
+                    selectOAuth2AuthType()
                    hide()
                  }
                "
@@ -189,12 +189,12 @@
        <div v-if="auth.authType === 'oauth-2'">
          <div class="flex flex-1 border-b border-dividerLight">
            <SmartEnvInput
-              v-model="auth.token"
+              v-model="auth.grantTypeInfo.token"
              :environment-highlights="false"
              placeholder="Token"
            />
          </div>
-          <HttpOAuth2Authorization v-model="auth" />
+          <HttpOAuth2Authorization v-model="auth" source="GraphQL" />
        </div>
        <div v-if="auth.authType === 'api-key'">
          <HttpAuthorizationApiKey v-model="auth" />
@@ -220,19 +220,22 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from "@composables/i18n"
+import { pluckRef } from "@composables/ref"
+import { useColorMode } from "@composables/theming"
+import { HoppGQLAuth, HoppGQLAuthOAuth2 } from "@hoppscotch/data"
+import { useVModel } from "@vueuse/core"
+import { computed, onMounted, ref } from "vue"
+
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+
+import IconCircle from "~icons/lucide/circle"
+import IconCircleDot from "~icons/lucide/circle-dot"
+import IconExternalLink from "~icons/lucide/external-link"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconTrash2 from "~icons/lucide/trash-2"
-import IconExternalLink from "~icons/lucide/external-link"
-import IconCircleDot from "~icons/lucide/circle-dot"
-import IconCircle from "~icons/lucide/circle"
-import { computed, ref } from "vue"
-import { HoppGQLAuth } from "@hoppscotch/data"
-import { pluckRef } from "@composables/ref"
-import { useI18n } from "@composables/i18n"
-import { useColorMode } from "@composables/theming"
-import { useVModel } from "@vueuse/core"
-import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
-import { onMounted } from "vue"
+
+import { getDefaultAuthCodeOauthFlowParams } from "~/services/oauth/flows/authCode"

 const t = useI18n()

@@ -280,6 +283,30 @@ const getAuthName = (type: HoppGQLAuth["authType"] | undefined) => {
  return AUTH_KEY_NAME[type] ? AUTH_KEY_NAME[type] : "None"
 }

+const selectOAuth2AuthType = () => {
+  const defaultGrantTypeInfo: HoppGQLAuthOAuth2["grantTypeInfo"] = {
+    ...getDefaultAuthCodeOauthFlowParams(),
+    grantType: "AUTHORIZATION_CODE",
+    token: "",
+  }
+
+  // @ts-expect-error - the existing grantTypeInfo might be in the auth object, typescript doesnt know that
+  const existingGrantTypeInfo = auth.value.grantTypeInfo as
+    | HoppGQLAuthOAuth2["grantTypeInfo"]
+    | undefined
+
+  const grantTypeInfo = existingGrantTypeInfo
+    ? existingGrantTypeInfo
+    : defaultGrantTypeInfo
+
+  auth.value = <HoppGQLAuth>{
+    ...auth.value,
+    authType: "oauth-2",
+    addTo: "HEADERS",
+    grantTypeInfo: grantTypeInfo,
+  }
+}
+
 const authActive = pluckRef(auth, "authActive")

 const clearContent = () => {
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -579,12 +579,18 @@ const getComputedAuthHeaders = (
    })
  } else if (
    request.auth.authType === "bearer" ||
-    request.auth.authType === "oauth-2"
+    (request.auth.authType === "oauth-2" && request.auth.addTo === "HEADERS")
  ) {
+    const requestAuth = request.auth
+
+    const isOAuth2 = requestAuth.authType === "oauth-2"
+
+    const token = isOAuth2 ? requestAuth.grantTypeInfo.token : requestAuth.token
+
    headers.push({
      active: true,
      key: "Authorization",
-      value: `Bearer ${request.auth.token}`,
+      value: `Bearer ${token}`,
    })
  } else if (request.auth.authType === "api-key") {
    const { key, addTo } = request.auth
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -82,7 +82,7 @@
                :active="authName === 'OAuth 2.0'"
                @click="
                  () => {
-                    auth.authType = 'oauth-2'
+                    selectOAuth2AuthType()
                    hide()
                  }
                "
@@ -177,15 +177,24 @@
            />
          </div>
        </div>
-        <div v-if="auth.authType === 'oauth-2'">
+        <div v-if="auth.authType === 'oauth-2'" class="w-full">
          <div class="flex flex-1 border-b border-dividerLight">
+            <!-- Ensure a new object is assigned here to avoid reactivity issues -->
            <SmartEnvInput
-              v-model="auth.token"
+              :model-value="auth.grantTypeInfo.token"
              placeholder="Token"
              :envs="envs"
+              @update:model-value="
+                auth.grantTypeInfo = { ...auth.grantTypeInfo, token: $event }
+              "
            />
          </div>
-          <HttpOAuth2Authorization v-model="auth" :envs="envs" />
+          <HttpOAuth2Authorization
+            v-model="auth"
+            :is-collection-property="isCollectionProperty"
+            :envs="envs"
+            :source="source"
+          />
        </div>
        <div v-if="auth.authType === 'api-key'">
          <HttpAuthorizationApiKey v-model="auth" :envs="envs" />
@@ -217,7 +226,7 @@ import IconExternalLink from "~icons/lucide/external-link"
 import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
 import { computed, ref } from "vue"
-import { HoppRESTAuth } from "@hoppscotch/data"
+import { HoppRESTAuth, HoppRESTAuthOAuth2 } from "@hoppscotch/data"
 import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
@@ -226,17 +235,27 @@ import { onMounted } from "vue"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { AggregateEnvironment } from "~/newstore/environments"

+import { getDefaultAuthCodeOauthFlowParams } from "~/services/oauth/flows/authCode"
+
 const t = useI18n()

 const colorMode = useColorMode()

-const props = defineProps<{
-  modelValue: HoppRESTAuth
-  isCollectionProperty?: boolean
-  isRootCollection?: boolean
-  inheritedProperties?: HoppInheritedProperty
-  envs?: AggregateEnvironment[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: HoppRESTAuth
+    isCollectionProperty?: boolean
+    isRootCollection?: boolean
+    inheritedProperties?: HoppInheritedProperty
+    envs?: AggregateEnvironment[]
+    source?: "REST" | "GraphQL"
+  }>(),
+  {
+    source: "REST",
+    envs: undefined,
+    inheritedProperties: undefined,
+  }
+)

 const emit = defineEmits<{
  (e: "update:modelValue", value: HoppRESTAuth): void
@@ -272,6 +291,30 @@ const getAuthName = (type: HoppRESTAuth["authType"] | undefined) => {
  return AUTH_KEY_NAME[type] ? AUTH_KEY_NAME[type] : "None"
 }

+const selectOAuth2AuthType = () => {
+  const defaultGrantTypeInfo: HoppRESTAuthOAuth2["grantTypeInfo"] = {
+    ...getDefaultAuthCodeOauthFlowParams(),
+    grantType: "AUTHORIZATION_CODE",
+    token: "",
+  }
+
+  // @ts-expect-error - the existing grantTypeInfo might be in the auth object, typescript doesnt know that
+  const existingGrantTypeInfo = auth.value.grantTypeInfo as
+    | HoppRESTAuthOAuth2["grantTypeInfo"]
+    | undefined
+
+  const grantTypeInfo = existingGrantTypeInfo
+    ? existingGrantTypeInfo
+    : defaultGrantTypeInfo
+
+  auth.value = <HoppRESTAuth>{
+    ...auth.value,
+    authType: "oauth-2",
+    addTo: "HEADERS",
+    grantTypeInfo: grantTypeInfo,
+  }
+}
+
 const authActive = pluckRef(auth, "authActive")

 const clearContent = () => {
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
--- a/packages/hoppscotch-common/src/composables/ref.ts
+++ b/packages/hoppscotch-common/src/composables/ref.ts
@@ -1,4 +1,4 @@
-import { customRef, onBeforeUnmount, Ref, watch } from "vue"
+import { customRef, onBeforeUnmount, ref, Ref, UnwrapRef, watch } from "vue"

 export function pluckRef<T, K extends keyof T>(ref: Ref<T>, key: K): Ref<T[K]> {
  return customRef((track, trigger) => {
@@ -31,3 +31,16 @@ export function pluckMultipleFromRef<T, K extends Array<keyof T>>(
 ): { [key in K[number]]: Ref<T[key]> } {
  return Object.fromEntries(keys.map((x) => [x, pluckRef(sourceRef, x)])) as any
 }
+
+export const refWithCallbackOnChange = <T>(
+  initialValue: T,
+  callback: (value: UnwrapRef<T>) => void
+) => {
+  const targetRef = ref(initialValue)
+
+  watch(targetRef, (value) => {
+    callback(value)
+  })
+
+  return targetRef
+}
--- a/packages/hoppscotch-common/src/helpers/collection/request.ts
+++ b/packages/hoppscotch-common/src/helpers/collection/request.ts
@@ -66,12 +66,20 @@ export function getRequestsByPath(
  let currentCollection = collections[pathArray[0]]

  if (pathArray.length === 1) {
-    return currentCollection.requests
+    const latestVersionedRequests = currentCollection.requests.filter(
+      (req): req is HoppRESTRequest => req.v === "3"
+    )
+
+    return latestVersionedRequests
  }
  for (let i = 1; i < pathArray.length; i++) {
    const folder = currentCollection.folders[pathArray[i]]
    if (folder) currentCollection = folder
  }

-  return currentCollection.requests
+  const latestVersionedRequests = currentCollection.requests.filter(
+    (req): req is HoppRESTRequest => req.v === "3"
+  )
+
+  return latestVersionedRequests
 }
--- a/packages/hoppscotch-common/src/helpers/graphql/connection.ts
+++ b/packages/hoppscotch-common/src/helpers/graphql/connection.ts
@@ -269,8 +269,16 @@ export const runGQLOperation = async (options: RunQueryOptions) => {
      const username = auth.username
      const password = auth.password
      finalHeaders.Authorization = `Basic ${btoa(`${username}:${password}`)}`
-    } else if (auth.authType === "bearer" || auth.authType === "oauth-2") {
+    } else if (auth.authType === "bearer") {
      finalHeaders.Authorization = `Bearer ${auth.token}`
+    } else if (auth.authType === "oauth-2") {
+      const { addTo } = auth
+
+      if (addTo === "HEADERS") {
+        finalHeaders.Authorization = `Bearer ${auth.grantTypeInfo.token}`
+      } else if (addTo === "QUERY_PARAMS") {
+        params["access_token"] = auth.grantTypeInfo.token
+      }
    } else if (auth.authType === "api-key") {
      const { key, value, addTo } = auth
      if (addTo === "Headers") {
--- a/packages/hoppscotch-common/src/helpers/import-export/import/insomnia.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/insomnia.ts
@@ -111,12 +111,16 @@ const getHoppReqAuth = (req: InsomniaRequestResource): HoppRESTAuth => {
    return {
      authType: "oauth-2",
      authActive: !(auth.disabled ?? false),
-      accessTokenURL: replaceVarTemplating(auth.accessTokenUrl ?? ""),
-      authURL: replaceVarTemplating(auth.authorizationUrl ?? ""),
-      clientID: replaceVarTemplating(auth.clientId ?? ""),
-      oidcDiscoveryURL: "",
-      scope: replaceVarTemplating(auth.scope ?? ""),
-      token: "",
+      grantTypeInfo: {
+        authEndpoint: replaceVarTemplating(auth.authorizationUrl ?? ""),
+        clientID: replaceVarTemplating(auth.clientId ?? ""),
+        clientSecret: "",
+        grantType: "AUTHORIZATION_CODE",
+        scopes: replaceVarTemplating(auth.scope ?? ""),
+        token: "",
+        isPKCE: false,
+        tokenEndpoint: replaceVarTemplating(auth.accessTokenUrl ?? ""),
+      },
    }
  else if (auth.type === "bearer")
    return {
--- a/packages/hoppscotch-common/src/helpers/import-export/import/openapi.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/openapi.ts
@@ -279,67 +279,92 @@ const resolveOpenAPIV3SecurityObj = (
      return {
        authType: "oauth-2",
        authActive: true,
-        accessTokenURL: scheme.flows.authorizationCode.tokenUrl ?? "",
-        authURL: scheme.flows.authorizationCode.authorizationUrl ?? "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          grantType: "AUTHORIZATION_CODE",
+          authEndpoint: scheme.flows.authorizationCode.authorizationUrl ?? "",
+          clientID: "",
+          scopes: _schemeData.join(" "),
+          token: "",
+          isPKCE: false,
+          tokenEndpoint: scheme.flows.authorizationCode.tokenUrl ?? "",
+          clientSecret: "",
+        },
+        addTo: "HEADERS",
      }
    } else if (scheme.flows.implicit) {
      return {
        authType: "oauth-2",
        authActive: true,
-        authURL: scheme.flows.implicit.authorizationUrl ?? "",
-        accessTokenURL: "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          grantType: "IMPLICIT",
+          authEndpoint: scheme.flows.implicit.authorizationUrl ?? "",
+          clientID: "",
+          token: "",
+          scopes: _schemeData.join(" "),
+        },
+        addTo: "HEADERS",
      }
    } else if (scheme.flows.password) {
      return {
        authType: "oauth-2",
        authActive: true,
-        authURL: "",
-        accessTokenURL: scheme.flows.password.tokenUrl ?? "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          grantType: "PASSWORD",
+          clientID: "",
+          authEndpoint: scheme.flows.password.tokenUrl,
+          clientSecret: "",
+          password: "",
+          username: "",
+          token: "",
+          scopes: _schemeData.join(" "),
+        },
+        addTo: "HEADERS",
      }
    } else if (scheme.flows.clientCredentials) {
      return {
        authType: "oauth-2",
        authActive: true,
-        accessTokenURL: scheme.flows.clientCredentials.tokenUrl ?? "",
-        authURL: "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          grantType: "CLIENT_CREDENTIALS",
+          authEndpoint: scheme.flows.clientCredentials.tokenUrl ?? "",
+          clientID: "",
+          clientSecret: "",
+          scopes: _schemeData.join(" "),
+          token: "",
+        },
+        addTo: "HEADERS",
      }
    }
    return {
      authType: "oauth-2",
      authActive: true,
-      accessTokenURL: "",
-      authURL: "",
-      clientID: "",
-      oidcDiscoveryURL: "",
-      scope: _schemeData.join(" "),
-      token: "",
+      grantTypeInfo: {
+        grantType: "AUTHORIZATION_CODE",
+        authEndpoint: "",
+        clientID: "",
+        scopes: _schemeData.join(" "),
+        token: "",
+        isPKCE: false,
+        tokenEndpoint: "",
+        clientSecret: "",
+      },
+      addTo: "HEADERS",
    }
  } else if (scheme.type === "openIdConnect") {
    return {
      authType: "oauth-2",
      authActive: true,
-      accessTokenURL: "",
-      authURL: "",
-      clientID: "",
-      oidcDiscoveryURL: scheme.openIdConnectUrl ?? "",
-      scope: _schemeData.join(" "),
-      token: "",
+      grantTypeInfo: {
+        grantType: "AUTHORIZATION_CODE",
+        authEndpoint: "",
+        clientID: "",
+        scopes: _schemeData.join(" "),
+        token: "",
+        isPKCE: false,
+        tokenEndpoint: "",
+        clientSecret: "",
+      },
+      addTo: "HEADERS",
    }
  }

@@ -416,56 +441,76 @@ const resolveOpenAPIV2SecurityScheme = (
      return {
        authType: "oauth-2",
        authActive: true,
-        accessTokenURL: scheme.tokenUrl ?? "",
-        authURL: scheme.authorizationUrl ?? "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          authEndpoint: scheme.authorizationUrl ?? "",
+          clientID: "",
+          clientSecret: "",
+          grantType: "AUTHORIZATION_CODE",
+          scopes: _schemeData.join(" "),
+          token: "",
+          isPKCE: false,
+          tokenEndpoint: scheme.tokenUrl ?? "",
+        },
+        addTo: "HEADERS",
      }
    } else if (scheme.flow === "implicit") {
      return {
        authType: "oauth-2",
        authActive: true,
-        accessTokenURL: "",
-        authURL: scheme.authorizationUrl ?? "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          authEndpoint: scheme.authorizationUrl ?? "",
+          clientID: "",
+          grantType: "IMPLICIT",
+          scopes: _schemeData.join(" "),
+          token: "",
+        },
+        addTo: "HEADERS",
      }
    } else if (scheme.flow === "application") {
      return {
        authType: "oauth-2",
        authActive: true,
-        accessTokenURL: scheme.tokenUrl ?? "",
-        authURL: "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          authEndpoint: scheme.tokenUrl ?? "",
+          clientID: "",
+          clientSecret: "",
+          grantType: "CLIENT_CREDENTIALS",
+          scopes: _schemeData.join(" "),
+          token: "",
+        },
+        addTo: "HEADERS",
      }
    } else if (scheme.flow === "password") {
      return {
        authType: "oauth-2",
        authActive: true,
-        accessTokenURL: scheme.tokenUrl ?? "",
-        authURL: "",
-        clientID: "",
-        oidcDiscoveryURL: "",
-        scope: _schemeData.join(" "),
-        token: "",
+        grantTypeInfo: {
+          grantType: "PASSWORD",
+          authEndpoint: scheme.tokenUrl ?? "",
+          clientID: "",
+          clientSecret: "",
+          password: "",
+          scopes: _schemeData.join(" "),
+          token: "",
+          username: "",
+        },
+        addTo: "HEADERS",
      }
    }
    return {
      authType: "oauth-2",
      authActive: true,
-      accessTokenURL: "",
-      authURL: "",
-      clientID: "",
-      oidcDiscoveryURL: "",
-      scope: _schemeData.join(" "),
-      token: "",
+      grantTypeInfo: {
+        authEndpoint: "",
+        clientID: "",
+        clientSecret: "",
+        grantType: "AUTHORIZATION_CODE",
+        scopes: _schemeData.join(" "),
+        token: "",
+        isPKCE: false,
+        tokenEndpoint: "",
+      },
+      addTo: "HEADERS",
    }
  }

--- a/packages/hoppscotch-common/src/helpers/import-export/import/postman.ts
+++ b/packages/hoppscotch-common/src/helpers/import-export/import/postman.ts
@@ -162,25 +162,36 @@ const getHoppReqAuth = (item: Item): HoppRESTAuth => {
      ),
    }
  } else if (auth.type === "oauth2") {
+    const accessTokenURL = replacePMVarTemplating(
+      getVariableValue(auth.oauth2, "accessTokenUrl") ?? ""
+    )
+    const authURL = replacePMVarTemplating(
+      getVariableValue(auth.oauth2, "authUrl") ?? ""
+    )
+    const clientId = replacePMVarTemplating(
+      getVariableValue(auth.oauth2, "clientId") ?? ""
+    )
+    const scope = replacePMVarTemplating(
+      getVariableValue(auth.oauth2, "scope") ?? ""
+    )
+    const token = replacePMVarTemplating(
+      getVariableValue(auth.oauth2, "accessToken") ?? ""
+    )
+
    return {
      authType: "oauth-2",
      authActive: true,
-      accessTokenURL: replacePMVarTemplating(
-        getVariableValue(auth.oauth2, "accessTokenUrl") ?? ""
-      ),
-      authURL: replacePMVarTemplating(
-        getVariableValue(auth.oauth2, "authUrl") ?? ""
-      ),
-      clientID: replacePMVarTemplating(
-        getVariableValue(auth.oauth2, "clientId") ?? ""
-      ),
-      scope: replacePMVarTemplating(
-        getVariableValue(auth.oauth2, "scope") ?? ""
-      ),
-      token: replacePMVarTemplating(
-        getVariableValue(auth.oauth2, "accessToken") ?? ""
-      ),
-      oidcDiscoveryURL: "",
+      grantTypeInfo: {
+        grantType: "AUTHORIZATION_CODE",
+        authEndpoint: authURL,
+        clientID: clientId,
+        scopes: scope,
+        token: token,
+        tokenEndpoint: accessTokenURL,
+        clientSecret: "",
+        isPKCE: false,
+      },
+      addTo: "HEADERS",
    }
  }

--- a/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts
+++ b/packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts
@@ -82,16 +82,17 @@ export const getComputedAuthHeaders = (
    })
  } else if (
    request.auth.authType === "bearer" ||
-    request.auth.authType === "oauth-2"
+    (request.auth.authType === "oauth-2" && request.auth.addTo === "HEADERS")
  ) {
+    const token =
+      request.auth.authType === "bearer"
+        ? request.auth.token
+        : request.auth.grantTypeInfo.token
+
    headers.push({
      active: true,
      key: "Authorization",
-      value: `Bearer ${
-        parse
-          ? parseTemplateString(request.auth.token, envVars)
-          : request.auth.token
-      }`,
+      value: `Bearer ${parse ? parseTemplateString(token, envVars) : token}`,
    })
  } else if (request.auth.authType === "api-key") {
    const { key, addTo } = request.auth
@@ -196,17 +197,40 @@ export const getComputedParams = (
 ): ComputedParam[] => {
  // When this gets complex, its best to split this function off (like with getComputedHeaders)
  // API-key auth can be added to query params
-  if (!req.auth || !req.auth.authActive) return []
-  if (req.auth.authType !== "api-key") return []
-  if (req.auth.addTo !== "Query params") return []
+  if (!req.auth || !req.auth.authActive) {
+    return []
+  }
+
+  if (req.auth.authType !== "api-key" && req.auth.authType !== "oauth-2") {
+    return []
+  }
+
+  if (req.auth.addTo !== "QUERY_PARAMS") {
+    return []
+  }
+
+  if (req.auth.authType === "api-key") {
+    return [
+      {
+        source: "auth" as const,
+        param: {
+          active: true,
+          key: parseTemplateString(req.auth.key, envVars),
+          value: parseTemplateString(req.auth.value, envVars),
+        },
+      },
+    ]
+  }
+
+  const { grantTypeInfo } = req.auth

  return [
    {
      source: "auth",
      param: {
        active: true,
-        key: parseTemplateString(req.auth.key, envVars),
-        value: parseTemplateString(req.auth.value, envVars),
+        key: "access_token",
+        value: parseTemplateString(grantTypeInfo.token, envVars),
      },
    },
  ]
--- a/packages/hoppscotch-common/src/pages/oauth.vue
+++ b/packages/hoppscotch-common/src/pages/oauth.vue
@@ -5,23 +5,31 @@
 </template>

 <script setup lang="ts">
-import { handleOAuthRedirect } from "~/helpers/oauth"
-import { useToast } from "~/composables/toast"
 import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"

-import * as E from "fp-ts/Either"
 import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"
+import * as E from "fp-ts/Either"
 import { onMounted } from "vue"
+import { RESTTabService } from "~/services/tab/rest"

 import { useRouter } from "vue-router"

+import {
+  PersistedOAuthConfig,
+  routeOAuthRedirect,
+} from "~/services/oauth/oauth.service"
+import { PersistenceService } from "~/services/persistence"
+import { GQLTabService } from "~/services/tab/graphql"
+
 const t = useI18n()
 const router = useRouter()

 const toast = useToast()

-const tabs = useService(RESTTabService)
+const gqlTabs = useService(GQLTabService)
+const persistenceService = useService(PersistenceService)
+const restTabs = useService(RESTTabService)

 function translateOAuthRedirectError(error: string) {
  switch (error) {
@@ -60,22 +68,58 @@ function translateOAuthRedirectError(error: string) {
 }

 onMounted(async () => {
-  const tokenInfo = await handleOAuthRedirect()
+  const localOAuthTempConfig =
+    persistenceService.getLocalConfig("oauth_temp_config")
+
+  if (!localOAuthTempConfig) {
+    toast.error(t("authorization.oauth.something_went_wrong_on_oauth_redirect"))
+    router.push("/")
+    return
+  }
+
+  const persistedOAuthConfig: PersistedOAuthConfig =
+    JSON.parse(localOAuthTempConfig)
+
+  const { context, source } = persistedOAuthConfig
+
+  const tokenInfo = await routeOAuthRedirect()

  if (E.isLeft(tokenInfo)) {
    toast.error(translateOAuthRedirectError(tokenInfo.left))
-    router.push("/")
+    router.push(source === "REST" ? "/" : "/graphql")
    return
  }

+  // Indicates the access token generation flow originated from the modal for setting authorization/headers at the collection level
+  if (context?.type === "collection-properties") {
+    // Set the access token in `localStorage` to retrieve from the modal while redirecting back
+    persistenceService.setLocalConfig(
+      "oauth_temp_config",
+      JSON.stringify(<PersistedOAuthConfig>{
+        ...persistedOAuthConfig,
+        token: tokenInfo.right.access_token,
+      })
+    )
+
+    toast.success(t("authorization.oauth.token_fetched_successfully"))
+
+    router.push(source === "REST" ? "/" : "/graphql")
+    return
+  }
+
+  const routeToRedirect = source === "GraphQL" ? "/graphql" : "/"
+  const tabService = source === "GraphQL" ? gqlTabs : restTabs
+
  if (
-    tabs.currentActiveTab.value.document.request.auth.authType === "oauth-2"
+    tabService.currentActiveTab.value.document.request.auth.authType ===
+    "oauth-2"
  ) {
-    tabs.currentActiveTab.value.document.request.auth.token =
+    tabService.currentActiveTab.value.document.request.auth.grantTypeInfo.token =
      tokenInfo.right.access_token

-    router.push("/")
-    return
+    toast.success(t("authorization.oauth.token_fetched_successfully"))
  }
+
+  router.push(routeToRedirect)
 })
 </script>
--- a/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
+++ b/packages/hoppscotch-common/src/platform/std/interceptors/extension.ts
@@ -231,6 +231,7 @@ export class ExtensionInterceptorService
    try {
      const result = await extensionHook.sendRequest({
        ...req,
+        headers: req.headers ?? {},
        wantsBinary: true,
      })

--- a/packages/hoppscotch-common/src/services/oauth/flows/authCode.ts
+++ b/packages/hoppscotch-common/src/services/oauth/flows/authCode.ts
@@ -0,0 +1,293 @@
+import { PersistenceService } from "~/services/persistence"
+import {
+  OauthAuthService,
+  PersistedOAuthConfig,
+  createFlowConfig,
+  decodeResponseAsJSON,
+  generateRandomString,
+} from "../oauth.service"
+import { z } from "zod"
+import { getService } from "~/modules/dioc"
+import * as E from "fp-ts/Either"
+import { InterceptorService } from "~/services/interceptor.service"
+import { AuthCodeGrantTypeParams } from "@hoppscotch/data"
+
+const persistenceService = getService(PersistenceService)
+const interceptorService = getService(InterceptorService)
+
+const AuthCodeOauthFlowParamsSchema = AuthCodeGrantTypeParams.pick({
+  authEndpoint: true,
+  tokenEndpoint: true,
+  clientID: true,
+  clientSecret: true,
+  scopes: true,
+  isPKCE: true,
+  codeVerifierMethod: true,
+})
+  .refine(
+    (params) => {
+      return (
+        params.authEndpoint.length >= 1 &&
+        params.tokenEndpoint.length >= 1 &&
+        params.clientID.length >= 1 &&
+        params.clientSecret.length >= 1 &&
+        (!params.scopes || params.scopes.trim().length >= 1)
+      )
+    },
+    {
+      message: "Minimum length requirement not met for one or more parameters",
+    }
+  )
+  .refine((params) => (params.isPKCE ? !!params.codeVerifierMethod : true), {
+    message: "codeVerifierMethod is required when using PKCE",
+    path: ["codeVerifierMethod"],
+  })
+
+export type AuthCodeOauthFlowParams = z.infer<
+  typeof AuthCodeOauthFlowParamsSchema
+>
+
+export const getDefaultAuthCodeOauthFlowParams =
+  (): AuthCodeOauthFlowParams => ({
+    authEndpoint: "",
+    tokenEndpoint: "",
+    clientID: "",
+    clientSecret: "",
+    scopes: undefined,
+    isPKCE: false,
+    codeVerifierMethod: "S256",
+  })
+
+const initAuthCodeOauthFlow = async ({
+  tokenEndpoint,
+  clientID,
+  clientSecret,
+  scopes,
+  authEndpoint,
+  isPKCE,
+  codeVerifierMethod,
+}: AuthCodeOauthFlowParams) => {
+  const state = generateRandomString()
+
+  let codeVerifier: string | undefined
+  let codeChallenge: string | undefined
+
+  if (isPKCE) {
+    codeVerifier = generateCodeVerifier()
+    codeChallenge = await generateCodeChallenge(
+      codeVerifier,
+      codeVerifierMethod
+    )
+  }
+
+  let oauthTempConfig: {
+    state: string
+    grant_type: "AUTHORIZATION_CODE"
+    authEndpoint: string
+    tokenEndpoint: string
+    clientSecret: string
+    clientID: string
+    isPKCE: boolean
+    codeVerifier?: string
+    codeVerifierMethod?: string
+    codeChallenge?: string
+    scopes?: string
+  } = {
+    state,
+    grant_type: "AUTHORIZATION_CODE",
+    authEndpoint,
+    tokenEndpoint,
+    clientSecret,
+    clientID,
+    isPKCE,
+    codeVerifierMethod,
+    scopes,
+  }
+
+  if (codeVerifier && codeChallenge) {
+    oauthTempConfig = {
+      ...oauthTempConfig,
+      codeVerifier,
+      codeChallenge,
+    }
+  }
+
+  const localOAuthTempConfig =
+    persistenceService.getLocalConfig("oauth_temp_config")
+
+  const persistedOAuthConfig: PersistedOAuthConfig = localOAuthTempConfig
+    ? { ...JSON.parse(localOAuthTempConfig) }
+    : {}
+
+  const { grant_type, ...rest } = oauthTempConfig
+
+  // persist the state so we can compare it when we get redirected back
+  // also persist the grant_type,tokenEndpoint and clientSecret so we can use them when we get redirected back
+  persistenceService.setLocalConfig(
+    "oauth_temp_config",
+    JSON.stringify(<PersistedOAuthConfig>{
+      ...persistedOAuthConfig,
+      fields: rest,
+      grant_type,
+    })
+  )
+
+  let url: URL
+
+  try {
+    url = new URL(authEndpoint)
+  } catch (e) {
+    return E.left("INVALID_AUTH_ENDPOINT")
+  }
+
+  url.searchParams.set("grant_type", "authorization_code")
+  url.searchParams.set("client_id", clientID)
+  url.searchParams.set("state", state)
+  url.searchParams.set("response_type", "code")
+  url.searchParams.set("redirect_uri", OauthAuthService.redirectURI)
+
+  if (scopes) url.searchParams.set("scope", scopes)
+
+  if (codeVerifierMethod && codeChallenge) {
+    url.searchParams.set("code_challenge", codeChallenge)
+    url.searchParams.set("code_challenge_method", codeVerifierMethod)
+  }
+
+  // Redirect to the authorization server
+  window.location.assign(url.toString())
+
+  return E.right(undefined)
+}
+
+const handleRedirectForAuthCodeOauthFlow = async (localConfig: string) => {
+  // parse the query string
+  const params = new URLSearchParams(window.location.search)
+
+  const code = params.get("code")
+  const state = params.get("state")
+  const error = params.get("error")
+
+  if (error) {
+    return E.left("AUTH_SERVER_RETURNED_ERROR")
+  }
+
+  if (!code) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED")
+  }
+
+  const expectedSchema = z.object({
+    source: z.optional(z.string()),
+    state: z.string(),
+    tokenEndpoint: z.string(),
+    clientSecret: z.string(),
+    clientID: z.string(),
+    codeVerifier: z.string().optional(),
+    codeChallenge: z.string().optional(),
+  })
+
+  const decodedLocalConfig = expectedSchema.safeParse(
+    JSON.parse(localConfig).fields
+  )
+
+  if (!decodedLocalConfig.success) {
+    return E.left("INVALID_LOCAL_CONFIG")
+  }
+
+  // check if the state matches
+  if (decodedLocalConfig.data.state !== state) {
+    return E.left("INVALID_STATE")
+  }
+
+  // exchange the code for a token
+  const formData = new URLSearchParams()
+  formData.append("grant_type", "authorization_code")
+  formData.append("code", code)
+  formData.append("client_id", decodedLocalConfig.data.clientID)
+  formData.append("client_secret", decodedLocalConfig.data.clientSecret)
+  formData.append("redirect_uri", OauthAuthService.redirectURI)
+
+  if (decodedLocalConfig.data.codeVerifier) {
+    formData.append("code_verifier", decodedLocalConfig.data.codeVerifier)
+  }
+
+  const { response } = interceptorService.runRequest({
+    url: decodedLocalConfig.data.tokenEndpoint,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    data: formData.toString(),
+  })
+
+  const res = await response
+
+  if (E.isLeft(res)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const responsePayload = decodeResponseAsJSON(res.right)
+
+  if (E.isLeft(responsePayload)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const withAccessTokenSchema = z.object({
+    access_token: z.string(),
+  })
+
+  const parsedTokenResponse = withAccessTokenSchema.safeParse(
+    responsePayload.right
+  )
+
+  return parsedTokenResponse.success
+    ? E.right(parsedTokenResponse.data)
+    : E.left("AUTH_TOKEN_REQUEST_INVALID_RESPONSE" as const)
+}
+
+const generateCodeVerifier = () => {
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~"
+  const length = Math.floor(Math.random() * (128 - 43 + 1)) + 43 // Random length between 43 and 128
+  let codeVerifier = ""
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length)
+    codeVerifier += characters[randomIndex]
+  }
+
+  return codeVerifier
+}
+
+const generateCodeChallenge = async (
+  codeVerifier: string,
+  strategy: AuthCodeOauthFlowParams["codeVerifierMethod"]
+) => {
+  if (strategy === "plain") {
+    return codeVerifier
+  }
+
+  const encoder = new TextEncoder()
+  const data = encoder.encode(codeVerifier)
+
+  const buffer = await crypto.subtle.digest("SHA-256", data)
+
+  return encodeArrayBufferAsUrlEncodedBase64(buffer)
+}
+
+const encodeArrayBufferAsUrlEncodedBase64 = (buffer: ArrayBuffer) => {
+  const hashArray = Array.from(new Uint8Array(buffer))
+  const hashBase64URL = btoa(String.fromCharCode(...hashArray))
+    .replace(/=/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+
+  return hashBase64URL
+}
+
+export default createFlowConfig(
+  "AUTHORIZATION_CODE" as const,
+  AuthCodeOauthFlowParamsSchema,
+  initAuthCodeOauthFlow,
+  handleRedirectForAuthCodeOauthFlow
+)
--- a/packages/hoppscotch-common/src/services/oauth/flows/clientCredentials.ts
+++ b/packages/hoppscotch-common/src/services/oauth/flows/clientCredentials.ts
@@ -0,0 +1,183 @@
+import {
+  OauthAuthService,
+  createFlowConfig,
+  decodeResponseAsJSON,
+} from "../oauth.service"
+import { z } from "zod"
+import { getService } from "~/modules/dioc"
+import * as E from "fp-ts/Either"
+import { InterceptorService } from "~/services/interceptor.service"
+import { useToast } from "~/composables/toast"
+import { ClientCredentialsGrantTypeParams } from "@hoppscotch/data"
+
+const interceptorService = getService(InterceptorService)
+
+const ClientCredentialsFlowParamsSchema = ClientCredentialsGrantTypeParams.pick(
+  {
+    authEndpoint: true,
+    clientID: true,
+    clientSecret: true,
+    scopes: true,
+  }
+).refine(
+  (params) => {
+    return (
+      params.authEndpoint.length >= 1 &&
+      params.clientID.length >= 1 &&
+      params.clientSecret.length >= 1 &&
+      (!params.scopes || params.scopes.length >= 1)
+    )
+  },
+  {
+    message: "Minimum length requirement not met for one or more parameters",
+  }
+)
+
+export type ClientCredentialsFlowParams = z.infer<
+  typeof ClientCredentialsFlowParamsSchema
+>
+
+export const getDefaultClientCredentialsFlowParams =
+  (): ClientCredentialsFlowParams => ({
+    authEndpoint: "",
+    clientID: "",
+    clientSecret: "",
+    scopes: undefined,
+  })
+
+const initClientCredentialsOAuthFlow = async ({
+  clientID,
+  clientSecret,
+  scopes,
+  authEndpoint,
+}: ClientCredentialsFlowParams) => {
+  const toast = useToast()
+
+  const formData = new URLSearchParams()
+  formData.append("grant_type", "client_credentials")
+  formData.append("client_id", clientID)
+  formData.append("client_secret", clientSecret)
+
+  if (scopes) {
+    formData.append("scope", scopes)
+  }
+
+  const { response } = interceptorService.runRequest({
+    url: authEndpoint,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    data: formData.toString(),
+  })
+
+  const res = await response
+
+  if (E.isLeft(res)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const responsePayload = decodeResponseAsJSON(res.right)
+
+  if (E.isLeft(responsePayload)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const withAccessTokenSchema = z.object({
+    access_token: z.string(),
+  })
+
+  const parsedTokenResponse = withAccessTokenSchema.safeParse(
+    responsePayload.right
+  )
+
+  if (!parsedTokenResponse.success) {
+    toast.error("AUTH_TOKEN_REQUEST_INVALID_RESPONSE")
+  }
+
+  return parsedTokenResponse.success
+    ? E.right(parsedTokenResponse.data)
+    : E.left("AUTH_TOKEN_REQUEST_INVALID_RESPONSE" as const)
+}
+
+const handleRedirectForAuthCodeOauthFlow = async (localConfig: string) => {
+  // parse the query string
+  const params = new URLSearchParams(window.location.search)
+
+  const code = params.get("code")
+  const state = params.get("state")
+  const error = params.get("error")
+
+  if (error) {
+    return E.left("AUTH_SERVER_RETURNED_ERROR")
+  }
+
+  if (!code) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED")
+  }
+
+  const expectedSchema = z.object({
+    state: z.string(),
+    tokenEndpoint: z.string(),
+    clientSecret: z.string(),
+    clientID: z.string(),
+  })
+
+  const decodedLocalConfig = expectedSchema.safeParse(JSON.parse(localConfig))
+
+  if (!decodedLocalConfig.success) {
+    return E.left("INVALID_LOCAL_CONFIG")
+  }
+
+  // check if the state matches
+  if (decodedLocalConfig.data.state !== state) {
+    return E.left("INVALID_STATE")
+  }
+
+  // exchange the code for a token
+  const formData = new URLSearchParams()
+  formData.append("code", code)
+  formData.append("client_id", decodedLocalConfig.data.clientID)
+  formData.append("client_secret", decodedLocalConfig.data.clientSecret)
+  formData.append("redirect_uri", OauthAuthService.redirectURI)
+
+  const { response } = interceptorService.runRequest({
+    url: decodedLocalConfig.data.tokenEndpoint,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    data: formData.toString(),
+  })
+
+  const res = await response
+
+  if (E.isLeft(res)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const responsePayload = new TextDecoder("utf-8")
+    .decode(res.right.data as any)
+    .replaceAll("\x00", "")
+
+  const withAccessTokenSchema = z.object({
+    access_token: z.string(),
+  })
+
+  const parsedTokenResponse = withAccessTokenSchema.safeParse(
+    JSON.parse(responsePayload)
+  )
+
+  return parsedTokenResponse.success
+    ? E.right(parsedTokenResponse.data)
+    : E.left("AUTH_TOKEN_REQUEST_INVALID_RESPONSE" as const)
+}
+
+export default createFlowConfig(
+  "CLIENT_CREDENTIALS" as const,
+  ClientCredentialsFlowParamsSchema,
+  initClientCredentialsOAuthFlow,
+  handleRedirectForAuthCodeOauthFlow
+)
--- a/packages/hoppscotch-common/src/services/oauth/flows/implicit.ts
+++ b/packages/hoppscotch-common/src/services/oauth/flows/implicit.ts
@@ -0,0 +1,135 @@
+import { PersistenceService } from "~/services/persistence"
+import {
+  OauthAuthService,
+  PersistedOAuthConfig,
+  createFlowConfig,
+  generateRandomString,
+} from "../oauth.service"
+import { z } from "zod"
+import { getService } from "~/modules/dioc"
+import * as E from "fp-ts/Either"
+import { ImplicitOauthFlowParams } from "@hoppscotch/data"
+
+const persistenceService = getService(PersistenceService)
+
+const ImplicitOauthFlowParamsSchema = ImplicitOauthFlowParams.pick({
+  authEndpoint: true,
+  clientID: true,
+  scopes: true,
+}).refine((params) => {
+  return (
+    params.authEndpoint.length >= 1 &&
+    params.clientID.length >= 1 &&
+    (params.scopes === undefined || params.scopes.length >= 1)
+  )
+})
+
+export type ImplicitOauthFlowParams = z.infer<
+  typeof ImplicitOauthFlowParamsSchema
+>
+
+export const getDefaultImplicitOauthFlowParams =
+  (): ImplicitOauthFlowParams => ({
+    authEndpoint: "",
+    clientID: "",
+    scopes: undefined,
+  })
+
+const initImplicitOauthFlow = async ({
+  clientID,
+  scopes,
+  authEndpoint,
+}: ImplicitOauthFlowParams) => {
+  const state = generateRandomString()
+
+  const localOAuthTempConfig =
+    persistenceService.getLocalConfig("oauth_temp_config")
+
+  const persistedOAuthConfig: PersistedOAuthConfig = localOAuthTempConfig
+    ? { ...JSON.parse(localOAuthTempConfig) }
+    : {}
+
+  // Persist the necessary information for retrieval while getting redirected back
+  persistenceService.setLocalConfig(
+    "oauth_temp_config",
+    JSON.stringify(<PersistedOAuthConfig>{
+      ...persistedOAuthConfig,
+      fields: {
+        clientID,
+        authEndpoint,
+        scopes,
+        state,
+      },
+      grant_type: "IMPLICIT",
+    })
+  )
+
+  let url: URL
+
+  try {
+    url = new URL(authEndpoint)
+  } catch {
+    return E.left("INVALID_AUTH_ENDPOINT")
+  }
+
+  url.searchParams.set("client_id", clientID)
+  url.searchParams.set("state", state)
+  url.searchParams.set("response_type", "token")
+  url.searchParams.set("redirect_uri", OauthAuthService.redirectURI)
+
+  if (scopes) url.searchParams.set("scope", scopes)
+
+  // Redirect to the authorization server
+  window.location.assign(url.toString())
+
+  return E.right(undefined)
+}
+
+const handleRedirectForAuthCodeOauthFlow = async (localConfig: string) => {
+  // parse the query string
+  const params = new URLSearchParams(window.location.search)
+  const paramsFromHash = new URLSearchParams(window.location.hash.substring(1))
+
+  const accessToken =
+    params.get("access_token") || paramsFromHash.get("access_token")
+  const state = params.get("state") || paramsFromHash.get("state")
+  const error = params.get("error") || paramsFromHash.get("error")
+
+  if (error) {
+    return E.left("AUTH_SERVER_RETURNED_ERROR")
+  }
+
+  if (!accessToken) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED")
+  }
+
+  const expectedSchema = z.object({
+    source: z.optional(z.string()),
+    state: z.string(),
+    clientID: z.string(),
+  })
+
+  const decodedLocalConfig = expectedSchema.safeParse(
+    JSON.parse(localConfig).fields
+  )
+
+  if (!decodedLocalConfig.success) {
+    return E.left("INVALID_LOCAL_CONFIG")
+  }
+
+  // check if the state matches
+  if (decodedLocalConfig.data.state !== state) {
+    return E.left("INVALID_STATE")
+  }
+
+  return E.right({
+    access_token: accessToken,
+  })
+}
+
+export default createFlowConfig(
+  "IMPLICIT" as const,
+  ImplicitOauthFlowParamsSchema,
+  initImplicitOauthFlow,
+  handleRedirectForAuthCodeOauthFlow
+)
--- a/packages/hoppscotch-common/src/services/oauth/flows/password.ts
+++ b/packages/hoppscotch-common/src/services/oauth/flows/password.ts
@@ -0,0 +1,189 @@
+import {
+  OauthAuthService,
+  createFlowConfig,
+  decodeResponseAsJSON,
+} from "../oauth.service"
+import { z } from "zod"
+import { getService } from "~/modules/dioc"
+import * as E from "fp-ts/Either"
+import { InterceptorService } from "~/services/interceptor.service"
+import { useToast } from "~/composables/toast"
+import { PasswordGrantTypeParams } from "@hoppscotch/data"
+
+const interceptorService = getService(InterceptorService)
+
+const PasswordFlowParamsSchema = PasswordGrantTypeParams.pick({
+  authEndpoint: true,
+  clientID: true,
+  clientSecret: true,
+  scopes: true,
+  username: true,
+  password: true,
+}).refine(
+  (params) => {
+    return (
+      params.authEndpoint.length >= 1 &&
+      params.clientID.length >= 1 &&
+      params.clientSecret.length >= 1 &&
+      params.username.length >= 1 &&
+      params.password.length >= 1 &&
+      (!params.scopes || params.scopes.length >= 1)
+    )
+  },
+  {
+    message: "Minimum length requirement not met for one or more parameters",
+  }
+)
+
+export type PasswordFlowParams = z.infer<typeof PasswordFlowParamsSchema>
+
+export const getDefaultPasswordFlowParams = (): PasswordFlowParams => ({
+  authEndpoint: "",
+  clientID: "",
+  clientSecret: "",
+  scopes: undefined,
+  username: "",
+  password: "",
+})
+
+const initPasswordOauthFlow = async ({
+  password,
+  username,
+  clientID,
+  clientSecret,
+  scopes,
+  authEndpoint,
+}: PasswordFlowParams) => {
+  const toast = useToast()
+
+  const formData = new URLSearchParams()
+  formData.append("grant_type", "password")
+  formData.append("client_id", clientID)
+  formData.append("client_secret", clientSecret)
+  formData.append("username", username)
+  formData.append("password", password)
+
+  if (scopes) {
+    formData.append("scope", scopes)
+  }
+
+  const { response } = interceptorService.runRequest({
+    url: authEndpoint,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    data: formData.toString(),
+  })
+
+  const res = await response
+
+  if (E.isLeft(res) || res.right.status !== 200) {
+    toast.error("AUTH_TOKEN_REQUEST_FAILED")
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const responsePayload = new TextDecoder("utf-8")
+    .decode(res.right.data as any)
+    .replaceAll("\x00", "")
+
+  const withAccessTokenSchema = z.object({
+    access_token: z.string(),
+  })
+
+  const parsedTokenResponse = withAccessTokenSchema.safeParse(
+    JSON.parse(responsePayload)
+  )
+
+  if (!parsedTokenResponse.success) {
+    toast.error("AUTH_TOKEN_REQUEST_INVALID_RESPONSE")
+  }
+
+  return parsedTokenResponse.success
+    ? E.right(parsedTokenResponse.data)
+    : E.left("AUTH_TOKEN_REQUEST_INVALID_RESPONSE" as const)
+}
+
+const handleRedirectForAuthCodeOauthFlow = async (localConfig: string) => {
+  // parse the query string
+  const params = new URLSearchParams(window.location.search)
+
+  const code = params.get("code")
+  const state = params.get("state")
+  const error = params.get("error")
+
+  if (error) {
+    return E.left("AUTH_SERVER_RETURNED_ERROR")
+  }
+
+  if (!code) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED")
+  }
+
+  const expectedSchema = z.object({
+    state: z.string(),
+    tokenEndpoint: z.string(),
+    clientSecret: z.string(),
+    clientID: z.string(),
+  })
+
+  const decodedLocalConfig = expectedSchema.safeParse(JSON.parse(localConfig))
+
+  if (!decodedLocalConfig.success) {
+    return E.left("INVALID_LOCAL_CONFIG")
+  }
+
+  // check if the state matches
+  if (decodedLocalConfig.data.state !== state) {
+    return E.left("INVALID_STATE")
+  }
+
+  // exchange the code for a token
+  const formData = new URLSearchParams()
+  formData.append("code", code)
+  formData.append("client_id", decodedLocalConfig.data.clientID)
+  formData.append("client_secret", decodedLocalConfig.data.clientSecret)
+  formData.append("redirect_uri", OauthAuthService.redirectURI)
+
+  const { response } = interceptorService.runRequest({
+    url: decodedLocalConfig.data.tokenEndpoint,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    data: formData.toString(),
+  })
+
+  const res = await response
+
+  if (E.isLeft(res)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const responsePayload = decodeResponseAsJSON(res.right)
+
+  if (E.isLeft(responsePayload)) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+
+  const withAccessTokenSchema = z.object({
+    access_token: z.string(),
+  })
+
+  const parsedTokenResponse = withAccessTokenSchema.safeParse(
+    responsePayload.right
+  )
+
+  return parsedTokenResponse.success
+    ? E.right(parsedTokenResponse.data)
+    : E.left("AUTH_TOKEN_REQUEST_INVALID_RESPONSE" as const)
+}
+
+export default createFlowConfig(
+  "PASSWORD" as const,
+  PasswordFlowParamsSchema,
+  initPasswordOauthFlow,
+  handleRedirectForAuthCodeOauthFlow
+)
--- a/packages/hoppscotch-common/src/services/oauth/oauth.service.ts
+++ b/packages/hoppscotch-common/src/services/oauth/oauth.service.ts
@@ -0,0 +1,124 @@
+import { Service } from "dioc"
+import { PersistenceService } from "../persistence"
+import { ZodType, z } from "zod"
+import * as E from "fp-ts/Either"
+import authCode, { AuthCodeOauthFlowParams } from "./flows/authCode"
+import implicit, { ImplicitOauthFlowParams } from "./flows/implicit"
+import { getService } from "~/modules/dioc"
+import { HoppCollection } from "@hoppscotch/data"
+import { TeamCollection } from "~/helpers/backend/graphql"
+
+export type PersistedOAuthConfig = {
+  source: "REST" | "GraphQL"
+  context?: {
+    type: "collection-properties" | "request-tab"
+    metadata: {
+      collection?: HoppCollection | TeamCollection
+      collectionID?: string
+    }
+  }
+  grant_type: string
+  fields?: (AuthCodeOauthFlowParams | ImplicitOauthFlowParams) & {
+    state: string
+  }
+  token?: string
+}
+
+const persistenceService = getService(PersistenceService)
+
+export const grantTypesInvolvingRedirect = ["AUTHORIZATION_CODE", "IMPLICIT"]
+
+export const routeOAuthRedirect = async () => {
+  // get the temp data from the local storage
+  const localOAuthTempConfig =
+    persistenceService.getLocalConfig("oauth_temp_config")
+
+  if (!localOAuthTempConfig) {
+    return E.left("INVALID_STATE")
+  }
+
+  const expectedSchema = z.object({
+    source: z.optional(z.string()),
+    grant_type: z.string(),
+  })
+
+  const decodedLocalConfig = expectedSchema.safeParse(
+    JSON.parse(localOAuthTempConfig)
+  )
+
+  if (!decodedLocalConfig.success) {
+    return E.left("INVALID_STATE")
+  }
+
+  // route the request to the correct flow
+  const flowConfig = [authCode, implicit].find(
+    (flow) => flow.flow === decodedLocalConfig.data.grant_type
+  )
+
+  if (!flowConfig) {
+    return E.left("INVALID_STATE")
+  }
+
+  return flowConfig?.onRedirectReceived(localOAuthTempConfig)
+}
+
+export function createFlowConfig<
+  Flow extends string,
+  AuthParams extends Record<string, unknown>,
+  InitFuncReturnObject extends Record<string, unknown>,
+>(
+  flow: Flow,
+  params: ZodType<AuthParams>,
+  init: (
+    params: AuthParams
+  ) =>
+    | E.Either<string, InitFuncReturnObject>
+    | Promise<E.Either<string, InitFuncReturnObject>>
+    | E.Either<string, undefined>
+    | Promise<E.Either<string, undefined>>,
+  onRedirectReceived: (localConfig: string) => Promise<
+    E.Either<
+      string,
+      {
+        access_token: string
+      }
+    >
+  >
+) {
+  return {
+    flow,
+    params,
+    init,
+    onRedirectReceived,
+  }
+}
+
+export const decodeResponseAsJSON = (response: { data: any }) => {
+  try {
+    const responsePayload = new TextDecoder("utf-8")
+      .decode(response.data as any)
+      .replaceAll("\x00", "")
+
+    return E.right(JSON.parse(responsePayload) as Record<string, unknown>)
+  } catch (error) {
+    return E.left("AUTH_TOKEN_REQUEST_FAILED" as const)
+  }
+}
+
+export class OauthAuthService extends Service {
+  public static readonly ID = "OAUTH_AUTH_SERVICE"
+
+  static redirectURI = `${window.location.origin}/oauth`
+
+  constructor() {
+    super()
+  }
+}
+
+export const generateRandomString = () => {
+  const length = 64
+  const possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+  const values = crypto.getRandomValues(new Uint8Array(length))
+  return values.reduce((acc, x) => acc + possible[x % possible.length], "")
+}
--- a/packages/hoppscotch-common/src/services/persistence/tests/mocks/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/tests/mocks/index.ts
@@ -25,7 +25,7 @@ export const REST_COLLECTIONS_MOCK: HoppCollection[] = [
    folders: [],
    requests: [
      {
-        v: "2",
+        v: "3",
        endpoint: "https://echo.hoppscotch.io",
        name: "Echo test",
        params: [],
@@ -50,7 +50,7 @@ export const GQL_COLLECTIONS_MOCK: HoppCollection[] = [
    folders: [],
    requests: [
      {
-        v: 2,
+        v: 3,
        name: "Echo test",
        url: "https://echo.hoppscotch.io/graphql",
        headers: [],
@@ -138,7 +138,7 @@ export const REST_HISTORY_MOCK: RESTHistoryEntry[] = [
      preRequestScript: "",
      testScript: "",
      requestVariables: [],
-      v: "2",
+      v: "3",
    },
    responseMeta: { duration: 807, statusCode: 200 },
    star: false,
@@ -150,7 +150,7 @@ export const GQL_HISTORY_MOCK: GQLHistoryEntry[] = [
  {
    v: 1,
    request: {
-      v: 2,
+      v: 3,
      name: "Untitled",
      url: "https://echo.hoppscotch.io/graphql",
      query: "query Request { url }",
@@ -171,7 +171,7 @@ export const GQL_TAB_STATE_MOCK: PersistableTabState<HoppGQLDocument> = {
      tabID: "5edbe8d4-65c9-4381-9354-5f1bf05d8ccc",
      doc: {
        request: {
-          v: 2,
+          v: 3,
          name: "Untitled",
          url: "https://echo.hoppscotch.io/graphql",
          headers: [],
@@ -194,7 +194,7 @@ export const REST_TAB_STATE_MOCK: PersistableTabState<HoppRESTDocument> = {
      tabID: "e6e8d800-caa8-44a2-a6a6-b4765a3167aa",
      doc: {
        request: {
-          v: "2",
+          v: "3",
          endpoint: "https://echo.hoppscotch.io",
          name: "Echo test",
          params: [],