chore: AWS Signature Authorization type flow updates (#4311)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-cli/src/__tests__/e2e/commands/test.spec.ts

@@ -137,7 +137,7 @@ describe("hopp test [options] <file_path_or_id>", () => {
 
         expect(error).toBeNull();
       },
-      { timeout: 50000 }
+      { timeout: 100000 }
     );
 
     test("Persists environment variables set in the pre-request script for consumption in the test script", async () => {
@@ -366,7 +366,7 @@ describe("hopp test [options] <file_path_or_id>", () => {
           expect(error).toBeNull();
         });
       },
-      { timeout: 20000 }
+      { timeout: 50000 }
     );
 
     describe("Request variables", () => {

packages/hoppscotch-common/locales/en.json

@@ -101,7 +101,8 @@
     "updated_text": "Hoppscotch has been updated to v{version} 🎉",
     "whats_new": "What's new?",
     "see_whats_new": "See what’s new",
-    "wiki": "Wiki"
+    "wiki": "Wiki",
+    "default": "default: {value}"
   },
   "auth": {
     "account_exists": "Account exists with different credential - Login to link both accounts",

packages/hoppscotch-common/src/components/graphql/Authorization.vue

@@ -246,6 +246,22 @@ const selectOAuth2AuthType = () => {
   }
 }
 
+const selectAPIKeyAuthType = () => {
+  auth.value = {
+    ...auth.value,
+    authType: "api-key",
+    addTo: "HEADERS",
+  } as HoppGQLAuth
+}
+
+const selectAWSSignatureAuthType = () => {
+  auth.value = {
+    ...auth.value,
+    authType: "aws-signature",
+    addTo: "HEADERS",
+  } as HoppGQLAuth
+}
+
 const authTypes: AuthType[] = [
   {
     key: "inherit",
@@ -271,10 +287,12 @@ const authTypes: AuthType[] = [
   {
     key: "api-key",
     label: "API Key",
+    handler: selectAPIKeyAuthType,
   },
   {
     key: "aws-signature",
     label: "AWS Signature",
+    handler: selectAWSSignatureAuthType,
   },
 ]
 

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -591,6 +591,7 @@ const getComputedAuthHeaders = async (
         region: request.auth.region ?? "us-east-1",
         service: request.auth.serviceName,
         url,
+        sessionToken: request.auth.serviceToken,
       })
 
       const sign = await signer.sign()

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -170,20 +170,18 @@
 </template>
 
 <script setup lang="ts">
-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 { HoppRESTAuth, HoppRESTAuthOAuth2 } from "@hoppscotch/data"
-import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
+import { pluckRef } from "@composables/ref"
 import { useColorMode } from "@composables/theming"
 import { useVModel } from "@vueuse/core"
-import { onMounted } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { AggregateEnvironment } from "~/newstore/environments"
+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 { getDefaultAuthCodeOauthFlowParams } from "~/services/oauth/flows/authCode"
 
@@ -228,6 +226,22 @@ type AuthType = {
   handler?: () => void
 }
 
+const selectAPIKeyAuthType = () => {
+  auth.value = {
+    ...auth.value,
+    authType: "api-key",
+    addTo: "HEADERS",
+  } as HoppRESTAuth
+}
+
+const selectAWSSignatureAuthType = () => {
+  auth.value = {
+    ...auth.value,
+    authType: "aws-signature",
+    addTo: "HEADERS",
+  } as HoppRESTAuth
+}
+
 const authTypes: AuthType[] = [
   {
     key: "inherit",
@@ -253,10 +267,12 @@ const authTypes: AuthType[] = [
   {
     key: "api-key",
     label: "API Key",
+    handler: selectAPIKeyAuthType,
   },
   {
     key: "aws-signature",
     label: "AWS Signature",
+    handler: selectAWSSignatureAuthType,
   },
 ]
 

packages/hoppscotch-common/src/components/http/authorization/AWSSign.vue

@@ -32,7 +32,10 @@
       <SmartEnvInput
         v-model="auth.region"
         :auto-complete-env="true"
-        :placeholder="t('authorization.aws_signature.aws_region')"
+        :placeholder="`${t('authorization.aws_signature.aws_region')} (${t(
+          'app.default',
+          { value: 'us-east-1' }
+        )})`"
         :envs="envs"
       />
     </div>
@@ -52,7 +55,8 @@
         :envs="envs"
       />
     </div>
-    <div class="flex items-center !border-b border-dividerLight">
+
+    <div class="flex items-center border-b border-dividerLight">
       <span class="flex items-center">
         <label class="ml-4 text-secondaryLight">
           {{ t("authorization.pass_key_by") }}
@@ -61,17 +65,11 @@
           interactive
           trigger="click"
           theme="popover"
-          :on-shown="() => authTippyActions.focus()"
+          :on-shown="() => authTippyActions?.focus()"
         >
           <HoppSmartSelectWrapper>
             <HoppButtonSecondary
-              :label="
-                auth.addTo
-                  ? auth.addTo === 'HEADERS'
-                    ? t('authorization.pass_by_headers_label')
-                    : t('authorization.pass_by_query_params_label')
-                  : t('state.none')
-              "
+              :label="passBy"
               class="ml-2 rounded-none pr-8"
             />
           </HoppSmartSelectWrapper>
@@ -83,25 +81,16 @@
               @keyup.escape="hide()"
             >
               <HoppSmartItem
-                :icon="auth.addTo === 'HEADERS' ? IconCircleDot : IconCircle"
-                :active="auth.addTo === 'HEADERS'"
-                :label="t('authorization.pass_by_headers_label')"
-                @click="
-                  () => {
-                    auth.addTo = 'HEADERS'
-                    hide()
-                  }
-                "
-              />
-              <HoppSmartItem
+                v-for="addToTarget in addToTargets"
+                :key="addToTarget.id"
+                :label="addToTarget.label"
                 :icon="
-                  auth.addTo === 'QUERY_PARAMS' ? IconCircleDot : IconCircle
+                  auth.addTo === addToTarget.id ? IconCircleDot : IconCircle
                 "
-                :active="auth.addTo === 'QUERY_PARAMS'"
-                :label="t('authorization.pass_by_query_params_label')"
+                :active="auth.addTo === addToTarget.id"
                 @click="
                   () => {
-                    auth.addTo = 'QUERY_PARAMS'
+                    auth.addTo = addToTarget.id
                     hide()
                   }
                 "
@@ -115,13 +104,13 @@
 </template>
 
 <script setup lang="ts">
-import IconCircle from "~icons/lucide/circle"
-import IconCircleDot from "~icons/lucide/circle-dot"
 import { useI18n } from "@composables/i18n"
 import { HoppRESTAuthAWSSignature } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
+import { computed, ref } from "vue"
 import { AggregateEnvironment } from "~/newstore/environments"
-import { ref } from "vue"
+import IconCircle from "~icons/lucide/circle"
+import IconCircleDot from "~icons/lucide/circle-dot"
 
 const t = useI18n()
 
@@ -137,4 +126,22 @@ const emit = defineEmits<{
 const auth = useVModel(props, "modelValue", emit)
 
 const authTippyActions = ref<any | null>(null)
+
+const addToTargets = [
+  {
+    id: "HEADERS" as const,
+    label: "Headers",
+  },
+  {
+    id: "QUERY_PARAMS" as const,
+    label: "Query Params",
+  },
+]
+
+const passBy = computed(() => {
+  return (
+    addToTargets.find((target) => target.id === auth.value.addTo)?.label ||
+    t("state.none")
+  )
+})
 </script>

packages/hoppscotch-common/src/helpers/graphql/connection.ts

@@ -288,7 +288,8 @@ export const runGQLOperation = async (options: RunQueryOptions) => {
         params[key] = value
       }
     } else if (auth.authType === "aws-signature") {
-      const { accessKey, secretKey, region, serviceName, addTo } = auth
+      const { accessKey, secretKey, region, serviceName, addTo, serviceToken } =
+        auth
 
       const currentDate = new Date()
       const amzDate = currentDate.toISOString().replace(/[:-]|\.\d{3}/g, "")
@@ -301,6 +302,7 @@ export const runGQLOperation = async (options: RunQueryOptions) => {
         region: region ?? "us-east-1",
         service: serviceName,
         url,
+        sessionToken: serviceToken,
       })
 
       const sign = await signer.sign()

packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts

@@ -146,6 +146,9 @@ export const getComputedAuthHeaders = async (
         region:
           parseTemplateString(request.auth.region, envVars) ?? "us-east-1",
         service: parseTemplateString(request.auth.serviceName, envVars),
+        sessionToken:
+          request.auth.serviceToken &&
+          parseTemplateString(request.auth.serviceToken, envVars),
         url: parseTemplateString(endpoint, envVars),
       })
 
@@ -290,6 +293,9 @@ export const getComputedParams = async (
         secretAccessKey: parseTemplateString(req.auth.secretKey, envVars),
         region: parseTemplateString(req.auth.region, envVars) ?? "us-east-1",
         service: parseTemplateString(req.auth.serviceName, envVars),
+        sessionToken:
+          req.auth.serviceToken &&
+          parseTemplateString(req.auth.serviceToken, envVars),
         url: parseTemplateString(req.endpoint, envVars),
       })
       const sign = await signer.sign()