feat: probable user is displayed as authenticated

packages/hoppscotch-app/components/app/Header.vue

@@ -109,81 +109,84 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+import {
+  onMounted,
+  ref,
+  useContext,
+} from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
-import { currentUser$ } from "~/helpers/fb/auth"
+import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 
-export default defineComponent({
+const {
-  setup() {
+  $toast,
-    const showSupport = ref(false)
+  app: { i18n },
-    const showSearch = ref(false)
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    defineActionHandler("modals.support.toggle", () => {
+/**
-      showSupport.value = !showSupport.value
+ * Once the PWA code is initialized, this holds a method
-    })
+ * that can be called to show the user the installation
-    defineActionHandler("modals.search.toggle", () => {
+ * prompt.
-      showSearch.value = !showSearch.value
+ */
-    })
+const showInstallPrompt = ref<undefined | null>(null)
 
-    return {
+const showSupport = ref(false)
-      currentUser: useReadonlyStream(currentUser$, null),
+const showSearch = ref(false)
-      showSupport,
+const showLogin = ref(false)
-      showSearch,
+const showTeamsModal = ref(false)
-    }
-  },
-  data() {
-    return {
-      // Once the PWA code is initialized, this holds a method
-      // that can be called to show the user the installation
-      // prompt.
-      showInstallPrompt: null,
-      showLogin: false,
-      isOnLine: navigator.onLine,
-      showTeamsModal: false,
-    }
-  },
-  async mounted() {
-    window.addEventListener("online", () => {
-      this.isOnLine = true
-    })
-    window.addEventListener("offline", () => {
-      this.isOnLine = false
-    })
 
-    // Initializes the PWA code - checks if the app is installed,
+const isOnLine = ref(navigator.onLine)
-    // etc.
-    this.showInstallPrompt = await intializePwa()
 
-    const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
+const currentUser = useReadonlyStream(probableUser$, null)
-    if (!cookiesAllowed) {
+
-      this.$toast.show(this.$t("app.we_use_cookies"), {
+defineActionHandler("modals.support.toggle", () => {
-        icon: "cookie",
+  showSupport.value = !showSupport.value
-        duration: 0,
+})
-        action: [
+defineActionHandler("modals.search.toggle", () => {
-          {
+  showSearch.value = !showSearch.value
-            text: this.$t("action.learn_more"),
+})
-            onClick: (_, toastObject) => {
+
-              setLocalConfig("cookiesAllowed", "yes")
+onMounted(async () => {
-              toastObject.goAway(0)
+  window.addEventListener("online", () => {
-              window
+    isOnLine.value = true
-                .open("https://docs.hoppscotch.io/privacy", "_blank")
+  })
-                .focus()
+  window.addEventListener("offline", () => {
-            },
+    isOnLine.value = false
+  })
+
+  // Initializes the PWA code - checks if the app is installed,
+  // etc.
+  // TODO: @liyasthomas, check this out (initializePwa is a () => Promise<void>)
+  await intializePwa()
+  showInstallPrompt.value = undefined
+
+  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
+  if (!cookiesAllowed) {
+    $toast.show(t("app.we_use_cookies").toString(), {
+      icon: "cookie",
+      duration: 0,
+      action: [
+        {
+          text: t("action.learn_more").toString(),
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
+            window.open("https://docs.hoppscotch.io/privacy", "_blank")?.focus()
           },
-          {
+        },
-            text: this.$t("action.dismiss"),
+        {
-            onClick: (_, toastObject) => {
+          text: t("action.dismiss").toString(),
-              setLocalConfig("cookiesAllowed", "yes")
+          onClick: (_, toastObject) => {
-              toastObject.goAway(0)
+            setLocalConfig("cookiesAllowed", "yes")
-            },
+            toastObject.goAway(0)
           },
-        ],
+        },
-      })
+      ],
-    }
+    })
-  },
+  }
 })
 </script>

packages/hoppscotch-app/helpers/fb/auth.ts

@@ -95,18 +95,16 @@ export function initAuth() {
 
   probableUser$.next(JSON.parse(getLocalConfig("login_state") ?? "null"))
 
-  currentUser$.subscribe((user) => {
+  onAuthStateChanged(auth, (user) => {
+    /** Whether the user was logged in before */
+    const wasLoggedIn = currentUser$.value !== null
+
     if (user) {
       probableUser$.next(user)
     } else {
       probableUser$.next(null)
       removeLocalConfig("login_state")
     }
-  })
-
-  onAuthStateChanged(auth, (user) => {
-    /** Whether the user was logged in before */
-    const wasLoggedIn = currentUser$.value !== null
 
     if (!user && extraSnapshotStop) {
       extraSnapshotStop()