feat: allow platforms to define additional entries in the login dialog

packages/hoppscotch-common/src/components/firebase/Login.vue

@@ -31,6 +31,14 @@
           :label="`${t('auth.continue_with_email')}`"
           @click="mode = 'email'"
         />
+
+        <HoppSmartItem
+          v-for="loginItem in additonalLoginItems"
+          :key="loginItem.id"
+          :icon="loginItem.icon"
+          :label="loginItem.text(t)"
+          @click="doAdditionalLoginItemClickAction(loginItem)"
+        />
       </div>
       <form
         v-if="mode === 'email'"
@@ -114,7 +122,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, computed } from "vue"
 import { platform } from "~/platform"
 import IconGithub from "~icons/auth/github"
 import IconGoogle from "~icons/auth/google"
@@ -125,6 +133,7 @@ import { setLocalConfig } from "~/newstore/localpersistence"
 import { useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { LoginItemDef } from "~/platform/auth"
 
 export default defineComponent({
   props: {
@@ -140,6 +149,9 @@ export default defineComponent({
     return {
       subscribeToStream,
       t: useI18n(),
+      additonalLoginItems: computed(
+        () => platform.auth.additionalLoginItems ?? []
+      ),
       toast: useToast(),
       IconGithub,
       IconGoogle,
@@ -170,6 +182,10 @@ export default defineComponent({
     })
   },
   methods: {
+    async doAdditionalLoginItemClickAction(item: LoginItemDef) {
+      await item.onClick()
+      this.$emit("hide-modal")
+    },
     showLoginSuccess() {
       this.toast.success(`${this.t("auth.login_success")}`)
     },

packages/hoppscotch-common/src/platform/auth.ts

@@ -1,5 +1,7 @@
 import { ClientOptions } from "@urql/core"
 import { Observable } from "rxjs"
+import { Component } from "vue"
+import { getI18n } from "~/modules/i18n"
 
 /**
  * A common (and required) set of fields that describe a user.
@@ -39,6 +41,13 @@ export type GithubSignInResult =
   | { type: "account-exists-with-different-cred"; link: () => Promise<void> } // We authenticated correctly, but the provider didn't match, so we give the user the opportunity to link to continue completing auth
   | { type: "error"; err: unknown } // Auth failed completely and we don't know why
 
+export type LoginItemDef = {
+  id: string
+  icon: Component
+  text: (t: ReturnType<typeof getI18n>) => string
+  onClick: () => Promise<void> | void
+}
+
 export type AuthPlatformDef = {
   /**
    * Returns an observable that emits the current user as per the auth implementation.
@@ -212,4 +221,9 @@ export type AuthPlatformDef = {
    * @returns An empty promise that is resolved when the operation is complete
    */
   setDisplayName: (name: string) => Promise<void>
+
+  /**
+   * Defines the additional login items that should be shown in the login screen
+   */
+  additionalLoginItems?: LoginItemDef[]
 }