feat: socketio bearer authentication (#1999)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -81,6 +81,135 @@
               />
             </div>
           </div>
+          <div
+            class="bg-primary border-b border-dividerLight flex flex-1 top-upperPrimaryStickyFold pl-4 z-10 sticky items-center justify-between"
+          >
+            <span class="flex items-center">
+              <label class="font-semibold text-secondaryLight">
+                {{ $t("authorization.type") }}
+              </label>
+              <tippy
+                ref="authTypeOptions"
+                interactive
+                trigger="click"
+                theme="popover"
+                arrow
+              >
+                <template #trigger>
+                  <span class="select-wrapper">
+                    <ButtonSecondary
+                      class="rounded-none ml-2 pr-8"
+                      :label="authType"
+                    />
+                  </span>
+                </template>
+                <SmartItem
+                  label="None"
+                  :icon="
+                    authType === 'None'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
+                  :active="authType === 'None'"
+                  @click.native="
+                    () => {
+                      authType = 'None'
+                      authTypeOptions.tippy().hide()
+                    }
+                  "
+                />
+                <SmartItem
+                  label="Bearer Token"
+                  :icon="
+                    authType === 'Bearer'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
+                  :active="authType === 'Bearer'"
+                  @click.native="
+                    () => {
+                      authType = 'Bearer'
+                      authTypeOptions.tippy().hide()
+                    }
+                  "
+                />
+              </tippy>
+            </span>
+            <div class="flex">
+              <SmartCheckbox
+                :on="authActive"
+                class="px-2"
+                @change="authActive = !authActive"
+              >
+                {{ $t("state.enabled") }}
+              </SmartCheckbox>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io/features/authorization"
+                blank
+                :title="$t('app.wiki')"
+                svg="help-circle"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.clear')"
+                svg="trash-2"
+                @click.native="clearContent"
+              />
+            </div>
+          </div>
+          <div
+            v-if="authType === 'None'"
+            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          >
+            <img
+              :src="`/images/states/${$colorMode.value}/login.svg`"
+              loading="lazy"
+              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              :alt="$t('empty.authorization')"
+            />
+            <span class="text-center pb-4">
+              This SocketIO connection does not use any authentication.
+            </span>
+            <ButtonSecondary
+              outline
+              :label="$t('app.documentation')"
+              to="https://docs.hoppscotch.io/features/authorization"
+              blank
+              svg="external-link"
+              reverse
+              class="mb-4"
+            />
+          </div>
+          <div
+            v-if="authType === 'Bearer'"
+            class="border-b border-dividerLight flex"
+          >
+            <div class="border-r border-dividerLight w-2/3">
+              <div class="border-b border-dividerLight flex">
+                <SmartEnvInput
+                  v-model="bearerToken"
+                  placeholder="Token"
+                  styles="bg-transparent flex flex-1 py-1 px-4"
+                />
+              </div>
+            </div>
+            <div
+              class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
+            >
+              <div class="p-2">
+                <div class="text-secondaryLight pb-2">
+                  {{ $t("helpers.authorization") }}
+                </div>
+                <SmartAnchor
+                  class="link"
+                  :label="`${$t('authorization.learn')} \xA0 →`"
+                  to="https://docs.hoppscotch.io/features/authorization"
+                  blank
+                />
+              </div>
+            </div>
+          </div>
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
@@ -167,7 +296,7 @@
 </template>
 
 <script>
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 // All Socket.IO client version imports
@@ -229,6 +358,7 @@ export default defineComponent({
       ),
       io: useStream(SIOSocket$, null, setSIOSocket),
       log: useStream(SIOLog$, [], setSIOLog),
+      authTypeOptions: ref(null),
     }
   },
   data() {
@@ -238,6 +368,9 @@ export default defineComponent({
         eventName: "",
         inputs: [""],
       },
+      authType: "None",
+      bearerToken: "",
+      authActive: true,
     }
   },
   computed: {
@@ -297,7 +430,17 @@ export default defineComponent({
           this.path = "/socket.io"
         }
         const Client = socketIoClients[this.clientVersion]
-        this.io = new Client(this.url, { path: this.path })
+        if (this.authActive && this.authType === "Bearer") {
+          this.io = new Client(this.url, {
+            path: this.path,
+            auth: {
+              token: this.bearerToken,
+            },
+          })
+        } else {
+          this.io = new Client(this.url, { path: this.path })
+        }
+
         // Add ability to listen to all events
         wildcard(Client.Manager)(this.io)
         this.io.on("connect", () => {