fix: add environment variables for OAuth2 (#2216)

Co-authored-by: Arun Menon <arun.menon@autogeneral.com.au>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/http/OAuth2Authorization.vue

@@ -1,49 +1,25 @@
 <template>
   <div class="flex flex-col">
     <div class="flex flex-1 border-b border-dividerLight">
-      <input
+      <SmartEnvInput
-        id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="flex flex-1 px-4 py-2 bg-transparent"
         placeholder="OpenID Connect Discovery URL"
-        name="oidcDiscoveryURL"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <input
+      <SmartEnvInput v-model="authURL" placeholder="Authorization URL" />
-        id="authURL"
-        v-model="authURL"
-        class="flex flex-1 px-4 py-2 bg-transparent"
-        placeholder="Authentication URL"
-        name="authURL"
-      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <input
+      <SmartEnvInput v-model="accessTokenURL" placeholder="Access Token URL" />
-        id="accessTokenURL"
-        v-model="accessTokenURL"
-        class="flex flex-1 px-4 py-2 bg-transparent"
-        placeholder="Access Token URL"
-        name="accessTokenURL"
-      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <input
+      <SmartEnvInput v-model="clientID" placeholder="Client ID" />
-        id="clientID"
-        v-model="clientID"
-        class="flex flex-1 px-4 py-2 bg-transparent"
-        placeholder="Client ID"
-        name="clientID"
-      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <input
+      <SmartEnvInput v-model="clientSecret" placeholder="Client Secret" />
-        id="scope"
+    </div>
-        v-model="scope"
+    <div class="flex flex-1 border-b border-dividerLight">
-        class="flex flex-1 px-4 py-2 bg-transparent"
+      <SmartEnvInput v-model="scope" placeholder="Scope" />
-        placeholder="Scope"
-        name="scope"
-      />
     </div>
     <div class="p-2">
       <ButtonSecondary
@@ -56,8 +32,8 @@
 </template>
 
 <script lang="ts">
-import { Ref } from "@nuxtjs/composition-api"
+import { Ref, defineComponent } from "@nuxtjs/composition-api"
-import { HoppRESTAuthOAuth2 } from "@hoppscotch/data"
+import { HoppRESTAuthOAuth2, parseTemplateString } from "@hoppscotch/data"
 import {
   pluckRef,
   useI18n,
@@ -66,8 +42,9 @@ import {
 } from "~/helpers/utils/composables"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
 import { tokenRequest } from "~/helpers/oauth"
+import { getCombinedEnvVariables } from "~/helpers/preRequest"
 
-export default {
+export default defineComponent({
   setup() {
     const t = useI18n()
     const toast = useToast()
@@ -92,6 +69,11 @@ export default {
 
     const clientID = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "clientID")
 
+    const clientSecret = pluckRef(
+      auth as Ref<HoppRESTAuthOAuth2>,
+      "clientSecret"
+    )
+
     const scope = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "scope")
 
     const handleAccessTokenRequest = async () => {
@@ -102,14 +84,21 @@ export default {
         toast.error(`${t("error.incomplete_config_urls")}`)
         return
       }
+      const envs = getCombinedEnvVariables()
+      const envVars = [...envs.selected, ...envs.global]
+
       try {
         const tokenReqParams = {
           grantType: "code",
-          oidcDiscoveryUrl: oidcDiscoveryURL.value,
+          oidcDiscoveryUrl: parseTemplateString(
-          authUrl: authURL.value,
+            oidcDiscoveryURL.value,
-          accessTokenUrl: accessTokenURL.value,
+            envVars
-          clientId: clientID.value,
+          ),
-          scope: scope.value,
+          authUrl: parseTemplateString(authURL.value, envVars),
+          accessTokenUrl: parseTemplateString(accessTokenURL.value, envVars),
+          clientId: parseTemplateString(clientID.value, envVars),
+          clientSecret: parseTemplateString(clientSecret.value, envVars),
+          scope: parseTemplateString(scope.value, envVars),
         }
         await tokenRequest(tokenReqParams)
       } catch (e) {
@@ -122,10 +111,11 @@ export default {
       authURL,
       accessTokenURL,
       clientID,
+      clientSecret,
       scope,
       handleAccessTokenRequest,
       t,
     }
   },
-}
+})
 </script>

packages/hoppscotch-app/helpers/oauth.js

@@ -148,6 +148,7 @@ const tokenRequest = async ({
   authUrl,
   accessTokenUrl,
   clientId,
+  clientSecret,
   scope,
 }) => {
   // Check oauth configuration
@@ -160,10 +161,10 @@ const tokenRequest = async ({
     // eslint-disable-next-line camelcase
     accessTokenUrl = token_endpoint
   }
-
   // Store oauth information
   setLocalConfig("tokenEndpoint", accessTokenUrl)
   setLocalConfig("client_id", clientId)
+  setLocalConfig("client_secret", clientSecret)
 
   // Create and store a random state value
   const state = generateRandomString()
@@ -221,6 +222,7 @@ const oauthRedirect = () => {
           grant_type: "authorization_code",
           code: q.code,
           client_id: getLocalConfig("client_id"),
+          client_secret: getLocalConfig("client_secret"),
           redirect_uri: redirectUri,
           code_verifier: getLocalConfig("pkce_codeVerifier"),
         })
@@ -234,6 +236,7 @@ const oauthRedirect = () => {
     removeLocalConfig("pkce_codeVerifier")
     removeLocalConfig("tokenEndpoint")
     removeLocalConfig("client_id")
+    removeLocalConfig("client_secret")
     return tokenResponse
   }
   return Promise.reject(tokenResponse)

packages/hoppscotch-app/pages/index.vue

@@ -159,6 +159,7 @@ export default defineComponent({
 
     setupRequestSync(confirmSync, requestForSync)
     bindRequestToURLParams()
+    oAuthURL()
 
     return {
       confirmSync,