feat: add OAuth 2.0 support

components/http/Authorization.vue

@@ -53,9 +53,22 @@
               $refs.authTypeOptions.tippy().hide()
             "
           />
+          <SmartItem
+            label="OAuth 2.0"
+            @click.native="
+              authType = 'oauth-2'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
         </tippy>
       </span>
       <div class="flex">
+        <!-- <SmartToggle
+          :on="!URLExcludes.auth"
+          @change="setExclude('auth', !$event)"
+        >
+          {{ $t("authorization.include_in_url") }}
+        </SmartToggle> -->
         <SmartToggle
           :on="authActive"
           class="px-2"
@@ -161,12 +174,30 @@
         />
       </div>
     </div>
-    <!-- <SmartToggle
-        :on="!URL_EXCLUDES.auth"
-        @change="setExclude('auth', !$event)"
-      >
-        {{ $t("authorization.include_in_url") }}
-      </SmartToggle> -->
+    <div v-if="authType === 'oauth-2'" class="space-y-2 p-2">
+      <div class="flex relative">
+        <input
+          id="oauth2_token"
+          v-model="oauth2Token"
+          class="input floating-input"
+          placeholder=" "
+          name="oauth2_token"
+        />
+        <label for="oauth2_token"> Token </label>
+      </div>
+      <HttpOAuth2Authorization />
+      <div class="p-2">
+        <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
+        </div>
+        <SmartAnchor
+          class="link"
+          :label="$t('action.learn_more')"
+          to="https://docs.hoppscotch.io/"
+          blank
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -175,6 +206,7 @@ import { computed, defineComponent, Ref, ref } from "@nuxtjs/composition-api"
 import {
   HoppRESTAuthBasic,
   HoppRESTAuthBearer,
+  HoppRESTAuthOAuth2,
 } from "~/helpers/types/HoppRESTAuth"
 import { pluckRef, useStream } from "~/helpers/utils/composables"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
@@ -192,6 +224,7 @@ export default defineComponent({
     const authName = computed(() => {
       if (authType.value === "basic") return "Basic Auth"
       else if (authType.value === "bearer") return "Bearer"
+      else if (authType.value === "oauth-2") return "OAuth 2.0"
       else return "None"
     })
     const authActive = pluckRef(auth, "authActive")
@@ -201,6 +234,8 @@ export default defineComponent({
 
     const bearerToken = pluckRef(auth as Ref<HoppRESTAuthBearer>, "token")
 
+    const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
+
     const URLExcludes = useSetting("URL_EXCLUDES")
 
     const passwordFieldType = ref("password")
@@ -226,6 +261,7 @@ export default defineComponent({
       basicUsername,
       basicPassword,
       bearerToken,
+      oauth2Token,
       URLExcludes,
       passwordFieldType,
       clearContent,

components/http/OAuth2Authorization.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="flex flex-col space-y-2">
+    <div class="flex relative">
+      <input
+        id="oidcDiscoveryURL"
+        v-model="oidcDiscoveryURL"
+        class="input floating-input"
+        placeholder=" "
+        name="oidcDiscoveryURL"
+      />
+      <label for="oidcDiscoveryURL">oidcDiscoveryURL </label>
+    </div>
+    <div class="flex relative">
+      <input
+        id="authURL"
+        v-model="authURL"
+        class="input floating-input"
+        placeholder=" "
+        name="authURL"
+      />
+      <label for="authURL">authURL </label>
+    </div>
+    <div class="flex relative">
+      <input
+        id="accessTokenURL"
+        v-model="accessTokenURL"
+        class="input floating-input"
+        placeholder=" "
+        name="accessTokenURL"
+      />
+      <label for="accessTokenURL">accessTokenURL </label>
+    </div>
+    <div class="flex relative">
+      <input
+        id="clientID"
+        v-model="clientID"
+        class="input floating-input"
+        placeholder=" "
+        name="clientID"
+      />
+      <label for="clientID">clientID </label>
+    </div>
+    <div class="flex relative">
+      <input
+        id="scope"
+        v-model="scope"
+        class="input floating-input"
+        placeholder=" "
+        name="scope"
+      />
+      <label for="scope">scope </label>
+    </div>
+    <div>
+      <ButtonPrimary
+        label="Get request"
+        @click.native="handleAccessTokenRequest()"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Ref, useContext } from "@nuxtjs/composition-api"
+import { pluckRef, useStream } from "~/helpers/utils/composables"
+import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
+import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
+import { tokenRequest } from "~/helpers/oauth"
+
+export default {
+  setup() {
+    const {
+      $toast,
+      app: { i18n },
+    } = useContext()
+    const $t = i18n.t.bind(i18n)
+
+    const auth = useStream(
+      restAuth$,
+      { authType: "none", authActive: true },
+      setRESTAuth
+    )
+
+    const oidcDiscoveryURL = pluckRef(
+      auth as Ref<HoppRESTAuthOAuth2>,
+      "oidcDiscoveryURL"
+    )
+
+    const authURL = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "authURL")
+
+    const accessTokenURL = pluckRef(
+      auth as Ref<HoppRESTAuthOAuth2>,
+      "accessTokenURL"
+    )
+
+    const clientID = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "clientID")
+
+    const scope = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "scope")
+
+    const handleAccessTokenRequest = async () => {
+      if (
+        oidcDiscoveryURL.value === "" &&
+        (authURL.value === "" || accessTokenURL.value === "")
+      ) {
+        $toast.error($t("complete_config_urls"), {
+          icon: "error",
+        })
+        return
+      }
+      try {
+        const tokenReqParams = {
+          grantType: "code",
+          oidcDiscoveryUrl: oidcDiscoveryURL.value,
+          authUrl: authURL.value,
+          accessTokenUrl: accessTokenURL.value,
+          clientId: clientID.value,
+          scope: scope.value,
+        }
+        await tokenRequest(tokenReqParams)
+      } catch (e) {
+        $toast.error(e, {
+          icon: "code",
+        })
+      }
+    }
+
+    return {
+      oidcDiscoveryURL,
+      authURL,
+      accessTokenURL,
+      clientID,
+      scope,
+      handleAccessTokenRequest,
+    }
+  },
+}
+</script>