From 85c6932f8f9d529fe1d1665e9e5e8b98c35530bc Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 14 Jun 2021 00:07:30 -0400
Subject: [PATCH 1/9] Initial Firebase refactor pass

---
 components/app/Header.vue                     |  18 +-
 components/collections/ImportExport.vue       |  14 +-
 .../collections/graphql/ImportExport.vue      |  18 +-
 components/collections/index.vue              |   5 +-
 components/environments/ImportExport.vue      |  18 +-
 components/firebase/Email.vue                 |   8 +-
 components/firebase/Feeds.vue                 |  12 +-
 components/firebase/Inputform.vue             |  16 +-
 components/firebase/Login.vue                 |  46 +-
 components/firebase/Logout.vue                |  18 +-
 components/firebase/__tests__/Feeds.spec.js   | 132 ----
 .../firebase/__tests__/Inputform.spec.js      |  92 ---
 components/firebase/__tests__/Logout.spec.js  |  67 --
 components/http/Notes.vue                     |  10 +-
 components/teams/index.vue                    |  10 +-
 helpers/apollo.ts                             |   4 +-
 helpers/fb.js                                 | 572 ------------------
 helpers/fb/auth.ts                            | 186 ++++++
 helpers/fb/collections.ts                     | 147 +++++
 helpers/fb/environments.ts                    |  84 +++
 helpers/fb/feeds.ts                           |  91 +++
 helpers/fb/history.ts                         | 199 ++++++
 helpers/fb/index.ts                           |  29 +
 helpers/fb/settings.ts                        |  96 +++
 helpers/teams/BackendUserInfo.ts              |  10 +-
 layouts/default.vue                           |   2 +
 pages/doc.vue                                 |  18 +-
 pages/enter.vue                               |  21 +-
 pages/index.vue                               |   8 +-
 pages/settings.vue                            |  57 +-
 30 files changed, 979 insertions(+), 1029 deletions(-)
 delete mode 100644 components/firebase/__tests__/Feeds.spec.js
 delete mode 100644 components/firebase/__tests__/Inputform.spec.js
 delete mode 100644 components/firebase/__tests__/Logout.spec.js
 delete mode 100644 helpers/fb.js
 create mode 100644 helpers/fb/auth.ts
 create mode 100644 helpers/fb/collections.ts
 create mode 100644 helpers/fb/environments.ts
 create mode 100644 helpers/fb/feeds.ts
 create mode 100644 helpers/fb/history.ts
 create mode 100644 helpers/fb/index.ts
 create mode 100644 helpers/fb/settings.ts

diff --git a/components/app/Header.vue b/components/app/Header.vue
index c75b73820..8e8760840 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -68,7 +68,7 @@
             </svg>
           </button>
         </a>
-        <v-popover v-if="fb.currentUser === null">
+        <v-popover v-if="currentUser === null">
           <button v-tooltip="$t('login_with')" class="icon">
             <i class="material-icons">login</i>
           </button>
@@ -79,17 +79,17 @@
         <v-popover v-else>
           <button
             v-tooltip="
-              (fb.currentUser.displayName ||
+              (currentUser.displayName ||
                 '<label><i>Name not found</i></label>') +
               '<br>' +
-              (fb.currentUser.email || '<label><i>Email not found</i></label>')
+              (currentUser.email || '<label><i>Email not found</i></label>')
             "
             class="icon"
             aria-label="Account"
           >
             <img
-              v-if="fb.currentUser.photoURL"
-              :src="fb.currentUser.photoURL"
+              v-if="currentUser.photoURL"
+              :src="currentUser.photoURL"
               class="w-6 h-6 rounded-full material-icons"
               alt="Profile image"
             />
@@ -166,7 +166,7 @@
 
 <script>
 import intializePwa from "~/helpers/pwa"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 // import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
 
 export default {
@@ -181,7 +181,11 @@ export default {
       showSupport: false,
       showEmail: false,
       navigatorShare: navigator.share,
-      fb,
+    }
+  },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
     }
   },
   async mounted() {
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 85a7dbec2..12a1a84b0 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -34,9 +34,9 @@
               </div>
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
@@ -44,9 +44,9 @@
                 <button
                   v-close-popover
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -166,7 +166,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import * as teamUtils from "~/helpers/teams/utils"
 import {
   restCollections$,
@@ -185,12 +185,12 @@ export default {
       mode: "import_export",
       mySelectedCollectionID: undefined,
       collectionJson: "",
-      fb,
     }
   },
   subscriptions() {
     return {
       myCollections: restCollections$,
+      currentUser: currentUser$,
     }
   },
   methods: {
@@ -208,7 +208,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 9e47312d6..43a634248 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -21,9 +21,9 @@
               </div>
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
@@ -31,9 +31,9 @@
                 <button
                   v-close-popover
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import {
   graphqlCollections$,
   setGraphqlCollections,
@@ -111,14 +111,10 @@ export default {
   props: {
     show: Boolean,
   },
-  data() {
-    return {
-      fb,
-    }
-  },
   subscriptions() {
     return {
       collections: graphqlCollections$,
+      currentUser: currentUser$,
     }
   },
   computed: {
@@ -140,7 +136,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 3161d93d2..eb75c7eaa 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -140,7 +140,7 @@
 <script>
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
 import {
@@ -189,11 +189,12 @@ export default {
   subscriptions() {
     return {
       collections: restCollections$,
+      currentUser: currentUser$,
     }
   },
   computed: {
     showTeamCollections() {
-      if (fb.currentUser == null) {
+      if (this.currentUser == null) {
         return false
       }
       return true
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index f9408c97a..48990e83e 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -23,9 +23,9 @@
               </div>
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
@@ -33,9 +33,9 @@
                 <button
                   v-close-popover
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -102,7 +102,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import {
   environments$,
   replaceEnvironments,
@@ -113,14 +113,10 @@ export default {
   props: {
     show: Boolean,
   },
-  data() {
-    return {
-      fb,
-    }
-  },
   subscriptions() {
     return {
       environments: environments$,
+      currentUser: currentUser$,
     }
   },
   computed: {
@@ -142,7 +138,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }
diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue
index 5d6f223e9..4f9f20da1 100644
--- a/components/firebase/Email.vue
+++ b/components/firebase/Email.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$, signInWithEmail } from "~/helpers/fb/auth"
 
 export default {
   props: {
@@ -77,7 +77,6 @@ export default {
   },
   data() {
     return {
-      fb,
       form: {
         email: "",
       },
@@ -88,7 +87,7 @@ export default {
     }
   },
   mounted() {
-    this.$subscribeTo(fb.currentUser$, (user) => {
+    this.$subscribeTo(currentUser$, (user) => {
       if (user) this.hideModal()
     })
 
@@ -110,8 +109,7 @@ export default {
         url: `${process.env.BASE_URL}/enter`,
         handleCodeInApp: true,
       }
-      await fb
-        .signInWithEmail(this.form.email, actionCodeSettings)
+      await signInWithEmail(this.form.email, actionCodeSettings)
         .then(() => {
           this.mode = "email"
           window.localStorage.setItem("emailForSignIn", this.form.email)
diff --git a/components/firebase/Feeds.vue b/components/firebase/Feeds.vue
index e3b46f6c4..6d74513ad 100644
--- a/components/firebase/Feeds.vue
+++ b/components/firebase/Feeds.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    v-if="fb.currentFeeds.length !== 0"
+    v-if="currentFeeds && currentFeeds.length !== 0"
     class="divide-y virtual-list divide-dashed divide-divider"
   >
-    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
+    <ul v-for="feed in currentFeeds" :key="feed.id" class="flex-col">
       <div data-test="list-item" class="show-on-large-screen">
         <li class="info">
           <label data-test="list-label" class="break-all">
@@ -29,17 +29,17 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { deleteFeed, currentFeeds$ } from "~/helpers/fb/feeds"
 
 export default {
-  data() {
+  subscriptions() {
     return {
-      fb,
+      currentFeeds: currentFeeds$,
     }
   },
   methods: {
     async deleteFeed({ id }) {
-      await fb.deleteFeed(id)
+      await deleteFeed(id)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
diff --git a/components/firebase/Inputform.vue b/components/firebase/Inputform.vue
index 0a39060fd..865de7ae1 100644
--- a/components/firebase/Inputform.vue
+++ b/components/firebase/Inputform.vue
@@ -33,25 +33,27 @@
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { writeFeed } from "~/helpers/fb/feeds"
 
-export default {
+export default Vue.extend({
   data() {
     return {
-      message: null,
-      label: null,
+      message: null as string | null,
+      label: null as string | null,
     }
   },
   methods: {
     formPost() {
+      // TODO: Check this ?
       if (!(this.message || this.label)) {
         return
       }
-      fb.writeFeeds(this.message, this.label)
+      writeFeed(this.label as string, this.message as string)
       this.message = null
       this.label = null
     },
   },
-}
+})
 </script>
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 3491a85d2..791531231 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -40,14 +40,16 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { applySetting } from "~/newstore/settings"
+import {
+  signInUserWithGoogle,
+  getSignInMethodsForEmail,
+  signInWithEmailAndPassword,
+  signInWithGithub,
+  setProviderInfo,
+} from "~/helpers/fb/auth"
 
 export default {
-  data() {
-    return {
-      fb,
-    }
-  },
   methods: {
     showLoginSuccess() {
       this.$toast.info(this.$t("login_success"), {
@@ -56,7 +58,7 @@ export default {
     },
     async signInWithGoogle() {
       try {
-        const { additionalUserInfo } = await fb.signInUserWithGoogle()
+        const { additionalUserInfo } = await signInUserWithGoogle()
 
         if (additionalUserInfo.isNewUser) {
           this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
@@ -66,9 +68,9 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: (_, toastObject) => {
-                fb.writeSettings("syncHistory", true)
-                fb.writeSettings("syncCollections", true)
-                fb.writeSettings("syncEnvironments", true)
+                applySetting("syncHistory", true)
+                applySetting("syncCollections", true)
+                applySetting("syncEnvironments", true)
                 this.$router.push({ path: "/settings" })
                 toastObject.remove()
               },
@@ -88,7 +90,7 @@ export default {
           // The provider account's email address.
           const email = err.email
           // Get sign-in methods for this email.
-          const methods = await fb.getSignInMethodsForEmail(email)
+          const methods = await getSignInMethodsForEmail(email)
 
           // Step 3.
           // If the user has several sign-in methods,
@@ -98,7 +100,7 @@ export default {
             // In real scenario, you should handle this asynchronously.
             const password = promptUserForPassword() // TODO: implement promptUserForPassword.
 
-            const user = await fb.signInWithEmailAndPassword(email, password)
+            const user = await signInWithEmailAndPassword(email, password)
             await user.linkWithCredential(pendingCred)
 
             this.showLoginSuccess()
@@ -113,7 +115,7 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: async (_, toastObject) => {
-                const { user } = await fb.signInWithGithub()
+                const { user } = await signInWithGithub()
                 await user.linkAndRetrieveDataWithCredential(pendingCred)
 
                 this.showLoginSuccess()
@@ -127,10 +129,9 @@ export default {
     },
     async signInWithGithub() {
       try {
-        const { credential, additionalUserInfo } =
-          await fb.signInUserWithGithub()
+        const { credential, additionalUserInfo } = await signInUserWithGithub()
 
-        fb.setProviderInfo(credential.providerId, credential.accessToken)
+        setProviderInfo(credential.providerId, credential.accessToken)
 
         if (additionalUserInfo.isNewUser) {
           this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
@@ -140,9 +141,9 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: (_, toastObject) => {
-                fb.writeSettings("syncHistory", true)
-                fb.writeSettings("syncCollections", true)
-                fb.writeSettings("syncEnvironments", true)
+                applySetting("syncHistory", true)
+                applySetting("syncCollections", true)
+                applySetting("syncEnvironments", true)
                 this.$router.push({ path: "/settings" })
                 toastObject.remove()
               },
@@ -162,7 +163,7 @@ export default {
           // The provider account's email address.
           const email = err.email
           // Get sign-in methods for this email.
-          const methods = await fb.getSignInMethodsForEmail(email)
+          const methods = await getSignInMethodsForEmail(email)
 
           // Step 3.
           // If the user has several sign-in methods,
@@ -172,7 +173,7 @@ export default {
             // In real scenario, you should handle this asynchronously.
             const password = promptUserForPassword() // TODO: implement promptUserForPassword.
 
-            const user = await fb.signInWithEmailAndPassword(email, password)
+            const user = await signInWithEmailAndPassword(email, password)
             await user.linkWithCredential(pendingCred)
 
             this.showLoginSuccess()
@@ -187,7 +188,8 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: async (_, toastObject) => {
-                const { user } = await fb.signInUserWithGoogle()
+                const { user } = await signInUserWithGoogle()
+                // TODO: handle deprecation
                 await user.linkAndRetrieveDataWithCredential(pendingCred)
 
                 this.showLoginSuccess()
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index cb5be7a96..ae8bc6651 100644
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -7,21 +7,17 @@
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { signOutUser } from "~/helpers/fb/auth"
 
-export default {
-  data() {
-    return {
-      fb,
-    }
-  },
+export default Vue.extend({
   methods: {
     async logout() {
       try {
-        await fb.signOutUser()
+        await signOutUser()
 
-        this.$toast.info(this.$t("logged_out"), {
+        this.$toast.info(this.$t("logged_out").toString(), {
           icon: "vpn_key",
         })
       } catch (err) {
@@ -31,5 +27,5 @@ export default {
       }
     },
   },
-}
+})
 </script>
diff --git a/components/firebase/__tests__/Feeds.spec.js b/components/firebase/__tests__/Feeds.spec.js
deleted file mode 100644
index 71b456ce6..000000000
--- a/components/firebase/__tests__/Feeds.spec.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { shallowMount } from "@vue/test-utils"
-import feeds from "../Feeds"
-
-import { fb } from "~/helpers/fb"
-
-jest.mock("~/helpers/fb", () => ({
-  __esModule: true,
-
-  fb: {
-    currentFeeds: [
-      {
-        id: "test1",
-        label: "First",
-        message: "First Message",
-      },
-      {
-        id: "test2",
-        label: "Second",
-      },
-      {
-        id: "test3",
-        message: "Third Message",
-      },
-      {
-        id: "test4",
-      },
-    ],
-    deleteFeed: jest.fn(() => Promise.resolve()),
-  },
-}))
-
-const factory = () =>
-  shallowMount(feeds, {
-    mocks: {
-      $t: (text) => text,
-      $toast: {
-        error: jest.fn(),
-      },
-    },
-  })
-
-beforeEach(() => {
-  fb.deleteFeed.mockClear()
-})
-
-describe("feeds", () => {
-  test("mounts properly when proper components are given", () => {
-    const wrapper = factory()
-
-    expect(wrapper).toBeTruthy()
-  })
-
-  test("renders all the current feeds", () => {
-    const wrapper = factory()
-
-    expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(
-      4
-    )
-  })
-
-  test("feeds with no label displays the 'no_label' message", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("label[data-test='list-label']")
-        .wrappers.map((e) => e.text())
-        .filter((text) => text === "no_label")
-    ).toHaveLength(2)
-  })
-
-  test("feeds with no message displays the 'empty' message", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("li[data-test='list-message']")
-        .wrappers.map((e) => e.text())
-        .filter((text) => text === "empty")
-    ).toHaveLength(2)
-  })
-
-  test("labels in the list are proper", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("label[data-test='list-label']")
-        .wrappers.map((e) => e.text())
-    ).toEqual(["First", "Second", "no_label", "no_label"])
-  })
-
-  test("messages in the list are proper", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("li[data-test='list-message']")
-        .wrappers.map((e) => e.text())
-    ).toEqual(["First Message", "empty", "Third Message", "empty"])
-  })
-
-  test("clicking on the delete button deletes the feed", async () => {
-    const wrapper = factory()
-
-    const deleteButton = wrapper.find("button")
-
-    await deleteButton.trigger("click")
-
-    expect(fb.deleteFeed).toHaveBeenCalledTimes(1)
-  })
-
-  test("correct feed is passed to from the list for deletion", async () => {
-    const wrapper = factory()
-
-    const deleteButton = wrapper.find("button")
-
-    await deleteButton.trigger("click")
-
-    expect(fb.deleteFeed).toHaveBeenCalledWith("test1")
-  })
-
-  test("renders the 'empty' label if no elements in the current feeds", () => {
-    jest.spyOn(fb, "currentFeeds", "get").mockReturnValueOnce([])
-
-    const wrapper = factory()
-
-    expect(wrapper.findAll("li").wrappers).toHaveLength(1)
-
-    expect(wrapper.find("li").text()).toEqual("empty")
-  })
-})
diff --git a/components/firebase/__tests__/Inputform.spec.js b/components/firebase/__tests__/Inputform.spec.js
deleted file mode 100644
index ce2458752..000000000
--- a/components/firebase/__tests__/Inputform.spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { shallowMount } from "@vue/test-utils"
-import inputform from "../Inputform"
-
-import { fb } from "~/helpers/fb"
-
-jest.mock("~/helpers/fb", () => ({
-  __esModule: true,
-
-  fb: {
-    writeFeeds: jest.fn(() => Promise.resolve()),
-  },
-}))
-
-const factory = () =>
-  shallowMount(inputform, {
-    mocks: {
-      $t: (text) => text,
-    },
-  })
-
-beforeEach(() => {
-  fb.writeFeeds.mockClear()
-})
-
-describe("inputform", () => {
-  test("mounts properly", () => {
-    const wrapper = factory()
-
-    expect(wrapper).toBeTruthy()
-  })
-  test("calls writeFeeds when submitted properly", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue("test message")
-    await labelInput.setValue("test label")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).toHaveBeenCalledTimes(1)
-  })
-  test("doesn't call writeFeeds when submitted without a data", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).not.toHaveBeenCalled()
-  })
-  test("doesn't call writeFeeds when message or label is null", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue(null)
-    await labelInput.setValue(null)
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).not.toHaveBeenCalled()
-  })
-  test("doesn't call writeFeeds when message or label is empty", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue("")
-    await labelInput.setValue("")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).not.toHaveBeenCalled()
-  })
-  test("calls writeFeeds with correct values", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue("test message")
-    await labelInput.setValue("test label")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).toHaveBeenCalledWith("test message", "test label")
-  })
-})
diff --git a/components/firebase/__tests__/Logout.spec.js b/components/firebase/__tests__/Logout.spec.js
deleted file mode 100644
index 4630bac9f..000000000
--- a/components/firebase/__tests__/Logout.spec.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { shallowMount, createLocalVue } from "@vue/test-utils"
-import logout from "../Logout"
-
-import { fb } from "~/helpers/fb"
-
-jest.mock("~/helpers/fb", () => ({
-  __esModule: true,
-
-  fb: {
-    signOutUser: jest.fn(() => Promise.resolve()),
-  },
-}))
-
-const $toast = {
-  info: jest.fn(),
-  show: jest.fn(),
-}
-
-const localVue = createLocalVue()
-
-localVue.directive("close-popover", {})
-
-const factory = () =>
-  shallowMount(logout, {
-    mocks: {
-      $t: (text) => text,
-      $toast,
-    },
-    localVue,
-  })
-
-beforeEach(() => {
-  fb.signOutUser.mockClear()
-  $toast.info.mockClear()
-  $toast.show.mockClear()
-})
-
-describe("logout", () => {
-  test("mounts properly", () => {
-    const wrapper = factory()
-
-    expect(wrapper).toBeTruthy()
-  })
-
-  test("clicking the logout button fires the logout firebase function", async () => {
-    const wrapper = factory()
-
-    const button = wrapper.find("button")
-
-    await button.trigger("click")
-
-    expect(fb.signOutUser).toHaveBeenCalledTimes(1)
-  })
-
-  test("failed signout request fires a error toast", async () => {
-    fb.signOutUser.mockImplementationOnce(() =>
-      Promise.reject(new Error("test reject"))
-    )
-
-    const wrapper = factory()
-    const button = wrapper.find("button")
-    await button.trigger("click")
-
-    expect($toast.show).toHaveBeenCalledTimes(1)
-    expect($toast.show).toHaveBeenCalledWith("test reject", expect.anything())
-  })
-})
diff --git a/components/http/Notes.vue b/components/http/Notes.vue
index c325a9e34..874291615 100644
--- a/components/http/Notes.vue
+++ b/components/http/Notes.vue
@@ -1,6 +1,6 @@
 <template>
   <AppSection ref="sync" :label="$t('notes')" no-legend>
-    <div v-if="fb.currentUser">
+    <div v-if="currentUser">
       <FirebaseInputform />
       <FirebaseFeeds />
     </div>
@@ -13,12 +13,16 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 
 export default {
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
   data() {
     return {
-      fb,
       showEmail: false,
     }
   },
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 327bea09b..4c3f6d98c 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -8,7 +8,7 @@
   >
     <div class="flex flex-col">
       <label>{{ $t("teams") }}</label>
-      <div v-if="fb.currentUser"></div>
+      <div v-if="currentUser"></div>
       <div v-else>
         <label>{{ $t("login_with") }}</label>
         <p>
@@ -56,7 +56,7 @@
 
 <script>
 import gql from "graphql-tag"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 
 export default {
   data() {
@@ -67,10 +67,14 @@ export default {
       editingteamID: "",
       me: {},
       myTeams: [],
-      fb,
       showEmail: false,
     }
   },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
   apollo: {
     me: {
       query: gql`
diff --git a/helpers/apollo.ts b/helpers/apollo.ts
index 3ee9fc7ea..3e9084fa0 100644
--- a/helpers/apollo.ts
+++ b/helpers/apollo.ts
@@ -7,12 +7,12 @@ import {
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { setContext } from "@apollo/client/link/context"
 import { getMainDefinition } from "@apollo/client/utilities"
-import { fb } from "./fb"
+import { authIdToken$ } from "./fb/auth"
 
 let authToken: String | null = null
 
 export function registerApolloAuthUpdate() {
-  fb.idToken$.subscribe((token: String | null) => {
+  authIdToken$.subscribe((token) => {
     authToken = token
   })
 }
diff --git a/helpers/fb.js b/helpers/fb.js
deleted file mode 100644
index 18cf0b139..000000000
--- a/helpers/fb.js
+++ /dev/null
@@ -1,572 +0,0 @@
-import firebase from "firebase/app"
-import "firebase/firestore"
-import "firebase/auth"
-import { ReplaySubject } from "rxjs"
-import { applySettingFB, settingsStore } from "~/newstore/settings"
-import {
-  restHistoryStore,
-  setRESTHistoryEntries,
-  graphqlHistoryStore,
-  setGraphqlHistoryEntries,
-  HISTORY_LIMIT,
-} from "~/newstore/history"
-import {
-  restCollectionStore,
-  setRESTCollections,
-  graphqlCollectionStore,
-  setGraphqlCollections,
-} from "~/newstore/collections"
-import { environments$, replaceEnvironments } from "~/newstore/environments"
-
-// Initialize Firebase, copied from cloud console
-const firebaseConfig = {
-  apiKey: process.env.API_KEY,
-  authDomain: process.env.AUTH_DOMAIN,
-  databaseURL: process.env.DATABASE_URL,
-  projectId: process.env.PROJECT_ID,
-  storageBucket: process.env.STORAGE_BUCKET,
-  messagingSenderId: process.env.MESSAGING_SENDER_ID,
-  appId: process.env.APP_ID,
-  measurementId: process.env.MEASUREMENT_ID,
-}
-
-export const authProviders = {
-  google: () => new firebase.auth.GoogleAuthProvider(),
-  github: () => new firebase.auth.GithubAuthProvider(),
-}
-
-export class FirebaseInstance {
-  constructor(fbapp, authProviders) {
-    this.app = fbapp
-    this.authProviders = authProviders
-
-    this.usersCollection = this.app.firestore().collection("users")
-
-    this.currentUser = null
-    this.idToken = null
-    this.currentFeeds = []
-    this.currentSettings = []
-
-    this.currentUser$ = new ReplaySubject(1)
-    this.idToken$ = new ReplaySubject(1)
-
-    let loadedSettings = false
-    let loadedRESTHistory = false
-    let loadedGraphqlHistory = false
-    let loadedRESTCollections = false
-    let loadedGraphqlCollections = false
-    let loadedEnvironments = false
-
-    graphqlCollectionStore.subject$.subscribe(({ state }) => {
-      if (
-        loadedGraphqlCollections &&
-        this.currentUser &&
-        settingsStore.value.syncCollections
-      ) {
-        this.writeCollections(state, "collectionsGraphql")
-      }
-    })
-
-    restCollectionStore.subject$.subscribe(({ state }) => {
-      if (
-        loadedRESTCollections &&
-        this.currentUser &&
-        settingsStore.value.syncCollections
-      ) {
-        this.writeCollections(state, "collections")
-      }
-    })
-
-    restHistoryStore.dispatches$.subscribe((dispatch) => {
-      if (
-        loadedRESTHistory &&
-        this.currentUser &&
-        settingsStore.value.syncHistory
-      ) {
-        if (dispatch.dispatcher === "addEntry") {
-          this.writeHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "deleteEntry") {
-          this.deleteHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "clearHistory") {
-          this.clearHistory()
-        } else if (dispatch.dispatcher === "toggleStar") {
-          this.toggleStar(dispatch.payload.entry)
-        }
-      }
-    })
-
-    graphqlHistoryStore.dispatches$.subscribe((dispatch) => {
-      if (
-        loadedGraphqlHistory &&
-        this.currentUser &&
-        settingsStore.value.syncHistory
-      ) {
-        if (dispatch.dispatcher === "addEntry") {
-          this.writeGraphqlHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "deleteEntry") {
-          this.deleteGraphqlHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "clearHistory") {
-          this.clearGraphqlHistory()
-        } else if (dispatch.dispatcher === "toggleStar") {
-          this.toggleGraphqlHistoryStar(dispatch.payload.entry)
-        }
-      }
-    })
-
-    settingsStore.dispatches$.subscribe((dispatch) => {
-      if (this.currentUser && loadedSettings) {
-        if (dispatch.dispatcher === "bulkApplySettings") {
-          Object.keys(dispatch.payload).forEach((key) => {
-            this.writeSettings(key, dispatch.payload[key])
-          })
-        } else if (dispatch.dispatcher !== "applySettingFB") {
-          this.writeSettings(
-            dispatch.payload.settingKey,
-            settingsStore.value[dispatch.payload.settingKey]
-          )
-        }
-      }
-    })
-
-    environments$.subscribe((envs) => {
-      if (this.currentUser && loadedEnvironments) {
-        this.writeEnvironments(envs)
-      }
-    })
-
-    this.app.auth().onIdTokenChanged((user) => {
-      if (user) {
-        user.getIdToken().then((token) => {
-          this.idToken = token
-          this.idToken$.next(token)
-        })
-      } else {
-        this.idToken = null
-        this.idToken$.next(null)
-      }
-    })
-
-    this.app.auth().onAuthStateChanged((user) => {
-      this.currentUser$.next(user)
-
-      if (user) {
-        this.currentUser = user
-
-        this.currentUser.providerData.forEach((profile) => {
-          const us = {
-            updatedOn: new Date(),
-            provider: profile.providerId,
-            name: profile.displayName,
-            email: profile.email,
-            photoUrl: profile.photoURL,
-            uid: profile.uid,
-          }
-          this.usersCollection
-            .doc(this.currentUser.uid)
-            .set(us, { merge: true })
-            .catch((e) => console.error("error updating", us, e))
-        })
-
-        this.usersCollection.doc(this.currentUser.uid).onSnapshot((doc) => {
-          this.currentUser.provider = doc.data().provider
-          this.currentUser.accessToken = doc.data().accessToken
-        })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("feeds")
-          .orderBy("createdOn", "desc")
-          .onSnapshot((feedsRef) => {
-            const feeds = []
-            feedsRef.forEach((doc) => {
-              const feed = doc.data()
-              feed.id = doc.id
-              feeds.push(feed)
-            })
-            this.currentFeeds = feeds
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("settings")
-          .onSnapshot((settingsRef) => {
-            const settings = []
-            settingsRef.forEach((doc) => {
-              const setting = doc.data()
-              setting.id = doc.id
-              settings.push(setting)
-            })
-            this.currentSettings = settings
-
-            settings.forEach((e) => {
-              if (e && e.name && e.value != null) {
-                applySettingFB(e.name, e.value)
-              }
-            })
-
-            loadedSettings = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("history")
-          .orderBy("updatedOn", "desc")
-          .limit(HISTORY_LIMIT)
-          .onSnapshot((historyRef) => {
-            const history = []
-
-            historyRef.forEach((doc) => {
-              const entry = doc.data()
-              entry.id = doc.id
-              history.push(entry)
-            })
-
-            setRESTHistoryEntries(history)
-
-            loadedRESTHistory = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("graphqlHistory")
-          .orderBy("updatedOn", "desc")
-          .limit(HISTORY_LIMIT)
-          .onSnapshot((historyRef) => {
-            const history = []
-
-            historyRef.forEach((doc) => {
-              const entry = doc.data()
-              entry.id = doc.id
-              history.push(entry)
-            })
-
-            setGraphqlHistoryEntries(history)
-
-            loadedGraphqlHistory = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("collections")
-          .onSnapshot((collectionsRef) => {
-            const collections = []
-            collectionsRef.forEach((doc) => {
-              const collection = doc.data()
-              collection.id = doc.id
-              collections.push(collection)
-            })
-
-            // Prevent infinite ping-pong of updates
-            loadedRESTCollections = false
-
-            // TODO: Wth is with collections[0]
-            if (collections.length > 0) {
-              setRESTCollections(collections[0].collection)
-            }
-
-            loadedRESTCollections = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("collectionsGraphql")
-          .onSnapshot((collectionsRef) => {
-            const collections = []
-            collectionsRef.forEach((doc) => {
-              const collection = doc.data()
-              collection.id = doc.id
-              collections.push(collection)
-            })
-
-            // Prevent infinite ping-pong of updates
-            loadedGraphqlCollections = false
-
-            // TODO: Wth is with collections[0]
-            if (collections.length > 0) {
-              setGraphqlCollections(collections[0].collection)
-            }
-
-            loadedGraphqlCollections = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("environments")
-          .onSnapshot((environmentsRef) => {
-            const environments = []
-            environmentsRef.forEach((doc) => {
-              const environment = doc.data()
-              environment.id = doc.id
-              environments.push(environment)
-            })
-            loadedEnvironments = false
-            replaceEnvironments(environments[0].environment)
-            loadedEnvironments = true
-          })
-      } else {
-        this.currentUser = null
-      }
-    })
-  }
-
-  async signInUserWithGoogle() {
-    return await this.app.auth().signInWithPopup(this.authProviders.google())
-  }
-
-  async signInUserWithGithub() {
-    return await this.app
-      .auth()
-      .signInWithPopup(this.authProviders.github().addScope("gist"))
-  }
-
-  async signInWithEmailAndPassword(email, password) {
-    return await this.app.auth().signInWithEmailAndPassword(email, password)
-  }
-
-  async getSignInMethodsForEmail(email) {
-    return await this.app.auth().fetchSignInMethodsForEmail(email)
-  }
-
-  async signInWithEmail(email, actionCodeSettings) {
-    return await this.app
-      .auth()
-      .sendSignInLinkToEmail(email, actionCodeSettings)
-  }
-
-  async isSignInWithEmailLink(url) {
-    return await this.app.auth().isSignInWithEmailLink(url)
-  }
-
-  async signInWithEmailLink(email, url) {
-    return await this.app.auth().signInWithEmailLink(email, url)
-  }
-
-  async signOutUser() {
-    if (!this.currentUser) throw new Error("No user has logged in")
-
-    await this.app.auth().signOut()
-    this.currentUser = null
-  }
-
-  async writeFeeds(message, label) {
-    const dt = {
-      createdOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      message,
-      label,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("feeds")
-        .add(dt)
-    } catch (e) {
-      console.error("error inserting", dt, e)
-      throw e
-    }
-  }
-
-  async deleteFeed(id) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("feeds")
-        .doc(id)
-        .delete()
-    } catch (e) {
-      console.error("error deleting", id, e)
-      throw e
-    }
-  }
-
-  async writeSettings(setting, value) {
-    const st = {
-      updatedOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      name: setting,
-      value,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("settings")
-        .doc(setting)
-        .set(st)
-    } catch (e) {
-      console.error("error updating", st, e)
-      throw e
-    }
-  }
-
-  async writeHistory(entry) {
-    const hs = entry
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("history")
-        .add(hs)
-    } catch (e) {
-      console.error("error inserting", hs, e)
-      throw e
-    }
-  }
-
-  async writeGraphqlHistory(entry) {
-    const hs = entry
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("graphqlHistory")
-        .add(hs)
-    } catch (e) {
-      console.error("error inserting", hs, e)
-      throw e
-    }
-  }
-
-  async deleteHistory(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("history")
-        .doc(entry.id)
-        .delete()
-    } catch (e) {
-      console.error("error deleting", entry, e)
-      throw e
-    }
-  }
-
-  async deleteGraphqlHistory(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("graphqlHistory")
-        .doc(entry.id)
-        .delete()
-    } catch (e) {
-      console.error("error deleting", entry, e)
-      throw e
-    }
-  }
-
-  async clearHistory() {
-    const { docs } = await this.usersCollection
-      .doc(this.currentUser.uid)
-      .collection("history")
-      .get()
-
-    await Promise.all(docs.map((e) => this.deleteHistory(e)))
-  }
-
-  async clearGraphqlHistory() {
-    const { docs } = await this.usersCollection
-      .doc(this.currentUser.uid)
-      .collection("graphqlHistory")
-      .get()
-
-    await Promise.all(docs.map((e) => this.deleteGraphqlHistory(e)))
-  }
-
-  async toggleStar(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("history")
-        .doc(entry.id)
-        .update({ star: !entry.star })
-    } catch (e) {
-      console.error("error deleting", entry, e)
-
-      throw e
-    }
-  }
-
-  async toggleGraphqlHistoryStar(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("graphqlHistory")
-        .doc(entry.id)
-        .update({ star: !entry.star })
-    } catch (e) {
-      console.error("error deleting", entry, e)
-
-      throw e
-    }
-  }
-
-  async writeCollections(collection, flag) {
-    const cl = {
-      updatedOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      collection,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection(flag)
-        .doc("sync")
-        .set(cl)
-    } catch (e) {
-      console.error("error updating", cl, e)
-      throw e
-    }
-  }
-
-  async writeEnvironments(environment) {
-    const ev = {
-      updatedOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      environment,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("environments")
-        .doc("sync")
-        .set(ev)
-    } catch (e) {
-      console.error("error updating", ev, e)
-
-      throw e
-    }
-  }
-
-  async setProviderInfo(id, token) {
-    const us = {
-      updatedOn: new Date(),
-      provider: id,
-      accessToken: token,
-    }
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .update(us)
-        .catch((e) => console.error("error updating", us, e))
-    } catch (e) {
-      console.error("error updating", e)
-
-      throw e
-    }
-  }
-}
-
-export const fb = new FirebaseInstance(
-  firebase.initializeApp(firebaseConfig),
-  authProviders
-)
diff --git a/helpers/fb/auth.ts b/helpers/fb/auth.ts
new file mode 100644
index 000000000..5fa323a45
--- /dev/null
+++ b/helpers/fb/auth.ts
@@ -0,0 +1,186 @@
+import firebase from "firebase"
+import { BehaviorSubject } from "rxjs"
+
+export type HoppUser = firebase.User & {
+  provider?: string
+  accessToken?: string
+}
+
+/**
+ * A BehaviorSubject emitting the currently logged in user (or null if not logged in)
+ */
+export const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
+/**
+ * A BehaviorSubject emitting the current idToken
+ */
+export const authIdToken$ = new BehaviorSubject<string | null>(null)
+
+/**
+ * Initializes the firebase authentication related subjects
+ */
+export function initAuth() {
+  let extraSnapshotStop: (() => void) | null = null
+
+  firebase.auth().onAuthStateChanged((user) => {
+    if (!user && extraSnapshotStop) {
+      extraSnapshotStop()
+      extraSnapshotStop = null
+    } else if (user) {
+      // Merge all the user info from all the authenticated providers
+      user.providerData.forEach((profile) => {
+        if (!profile) return
+
+        const us = {
+          updatedOn: new Date(),
+          provider: profile.providerId,
+          name: profile.displayName,
+          email: profile.email,
+          photoUrl: profile.photoURL,
+          uid: profile.uid,
+        }
+
+        firebase
+          .firestore()
+          .collection("users")
+          .doc(user.uid)
+          .set(us, { merge: true })
+          .catch((e) => console.error("error updating", us, e))
+      })
+
+      extraSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .onSnapshot((doc) => {
+          const data = doc.data()
+
+          const userUpdate: HoppUser = user
+
+          if (data) {
+            // Write extra provider data
+            userUpdate.provider = data.provider
+            userUpdate.accessToken = data.accessToken
+          }
+        })
+    }
+    currentUser$.next(user)
+  })
+
+  firebase.auth().onIdTokenChanged(async (user) => {
+    if (user) {
+      authIdToken$.next(await user.getIdToken())
+    } else {
+      authIdToken$.next(null)
+    }
+  })
+}
+
+/**
+ * Sign user in with a popup using Google
+ */
+export async function signInUserWithGoogle() {
+  return await firebase
+    .auth()
+    .signInWithPopup(new firebase.auth.GoogleAuthProvider())
+}
+
+/**
+ * Sign user in with a popup using Github
+ */
+export async function signInUserWithGithub() {
+  return await firebase
+    .auth()
+    .signInWithPopup(new firebase.auth.GithubAuthProvider().addScope("gist"))
+}
+
+/**
+ * Sign user in with email and password
+ */
+export async function signInWithEmailAndPassword(
+  email: string,
+  password: string
+) {
+  return await firebase.auth().signInWithEmailAndPassword(email, password)
+}
+
+/**
+ * Gets the sign in methods for a given email address
+ *
+ * @param email - Email to get the methods of
+ *
+ * @returns Promise for string array of the auth provider methods accessible
+ */
+export async function getSignInMethodsForEmail(email: string) {
+  return await firebase.auth().fetchSignInMethodsForEmail(email)
+}
+
+/**
+ * Sends an email with the signin link to the user
+ *
+ * @param email - Email to send the email to
+ * @param actionCodeSettings - The settings to apply to the link
+ */
+export async function signInWithEmail(
+  email: string,
+  actionCodeSettings: firebase.auth.ActionCodeSettings
+) {
+  return await firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
+}
+
+/**
+ * Checks and returns whether the sign in link is an email link
+ *
+ * @param url - The URL to look in
+ */
+export function isSignInWithEmailLink(url: string) {
+  return firebase.auth().isSignInWithEmailLink(url)
+}
+
+/**
+ * Sends an email with sign in with email link
+ *
+ * @param email - Email to log in to
+ * @param url - The action URL which is used to validate login
+ */
+export async function signInWithEmailLink(email: string, url: string) {
+  return await firebase.auth().signInWithEmailLink(email, url)
+}
+
+/**
+ * Signs out the user
+ */
+export async function signOutUser() {
+  if (!currentUser$.value) throw new Error("No user has logged in")
+
+  await firebase.auth().signOut()
+}
+
+/**
+ * Sets the provider id and relevant provider auth token
+ * as user metadata
+ *
+ * @param id - The provider ID
+ * @param token - The relevant auth token for the given provider
+ */
+export async function setProviderInfo(id: string, token: string) {
+  if (!currentUser$.value) throw new Error("No user has logged in")
+
+  const us = {
+    updatedOn: new Date(),
+    provider: id,
+    accessToken: token,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .update(us)
+      .catch((e) => console.error("error updating", us, e))
+  } catch (e) {
+    console.error("error updating", e)
+
+    throw e
+  }
+}
diff --git a/helpers/fb/collections.ts b/helpers/fb/collections.ts
new file mode 100644
index 000000000..95cb785e2
--- /dev/null
+++ b/helpers/fb/collections.ts
@@ -0,0 +1,147 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import {
+  restCollections$,
+  graphqlCollections$,
+  setRESTCollections,
+  setGraphqlCollections,
+} from "~/newstore/collections"
+import { settingsStore } from "~/newstore/settings"
+
+type CollectionFlags = "collectionsGraphql" | "collections"
+
+/**
+ * Whether the collections are loaded. If this is set to true
+ * Updates to the collections store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedRESTCollections = false
+
+/**
+ * Whether the collections are loaded. If this is set to true
+ * Updates to the collections store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedGraphqlCollections = false
+
+export async function writeCollections(
+  collection: any[],
+  flag: CollectionFlags
+) {
+  if (currentUser$.value === null)
+    throw new Error("User not logged in to write collections")
+
+  const cl = {
+    updatedOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    collection,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(flag)
+      .doc("sync")
+      .set(cl)
+  } catch (e) {
+    console.error("error updating", cl, e)
+    throw e
+  }
+}
+
+export function initCollections() {
+  restCollections$.subscribe((collections) => {
+    if (
+      loadedRESTCollections &&
+      currentUser$.value &&
+      settingsStore.value.syncCollections
+    ) {
+      writeCollections(collections, "collections")
+    }
+  })
+
+  graphqlCollections$.subscribe((collections) => {
+    if (
+      loadedGraphqlCollections &&
+      currentUser$.value &&
+      settingsStore.value.syncCollections
+    ) {
+      writeCollections(collections, "collectionsGraphql")
+    }
+  })
+
+  let restSnapshotStop: (() => void) | null = null
+  let graphqlSnapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user) {
+      if (restSnapshotStop) {
+        restSnapshotStop()
+        restSnapshotStop = null
+      }
+
+      if (graphqlSnapshotStop) {
+        graphqlSnapshotStop()
+        graphqlSnapshotStop = null
+      }
+    } else {
+      restSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("collections")
+        .onSnapshot((collectionsRef) => {
+          const collections: any[] = []
+          collectionsRef.forEach((doc) => {
+            const collection = doc.data()
+            collection.id = doc.id
+            collections.push(collection)
+          })
+
+          // Prevent infinite ping-pong of updates
+          loadedRESTCollections = false
+
+          // TODO: Wth is with collections[0]
+          if (collections.length > 0) {
+            setRESTCollections(collections[0].collection)
+          }
+
+          loadedRESTCollections = true
+        })
+
+      graphqlSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("collectionsGraphql")
+        .onSnapshot((collectionsRef) => {
+          const collections: any[] = []
+          collectionsRef.forEach((doc) => {
+            const collection = doc.data()
+            collection.id = doc.id
+            collections.push(collection)
+          })
+
+          // Prevent infinite ping-pong of updates
+          loadedGraphqlCollections = false
+
+          // TODO: Wth is with collections[0]
+          if (collections.length > 0) {
+            setGraphqlCollections(collections[0].collection)
+          }
+
+          loadedGraphqlCollections = true
+        })
+    }
+  })
+}
diff --git a/helpers/fb/environments.ts b/helpers/fb/environments.ts
new file mode 100644
index 000000000..c4fc2e556
--- /dev/null
+++ b/helpers/fb/environments.ts
@@ -0,0 +1,84 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import {
+  Environment,
+  environments$,
+  replaceEnvironments,
+} from "~/newstore/environments"
+import { settingsStore } from "~/newstore/settings"
+
+/**
+ * Used locally to prevent infinite loop when environment sync update
+ * is applied to the store which then fires the store sync listener.
+ * When you want to update environments and not want to fire the update listener,
+ * set this to true and then set it back to false once it is done
+ */
+let loadedEnvironments = false
+
+async function writeEnvironments(environment: Environment[]) {
+  if (currentUser$.value == null)
+    throw new Error("Cannot write environments when signed out")
+
+  const ev = {
+    updatedOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    environment,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("environments")
+      .doc("sync")
+      .set(ev)
+  } catch (e) {
+    console.error("error updating", ev, e)
+
+    throw e
+  }
+}
+
+export function initEnvironments() {
+  environments$.subscribe((envs) => {
+    if (
+      currentUser$.value &&
+      settingsStore.value.syncEnvironments &&
+      loadedEnvironments
+    ) {
+      writeEnvironments(envs)
+    }
+  })
+
+  let snapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user && snapshotStop) {
+      // User logged out, clean up snapshot listener
+      snapshotStop()
+      snapshotStop = null
+    } else if (user) {
+      snapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("environments")
+        .onSnapshot((environmentsRef) => {
+          const environments: any[] = []
+
+          environmentsRef.forEach((doc) => {
+            const environment = doc.data()
+            environment.id = doc.id
+            environments.push(environment)
+          })
+
+          loadedEnvironments = false
+          replaceEnvironments(environments[0].environment)
+          loadedEnvironments = true
+        })
+    }
+  })
+}
diff --git a/helpers/fb/feeds.ts b/helpers/fb/feeds.ts
new file mode 100644
index 000000000..3ce10e0ec
--- /dev/null
+++ b/helpers/fb/feeds.ts
@@ -0,0 +1,91 @@
+import firebase from "firebase"
+import { BehaviorSubject } from "rxjs"
+import { currentUser$ } from "./auth"
+
+type HoppFeed = firebase.firestore.DocumentData & {
+  id: string
+  label: string
+  message: string
+}
+
+/**
+ * An observable subject which is defined as an array of feeds
+ * the current user has.
+ *
+ * Note: If this is null, then it means the user is not signed in
+ */
+export const currentFeeds$ = new BehaviorSubject<HoppFeed[] | null>(null)
+
+export function initFeeds() {
+  let snapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user && snapshotStop) {
+      // User has logged out, clean up snapshot listeners
+      snapshotStop()
+      snapshotStop = null
+    } else if (user) {
+      snapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("feeds")
+        .orderBy("createdOn", "desc")
+        .onSnapshot((feedsRef) => {
+          const feeds: HoppFeed[] = []
+
+          feedsRef.forEach((doc) => {
+            const feed = doc.data()
+            feed.id = doc.id
+            feeds.push(feed as HoppFeed)
+          })
+
+          currentFeeds$.next(feeds)
+        })
+    }
+  })
+}
+
+export async function writeFeed(label: string, message: string) {
+  if (currentUser$.value == null)
+    throw new Error("Logged out user cannot write to feeds")
+
+  const dt = {
+    createdOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    message,
+    label,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("feeds")
+      .add(dt)
+  } catch (e) {
+    console.error("error inserting", dt, e)
+    throw e
+  }
+}
+
+export async function deleteFeed(id: string) {
+  if (currentUser$.value == null)
+    throw new Error("Logged out user cannot delete feed")
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("feeds")
+      .doc(id)
+      .delete()
+  } catch (e) {
+    console.error("error deleting", id, e)
+    throw e
+  }
+}
diff --git a/helpers/fb/history.ts b/helpers/fb/history.ts
new file mode 100644
index 000000000..318fdb97a
--- /dev/null
+++ b/helpers/fb/history.ts
@@ -0,0 +1,199 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import { settingsStore } from "~/newstore/settings"
+import {
+  graphqlHistoryStore,
+  HISTORY_LIMIT,
+  restHistoryStore,
+  setGraphqlHistoryEntries,
+  setRESTHistoryEntries,
+} from "~/newstore/history"
+
+type HistoryFBCollections = "history" | "graphqlHistory"
+
+/**
+ * Whether the history are loaded. If this is set to true
+ * Updates to the history store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedRESTHistory = false
+
+/**
+ * Whether the history are loaded. If this is set to true
+ * Updates to the history store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedGraphqlHistory = false
+
+async function writeHistory(entry: any, col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to sync history")
+
+  const hs = entry
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .add(hs)
+  } catch (e) {
+    console.error("error writing to history", hs, e)
+    throw e
+  }
+}
+
+async function deleteHistory(entry: any, col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to delete history")
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .doc(entry.id)
+      .delete()
+  } catch (e) {
+    console.error("error deleting history", entry, e)
+    throw e
+  }
+}
+
+async function clearHistory(col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to clear history")
+
+  const { docs } = await firebase
+    .firestore()
+    .collection("users")
+    .doc(currentUser$.value.uid)
+    .collection(col)
+    .get()
+
+  await Promise.all(docs.map((e) => deleteHistory(e, col)))
+}
+
+async function toggleStar(entry: any, col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to toggle star")
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .doc(entry.id)
+      .update({ state: !entry.star })
+  } catch (e) {
+    console.error("error toggling star", entry, e)
+    throw e
+  }
+}
+
+export function initHistory() {
+  restHistoryStore.dispatches$.subscribe((dispatch) => {
+    if (
+      loadedRESTHistory &&
+      currentUser$.value &&
+      settingsStore.value.syncHistory
+    ) {
+      if (dispatch.dispatcher === "addEntry") {
+        writeHistory(dispatch.payload.entry, "history")
+      } else if (dispatch.dispatcher === "deleteEntry") {
+        deleteHistory(dispatch.payload.entry, "history")
+      } else if (dispatch.dispatcher === "clearHistory") {
+        clearHistory("history")
+      } else if (dispatch.dispatcher === "toggleStar") {
+        toggleStar(dispatch.payload.entry, "history")
+      }
+    }
+  })
+
+  graphqlHistoryStore.dispatches$.subscribe((dispatch) => {
+    if (
+      loadedGraphqlHistory &&
+      currentUser$.value &&
+      settingsStore.value.syncHistory
+    ) {
+      if (dispatch.dispatcher === "addEntry") {
+        writeHistory(dispatch.payload.entry, "graphqlHistory")
+      } else if (dispatch.dispatcher === "deleteEntry") {
+        deleteHistory(dispatch.payload.entry, "graphqlHistory")
+      } else if (dispatch.dispatcher === "clearHistory") {
+        clearHistory("graphqlHistory")
+      } else if (dispatch.dispatcher === "toggleStar") {
+        toggleStar(dispatch.payload.entry, "graphqlHistory")
+      }
+    }
+  })
+
+  let restSnapshotStop: (() => void) | null = null
+  let graphqlSnapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user) {
+      // Clear the snapshot listeners when the user logs out
+      if (restSnapshotStop) {
+        restSnapshotStop()
+        restSnapshotStop = null
+      }
+
+      if (graphqlSnapshotStop) {
+        graphqlSnapshotStop()
+        graphqlSnapshotStop = null
+      }
+    } else {
+      restSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("history")
+        .orderBy("updatedOn", "desc")
+        .limit(HISTORY_LIMIT)
+        .onSnapshot((historyRef) => {
+          const history: any[] = []
+
+          historyRef.forEach((doc) => {
+            const entry = doc.data()
+            entry.id = doc.id
+            history.push(entry)
+          })
+
+          loadedRESTHistory = false
+          setRESTHistoryEntries(history)
+          loadedRESTHistory = true
+        })
+
+      graphqlSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("graphqlHistory")
+        .orderBy("updatedOn", "desc")
+        .limit(HISTORY_LIMIT)
+        .onSnapshot((historyRef) => {
+          const history: any[] = []
+
+          historyRef.forEach((doc) => {
+            const entry = doc.data()
+            entry.id = doc.id
+            history.push(entry)
+          })
+
+          loadedGraphqlHistory = false
+          setGraphqlHistoryEntries(history)
+          loadedGraphqlHistory = true
+        })
+    }
+  })
+}
diff --git a/helpers/fb/index.ts b/helpers/fb/index.ts
new file mode 100644
index 000000000..303d6ff5d
--- /dev/null
+++ b/helpers/fb/index.ts
@@ -0,0 +1,29 @@
+import firebase from "firebase"
+import { initAuth } from "./auth"
+import { initCollections } from "./collections"
+import { initEnvironments } from "./environments"
+import { initFeeds } from "./feeds"
+import { initHistory } from "./history"
+import { initSettings } from "./settings"
+
+const firebaseConfig = {
+  apiKey: process.env.API_KEY,
+  authDomain: process.env.AUTH_DOMAIN,
+  databaseURL: process.env.DATABASE_URL,
+  projectId: process.env.PROJECT_ID,
+  storageBucket: process.env.STORAGE_BUCKET,
+  messagingSenderId: process.env.MESSAGING_SENDER_ID,
+  appId: process.env.APP_ID,
+  measurementId: process.env.MEASUREMENT_ID,
+}
+
+export function initializeFirebase() {
+  firebase.initializeApp(firebaseConfig)
+
+  initAuth()
+  initSettings()
+  initCollections()
+  initHistory()
+  initEnvironments()
+  initFeeds()
+}
diff --git a/helpers/fb/settings.ts b/helpers/fb/settings.ts
new file mode 100644
index 000000000..5b4f06c3f
--- /dev/null
+++ b/helpers/fb/settings.ts
@@ -0,0 +1,96 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import {
+  applySettingFB,
+  settingsStore,
+  SettingsType,
+} from "~/newstore/settings"
+
+/**
+ * Used locally to prevent infinite loop when settings sync update
+ * is applied to the store which then fires the store sync listener.
+ * When you want to update settings and not want to fire the update listener,
+ * set this to true and then set it back to false once it is done
+ */
+let loadedSettings = false
+
+/**
+ * Write Transform
+ */
+async function writeSettings(setting: string, value: any) {
+  if (currentUser$.value === null)
+    throw new Error("Cannot write setting, user not signed in")
+
+  const st = {
+    updatedOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    name: setting,
+    value,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("settings")
+      .doc(setting)
+      .set(st)
+  } catch (e) {
+    console.error("error updating", st, e)
+    throw e
+  }
+}
+
+export function initSettings() {
+  settingsStore.dispatches$.subscribe((dispatch) => {
+    if (currentUser$.value && loadedSettings) {
+      if (dispatch.dispatcher === "bulkApplySettings") {
+        Object.keys(dispatch.payload).forEach((key) => {
+          writeSettings(key, dispatch.payload[key])
+        })
+      } else if (dispatch.dispatcher !== "applySettingFB") {
+        writeSettings(
+          dispatch.payload.settingKey,
+          settingsStore.value[dispatch.payload.settingKey as keyof SettingsType]
+        )
+      }
+    }
+  })
+
+  let snapshotStop: (() => void) | null = null
+
+  // Subscribe and unsubscribe event listeners
+  currentUser$.subscribe((user) => {
+    if (!user && snapshotStop) {
+      // User logged out
+      snapshotStop()
+      snapshotStop = null
+    } else if (user) {
+      snapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("settings")
+        .onSnapshot((settingsRef) => {
+          const settings: any[] = []
+
+          settingsRef.forEach((doc) => {
+            const setting = doc.data()
+            setting.id = doc.id
+            settings.push(setting)
+          })
+
+          loadedSettings = false
+          settings.forEach((e) => {
+            if (e && e.name && e.value != null) {
+              applySettingFB(e.name, e.value)
+            }
+          })
+          loadedSettings = true
+        })
+    }
+  })
+}
diff --git a/helpers/teams/BackendUserInfo.ts b/helpers/teams/BackendUserInfo.ts
index 9610f4865..b0e504210 100644
--- a/helpers/teams/BackendUserInfo.ts
+++ b/helpers/teams/BackendUserInfo.ts
@@ -1,6 +1,6 @@
 import { BehaviorSubject } from "rxjs"
 import gql from "graphql-tag"
-import { fb } from "../fb"
+import { authIdToken$ } from "../fb/auth"
 import { apolloClient } from "../apollo"
 
 /*
@@ -11,7 +11,7 @@ import { apolloClient } from "../apollo"
 /**
  * Defines the information provided about a user
  */
-interface UserInfo {
+export interface UserInfo {
   /**
    * UID of the user
    */
@@ -42,10 +42,8 @@ export const currentUserInfo$ = new BehaviorSubject<UserInfo | null>(null)
 /**
  * Initializes the currenUserInfo$ view and sets up its update mechanism
  */
-export async function initUserInfo() {
-  if (fb.idToken) await updateUserInfo()
-
-  fb.idToken$.subscribe((token) => {
+export function initUserInfo() {
+  authIdToken$.subscribe((token) => {
     if (token) {
       updateUserInfo()
     } else {
diff --git a/layouts/default.vue b/layouts/default.vue
index 5322de765..6913f3891 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -18,6 +18,7 @@ import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
+import { initializeFirebase } from "~/helpers/fb"
 
 export default {
   beforeMount() {
@@ -62,6 +63,7 @@ export default {
 
     setupLocalPersistence()
 
+    initializeFirebase()
     initUserInfo()
   },
   beforeDestroy() {
diff --git a/pages/doc.vue b/pages/doc.vue
index 13b759c73..3238cb62e 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -64,18 +64,18 @@
             <div v-else class="row-wrapper">
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
               >
                 <button
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -113,7 +113,7 @@
 
 <script>
 import Mustache from "mustache"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"
 import folderContents from "~/assets/md/folderContents.md"
 import folderBody from "~/assets/md/folderBody.md"
@@ -121,13 +121,17 @@ import folderBody from "~/assets/md/folderBody.md"
 export default {
   data() {
     return {
-      fb,
       collectionJSON: "[]",
       items: [],
       docsMarkdown: "",
       selected: [],
     }
   },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
   head() {
     return {
       title: `Documentation • Hoppscotch`,
@@ -147,7 +151,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }
diff --git a/pages/enter.vue b/pages/enter.vue
index d3013ce85..f250f20e1 100644
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -6,10 +6,11 @@
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
 
-export default {
+export default Vue.extend({
   data() {
     return {
       signingInWithEmail: false,
@@ -17,14 +18,18 @@ export default {
     }
   },
   async mounted() {
-    if (fb.isSignInWithEmailLink(window.location.href)) {
+    if (isSignInWithEmailLink(window.location.href)) {
       this.signingInWithEmail = true
+
       let email = window.localStorage.getItem("emailForSignIn")
+
       if (!email) {
-        email = window.prompt("Please provide your email for confirmation")
+        email = window.prompt(
+          "Please provide your email for confirmation"
+        ) as string
       }
-      await fb
-        .signInWithEmailLink(email, window.location.href)
+
+      await signInWithEmailLink(email, window.location.href)
         .then(() => {
           window.localStorage.removeItem("emailForSignIn")
           this.$router.push({ path: "/" })
@@ -38,5 +43,5 @@ export default {
         })
     }
   },
-}
+})
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 4b5fdc448..82806848a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -775,12 +775,7 @@ import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
 import { tokenRequest, oauthRedirect } from "~/helpers/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
-import { fb } from "~/helpers/fb"
-import {
-  hasPathParams,
-  addPathParamsToVariables,
-  getQueryParams,
-} from "~/helpers/requestParams"
+import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpers/requestParams"
 import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
 import {
@@ -820,7 +815,6 @@ export default {
       showSaveRequestModal: false,
       editRequest: {},
       activeSidebar: true,
-      fb,
       customMethod: false,
       files: [],
       filenames: "",
diff --git a/pages/settings.vue b/pages/settings.vue
index 93128d1fc..e899a5ee0 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="page">
-    <div v-if="currentUser && currentUser.eaInvited">
+    <div v-if="currentBackendUser && currentBackendUser.eaInvited">
       <Teams />
     </div>
 
     <AppSection ref="account" :label="$t('account')" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
-        <div v-if="fb.currentUser">
+        <div v-if="currentUser">
           <button class="icon">
             <img
-              v-if="fb.currentUser.photoURL"
-              :src="fb.currentUser.photoURL"
+              v-if="currentUser.photoURL"
+              :src="currentUser.photoURL"
               class="w-6 h-6 rounded-full material-icons"
             />
             <i v-else class="material-icons">account_circle</i>
             <span>
-              {{ fb.currentUser.displayName || $t("nothing_found") }}
+              {{ currentUser.displayName || $t("nothing_found") }}
             </span>
           </button>
           <br />
           <button class="icon">
             <i class="material-icons">email</i>
             <span>
-              {{ fb.currentUser.email || $t("nothing_found") }}
+              {{ currentUser.email || $t("nothing_found") }}
             </span>
           </button>
           <br />
@@ -58,7 +58,7 @@
             </SmartToggle>
           </p>
 
-          <p v-if="fb.currentSettings.length !== 3">
+          <p v-if="isSyncDisabled">
             <button @click="initSettings">
               <i class="material-icons">sync</i>
               <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
@@ -214,7 +214,6 @@
 <script lang="ts">
 import Vue from "vue"
 import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
-import { fb } from "~/helpers/fb"
 import {
   getSettingSubject,
   applySetting,
@@ -223,6 +222,7 @@ import {
 } from "~/newstore/settings"
 import type { KeysMatching } from "~/types/ts-utils"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { currentUser$ } from "~/helpers/fb/auth"
 
 type SettingsType = typeof defaultSettings
 
@@ -234,7 +234,6 @@ export default Vue.extend({
         : null,
 
       doneButton: '<i class="material-icons">done</i>',
-      fb,
 
       SYNC_COLLECTIONS: true,
       SYNC_ENVIRONMENTS: true,
@@ -247,6 +246,9 @@ export default Vue.extend({
       PROXY_ENABLED: true,
 
       showEmail: false,
+
+      currentBackendUser: null,
+      currentUser: null,
     }
   },
   subscriptions() {
@@ -268,7 +270,8 @@ export default Vue.extend({
       SYNC_HISTORY: getSettingSubject("syncHistory"),
 
       // Teams feature flag
-      currentUser: currentUserInfo$,
+      currentBackendUser: currentUserInfo$,
+      currentUser: currentUser$,
     }
   },
   head() {
@@ -283,6 +286,9 @@ export default Vue.extend({
         key: this.PROXY_KEY,
       }
     },
+    isSyncDisabled(): boolean {
+      return this.SYNC_COLLECTIONS && this.SYNC_ENVIRONMENTS && this.SYNC_HISTORY
+    }
   },
   watch: {
     proxySettings: {
@@ -311,13 +317,6 @@ export default Vue.extend({
       value: SettingsType[K]
     ) {
       this.applySetting(name, value)
-
-      if (name === "syncCollections" && value) {
-        this.syncCollections()
-      }
-      if (name === "syncEnvironments" && value) {
-        this.syncEnvironments()
-      }
     },
     initSettings() {
       applySetting("syncHistory", true)
@@ -336,30 +335,6 @@ export default Vue.extend({
         1000
       )
     },
-    // TODO: Use the new collection store
-    syncCollections(): void {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        if (this.$store.state.postwoman.collections)
-          fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-            "collections"
-          )
-        if (this.$store.state.postwoman.collectionsGraphql)
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-      }
-    },
-    syncEnvironments(): void {
-      if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
-        fb.writeEnvironments(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
-        )
-      }
-    },
   },
 })
 </script>

From dfe810fff4962262d29b1d41376d5703cb6804f9 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 14 Jun 2021 08:35:53 -0400
Subject: [PATCH 2/9] Fix Sign In With Github

---
 components/firebase/Login.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 791531231..b75b9df33 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -45,7 +45,7 @@ import {
   signInUserWithGoogle,
   getSignInMethodsForEmail,
   signInWithEmailAndPassword,
-  signInWithGithub,
+  signInUserWithGithub,
   setProviderInfo,
 } from "~/helpers/fb/auth"
 

From f745fef6c2b1c6608b85b00b108445527edd382b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 14 Jun 2021 08:40:39 -0400
Subject: [PATCH 3/9] Fix enter.vue firebase not loaded

---
 pages/enter.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/enter.vue b/pages/enter.vue
index f250f20e1..301c16e60 100644
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import Vue from "vue"
+import { initializeFirebase } from "~/helpers/fb"
 import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
 
 export default Vue.extend({
@@ -17,6 +18,9 @@ export default Vue.extend({
       error: null,
     }
   },
+  beforeMount() {
+    initializeFirebase()
+  },
   async mounted() {
     if (isSignInWithEmailLink(window.location.href)) {
       this.signingInWithEmail = true

From b357dc8e2f23ea1e93815e8d9eaa213a02203125 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 14 Jun 2021 09:24:46 -0400
Subject: [PATCH 4/9] Fix history sync issues

---
 helpers/fb/history.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/helpers/fb/history.ts b/helpers/fb/history.ts
index 318fdb97a..f806e18a5 100644
--- a/helpers/fb/history.ts
+++ b/helpers/fb/history.ts
@@ -86,6 +86,8 @@ async function toggleStar(entry: any, col: HistoryFBCollections) {
   if (currentUser$.value == null)
     throw new Error("User not logged in to toggle star")
 
+  console.log(entry)
+
   try {
     await firebase
       .firestore()
@@ -93,7 +95,7 @@ async function toggleStar(entry: any, col: HistoryFBCollections) {
       .doc(currentUser$.value.uid)
       .collection(col)
       .doc(entry.id)
-      .update({ state: !entry.star })
+      .update({ star: !entry.star })
   } catch (e) {
     console.error("error toggling star", entry, e)
     throw e

From 0cedc9ed51c8932e829e50045ea8a0f567fe4e90 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 15 Jun 2021 06:34:21 +0530
Subject: [PATCH 5/9] chore: remove unused code

---
 README.md                         |  5 --
 components/firebase/Feeds.vue     | 62 ---------------------
 components/firebase/Inputform.vue | 59 --------------------
 components/firebase/Login.vue     |  2 -
 components/http/Notes.vue         | 30 ----------
 helpers/fb/feeds.ts               | 91 -------------------------------
 helpers/fb/index.ts               |  2 -
 lang/bn-BD.json                   |  3 -
 lang/de-DE.json                   |  3 -
 lang/en-US.json                   |  3 -
 lang/es-ES.json                   |  3 -
 lang/fr-FR.json                   |  1 -
 lang/id-ID.json                   |  3 -
 lang/in-IN.json                   |  3 -
 lang/ko-KR.json                   |  3 -
 lang/ml-ML.json                   |  3 -
 lang/nb-NO.json                   |  3 -
 lang/nl-BE.json                   |  3 -
 lang/pt-BR.json                   |  3 -
 lang/pt-PT.json                   |  3 -
 lang/tr-TR.json                   |  3 -
 lang/vi-VN.json                   |  3 -
 lang/zh-CN.json                   |  3 -
 lang/zh-TW.json                   |  3 -
 pages/graphql.vue                 |  8 ---
 pages/index.vue                   | 10 ++--
 pages/settings.vue                | 15 -----
 27 files changed, 5 insertions(+), 328 deletions(-)
 delete mode 100644 components/firebase/Feeds.vue
 delete mode 100644 components/firebase/Inputform.vue
 delete mode 100644 components/http/Notes.vue
 delete mode 100644 helpers/fb/feeds.ts

diff --git a/README.md b/README.md
index 492070454..a750d0733 100644
--- a/README.md
+++ b/README.md
@@ -361,7 +361,6 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 - History
 - Collections
 - Environments
-- Notes
 
 ✅ **Post-Request Tests β:** Write tests associated with a request that are executed after the request response.
 
@@ -378,10 +377,6 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 
 </details>
 
-📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
-
-_Notes are only available for signed-in users_
-
 🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
 
 <details>
diff --git a/components/firebase/Feeds.vue b/components/firebase/Feeds.vue
deleted file mode 100644
index 6d74513ad..000000000
--- a/components/firebase/Feeds.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div
-    v-if="currentFeeds && currentFeeds.length !== 0"
-    class="divide-y virtual-list divide-dashed divide-divider"
-  >
-    <ul v-for="feed in currentFeeds" :key="feed.id" class="flex-col">
-      <div data-test="list-item" class="show-on-large-screen">
-        <li class="info">
-          <label data-test="list-label" class="break-all">
-            {{ feed.label || $t("no_label") }}
-          </label>
-        </li>
-        <button class="icon" @click="deleteFeed(feed)">
-          <i class="material-icons">delete</i>
-        </button>
-      </div>
-      <div class="show-on-large-screen">
-        <li data-test="list-message" class="info clamb-3">
-          <label class="break-all">{{ feed.message || $t("empty") }}</label>
-        </li>
-      </div>
-    </ul>
-  </div>
-  <ul v-else class="flex-col">
-    <li>
-      <p class="info">{{ $t("empty") }}</p>
-    </li>
-  </ul>
-</template>
-
-<script>
-import { deleteFeed, currentFeeds$ } from "~/helpers/fb/feeds"
-
-export default {
-  subscriptions() {
-    return {
-      currentFeeds: currentFeeds$,
-    }
-  },
-  methods: {
-    async deleteFeed({ id }) {
-      await deleteFeed(id)
-      this.$toast.error(this.$t("deleted"), {
-        icon: "delete",
-      })
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-
-.clamb-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  @apply overflow-hidden;
-}
-</style>
diff --git a/components/firebase/Inputform.vue b/components/firebase/Inputform.vue
deleted file mode 100644
index 865de7ae1..000000000
--- a/components/firebase/Inputform.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="flex-col">
-    <div class="show-on-large-screen">
-      <input
-        v-model="message"
-        :aria-label="$t('label')"
-        type="text"
-        autofocus
-        :placeholder="$t('paste_a_note')"
-        class="rounded-t-lg"
-        @keyup.enter="formPost"
-      />
-    </div>
-    <div class="border-b show-on-large-screen border-divider">
-      <input
-        v-model="label"
-        :aria-label="$t('label')"
-        type="text"
-        autofocus
-        :placeholder="$t('label')"
-        @keyup.enter="formPost"
-      />
-      <button
-        class="icon"
-        :disabled="!(message || label)"
-        value="Save"
-        @click="formPost"
-      >
-        <i class="material-icons">add</i>
-        <span>Add</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from "vue"
-import { writeFeed } from "~/helpers/fb/feeds"
-
-export default Vue.extend({
-  data() {
-    return {
-      message: null as string | null,
-      label: null as string | null,
-    }
-  },
-  methods: {
-    formPost() {
-      // TODO: Check this ?
-      if (!(this.message || this.label)) {
-        return
-      }
-      writeFeed(this.label as string, this.message as string)
-      this.message = null
-      this.label = null
-    },
-  },
-})
-</script>
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index b75b9df33..a061db64a 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -71,7 +71,6 @@ export default {
                 applySetting("syncHistory", true)
                 applySetting("syncCollections", true)
                 applySetting("syncEnvironments", true)
-                this.$router.push({ path: "/settings" })
                 toastObject.remove()
               },
             },
@@ -144,7 +143,6 @@ export default {
                 applySetting("syncHistory", true)
                 applySetting("syncCollections", true)
                 applySetting("syncEnvironments", true)
-                this.$router.push({ path: "/settings" })
                 toastObject.remove()
               },
             },
diff --git a/components/http/Notes.vue b/components/http/Notes.vue
deleted file mode 100644
index 874291615..000000000
--- a/components/http/Notes.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <AppSection ref="sync" :label="$t('notes')" no-legend>
-    <div v-if="currentUser">
-      <FirebaseInputform />
-      <FirebaseFeeds />
-    </div>
-    <div v-else>
-      <p class="info">{{ $t("login_first") }}</p>
-      <FirebaseLogin @show-email="showEmail = true" />
-    </div>
-    <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
-  </AppSection>
-</template>
-
-<script>
-import { currentUser$ } from "~/helpers/fb/auth"
-
-export default {
-  subscriptions() {
-    return {
-      currentUser: currentUser$,
-    }
-  },
-  data() {
-    return {
-      showEmail: false,
-    }
-  },
-}
-</script>
diff --git a/helpers/fb/feeds.ts b/helpers/fb/feeds.ts
deleted file mode 100644
index 3ce10e0ec..000000000
--- a/helpers/fb/feeds.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import firebase from "firebase"
-import { BehaviorSubject } from "rxjs"
-import { currentUser$ } from "./auth"
-
-type HoppFeed = firebase.firestore.DocumentData & {
-  id: string
-  label: string
-  message: string
-}
-
-/**
- * An observable subject which is defined as an array of feeds
- * the current user has.
- *
- * Note: If this is null, then it means the user is not signed in
- */
-export const currentFeeds$ = new BehaviorSubject<HoppFeed[] | null>(null)
-
-export function initFeeds() {
-  let snapshotStop: (() => void) | null = null
-
-  currentUser$.subscribe((user) => {
-    if (!user && snapshotStop) {
-      // User has logged out, clean up snapshot listeners
-      snapshotStop()
-      snapshotStop = null
-    } else if (user) {
-      snapshotStop = firebase
-        .firestore()
-        .collection("users")
-        .doc(user.uid)
-        .collection("feeds")
-        .orderBy("createdOn", "desc")
-        .onSnapshot((feedsRef) => {
-          const feeds: HoppFeed[] = []
-
-          feedsRef.forEach((doc) => {
-            const feed = doc.data()
-            feed.id = doc.id
-            feeds.push(feed as HoppFeed)
-          })
-
-          currentFeeds$.next(feeds)
-        })
-    }
-  })
-}
-
-export async function writeFeed(label: string, message: string) {
-  if (currentUser$.value == null)
-    throw new Error("Logged out user cannot write to feeds")
-
-  const dt = {
-    createdOn: new Date(),
-    author: currentUser$.value.uid,
-    author_name: currentUser$.value.displayName,
-    author_image: currentUser$.value.photoURL,
-    message,
-    label,
-  }
-
-  try {
-    await firebase
-      .firestore()
-      .collection("users")
-      .doc(currentUser$.value.uid)
-      .collection("feeds")
-      .add(dt)
-  } catch (e) {
-    console.error("error inserting", dt, e)
-    throw e
-  }
-}
-
-export async function deleteFeed(id: string) {
-  if (currentUser$.value == null)
-    throw new Error("Logged out user cannot delete feed")
-
-  try {
-    await firebase
-      .firestore()
-      .collection("users")
-      .doc(currentUser$.value.uid)
-      .collection("feeds")
-      .doc(id)
-      .delete()
-  } catch (e) {
-    console.error("error deleting", id, e)
-    throw e
-  }
-}
diff --git a/helpers/fb/index.ts b/helpers/fb/index.ts
index 303d6ff5d..5d03f18b6 100644
--- a/helpers/fb/index.ts
+++ b/helpers/fb/index.ts
@@ -2,7 +2,6 @@ import firebase from "firebase"
 import { initAuth } from "./auth"
 import { initCollections } from "./collections"
 import { initEnvironments } from "./environments"
-import { initFeeds } from "./feeds"
 import { initHistory } from "./history"
 import { initSettings } from "./settings"
 
@@ -25,5 +24,4 @@ export function initializeFirebase() {
   initCollections()
   initHistory()
   initEnvironments()
-  initFeeds()
 }
diff --git a/lang/bn-BD.json b/lang/bn-BD.json
index a7692998e..486efec88 100644
--- a/lang/bn-BD.json
+++ b/lang/bn-BD.json
@@ -263,10 +263,7 @@
   "syncCollections": "সংগ্রহ",
   "syncEnvironments": "এনভায়রনমেন্টসমূহ",
   "turn_on": "চালু করুন",
-  "login_first": "প্রথমে লগিন করুন",
-  "paste_a_note": "একটি মন্তব্য লিপিবদ্ধ করুন",
   "import_from_sync": "সিঙ্ক থেকে ইমপোর্ট করুন",
-  "notes": "মন্তব্য",
   "socketio": "সকেট ইনপুট/আউটপুট",
   "event_name": "ইভেন্টের নাম",
   "mqtt": "এম.কিউ.টি.টি",
diff --git a/lang/de-DE.json b/lang/de-DE.json
index 2a225c75b..ceb9bb16b 100644
--- a/lang/de-DE.json
+++ b/lang/de-DE.json
@@ -90,10 +90,7 @@
   "syncEnvironments": "Environments",
   "turn_on": "Anschalten",
   "turn_off": "Ausschalten",
-  "login_first": "Logge dich zuerst ein",
-  "paste_a_note": "Füge eine Notiz hinzu",
   "import_from_sync": "Von Sync importieren",
-  "notes": "Notizen",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "mqtt": "MQTT",
diff --git a/lang/en-US.json b/lang/en-US.json
index e8a81fe08..843ef6ab1 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -266,10 +266,7 @@
   "syncEnvironments": "Environments",
   "turn_on": "Turn on",
   "turn_off": "Turn off",
-  "login_first": "Login first",
-  "paste_a_note": "Paste a note",
   "import_from_sync": "Import from Sync",
-  "notes": "Notes",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "mqtt": "MQTT",
diff --git a/lang/es-ES.json b/lang/es-ES.json
index 06cb15e21..353c53b80 100644
--- a/lang/es-ES.json
+++ b/lang/es-ES.json
@@ -240,7 +240,6 @@
   "syncCollections": "Colecciones",
   "syncEnvironments": "Entornos",
   "turn_on": "Encender",
-  "login_first": "Inicie sesión primero",
   "import_from_sync": "Importar desde Sync",
   "add_one_variable": "(añade al menos una variable)",
   "check_graphql_valid": "Compruebe la URL para ver si es un endpoint GraphQL válido",
@@ -262,8 +261,6 @@
   "scrollInto_use_toggle": "Auto scroll",
   "prettify_query": "Formatear query",
   "prettify_body": "Formatear cuerpo",
-  "paste_a_note": "Pegar una nota",
-  "notes": "Notas",
   "new_environment": "Nuevo entorno",
   "my_new_environment": "Mi nuevo entorno",
   "mqtt_unsubscribe": "Desuscribirse",
diff --git a/lang/fr-FR.json b/lang/fr-FR.json
index 06a2219a1..1549fc0ec 100644
--- a/lang/fr-FR.json
+++ b/lang/fr-FR.json
@@ -241,7 +241,6 @@
   "syncCollections": "Collections",
   "syncEnvironments": "Environments",
   "turn_on": "Activer",
-  "login_first": "Se connecter d'abord",
   "paste_a_collection": "Coller une collection",
   "import_from_sync": "Importer depuis la synchronisation",
   "create_new_collection": "Créer une nouvelle collection",
diff --git a/lang/id-ID.json b/lang/id-ID.json
index 62728353d..2e5818f52 100644
--- a/lang/id-ID.json
+++ b/lang/id-ID.json
@@ -263,10 +263,7 @@
   "syncEnvironments": "Lingkungan",
   "turn_on": "Nyalakan",
   "turn_off": "Matikan",
-  "login_first": "Masuk dahulu",
-  "paste_a_note": "Tempel catatan",
   "import_from_sync": "Impor dari Sinkronasi",
-  "notes": "Catatan",
   "socketio": "Socket.IO",
   "event_name": "Nama Kejadian",
   "mqtt": "MQTT",
diff --git a/lang/in-IN.json b/lang/in-IN.json
index a1d80fd4c..7968d9d99 100644
--- a/lang/in-IN.json
+++ b/lang/in-IN.json
@@ -266,10 +266,7 @@
   "syncEnvironments": "वातावरण",
   "turn_on": "चालू करो",
   "turn_off": "बंद करें",
-  "login_first": "पहले प्रवेश करो",
-  "paste_a_note": "एक नोट चिपकाएं",
   "import_from_sync": "सिंक से आयात करें",
-  "notes": "टिप्पणियाँ",
   "socketio": "सॉकेट.आईओ",
   "event_name": "घटना नाम",
   "mqtt": "एमक्यूटीटी",
diff --git a/lang/ko-KR.json b/lang/ko-KR.json
index d4880cddb..006172b39 100644
--- a/lang/ko-KR.json
+++ b/lang/ko-KR.json
@@ -263,10 +263,7 @@
   "syncCollections": "컬렉션",
   "syncEnvironments": "환경변수",
   "turn_on": "Turn on",
-  "login_first": "먼저 로그인해주세요.",
-  "paste_a_note": "노트 붙여넣기",
   "import_from_sync": "동기화에서 가져오기",
-  "notes": "노트",
   "socketio": "Socket.IO",
   "event_name": "이",
   "mqtt": "MQTT",
diff --git a/lang/ml-ML.json b/lang/ml-ML.json
index 922016a83..c4f352931 100644
--- a/lang/ml-ML.json
+++ b/lang/ml-ML.json
@@ -263,10 +263,7 @@
   "syncCollections": "ശേഖരങ്ങൾ",
   "syncEnvironments": "പരിതസ്ഥിതികൾ",
   "turn_on": "ഓൺ ചെയ്യുക",
-  "login_first": "ആദ്യം പ്രവേശിക്കുക",
-  "paste_a_note": "ഒരു കുറിപ്പ് ഒട്ടിക്കുക",
   "import_from_sync": "Sync-ൽ നിന്ന് ഇറക്കുമതി ചെയ്യുക",
-  "notes": "കുറിപ്പുകൾ",
   "socketio": "Socket.IO",
   "event_name": "ഇവന്റിന്റെ പേര്",
   "mqtt": "MQTT",
diff --git a/lang/nb-NO.json b/lang/nb-NO.json
index 18f930a49..e03c63157 100644
--- a/lang/nb-NO.json
+++ b/lang/nb-NO.json
@@ -266,10 +266,7 @@
   "syncEnvironments": "Miljøer",
   "turn_on": "Slå på",
   "turn_off": "Slå av",
-  "login_first": "Logg inn først",
-  "paste_a_note": "Lim inn et notat",
   "import_from_sync": "Importer fra synkronisering",
-  "notes": "Notater",
   "socketio": "Socket.IO",
   "event_name": "Hendelsesnavn",
   "mqtt": "MQTT",
diff --git a/lang/nl-BE.json b/lang/nl-BE.json
index ab3620783..ffb043bd7 100644
--- a/lang/nl-BE.json
+++ b/lang/nl-BE.json
@@ -263,10 +263,7 @@
   "syncCollections": "Collecties",
   "syncEnvironments": "Omgevingen",
   "turn_on": "Inschakelen",
-  "login_first": "Meld u eerst aan",
-  "paste_a_note": "Notitie plakken",
   "import_from_sync": "Importeren van Sync",
-  "notes": "Notities",
   "socketio": "Socket.IO",
   "event_name": "Event-naam",
   "mqtt": "MQTT",
diff --git a/lang/pt-BR.json b/lang/pt-BR.json
index 4b273eb5e..eeb0d89a5 100644
--- a/lang/pt-BR.json
+++ b/lang/pt-BR.json
@@ -271,10 +271,7 @@
   "scrollInto_use_toggle": "Auto rolagem",
   "sync": "Sincronizar",
   "turn_on": "Ligar",
-  "login_first": "Realize o login primeiro",
-  "paste_a_note": "Cole uma nota",
   "import_from_sync": "Importar de Sincronização",
-  "notes": "Notas",
   "socketio": "Socket.IO",
   "event_name": "Nome do Evento",
   "mqtt": "MQTT",
diff --git a/lang/pt-PT.json b/lang/pt-PT.json
index cf96b5760..a697109c9 100644
--- a/lang/pt-PT.json
+++ b/lang/pt-PT.json
@@ -260,10 +260,7 @@
   "syncCollections": "Coleções",
   "syncEnvironments": "Ambientes",
   "turn_on": "Ativar",
-  "login_first": "Entre primeiro",
-  "paste_a_note": "Cole uma nota",
   "import_from_sync": "Importar from Sync",
-  "notes": "Notas",
   "socketio": "Socket.IO",
   "event_name": "Nome do evento",
   "mqtt": "MQTT",
diff --git a/lang/tr-TR.json b/lang/tr-TR.json
index c5a572a85..a47455d7a 100644
--- a/lang/tr-TR.json
+++ b/lang/tr-TR.json
@@ -261,10 +261,7 @@
   "syncCollections": "Koleksiyonlar",
   "syncEnvironments": "Ortamlar",
   "turn_on": "Aç",
-  "login_first": "Önce Giriş Yap",
-  "paste_a_note": "Bir not yapıştır",
   "import_from_sync": "Senkronizasyondan İçeri Aktar",
-  "notes": "Notlar",
   "socketio": "Socket.IO",
   "event_name": "Olay Adı",
   "mqtt": "MQTT",
diff --git a/lang/vi-VN.json b/lang/vi-VN.json
index 9495c2261..faddc9fa4 100644
--- a/lang/vi-VN.json
+++ b/lang/vi-VN.json
@@ -263,10 +263,7 @@
   "syncCollections": "Bộ sưu tập",
   "syncEnvironments": "Môi trường",
   "turn_on": "Bật",
-  "login_first": "Đăng nhập trước",
-  "paste_a_note": "Dán ghi chú",
   "import_from_sync": "Nhập từ đồng bồ",
-  "notes": "Ghi chú",
   "socketio": "Socket.IO",
   "event_name": "Tên Event",
   "mqtt": "MQTT",
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index ab259b555..652ca8592 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -268,10 +268,7 @@
   "syncEnvironments": "环境",
   "turn_on": "点击开启",
   "turn_off": "点击关闭",
-  "login_first": "请先登录：",
-  "paste_a_note": "输入新便笺",
   "import_from_sync": "从云存储导入",
-  "notes": "便笺",
   "socketio": "Socket.IO",
   "event_name": "事件名称",
   "mqtt": "MQTT",
diff --git a/lang/zh-TW.json b/lang/zh-TW.json
index 640621768..c576ac5e3 100644
--- a/lang/zh-TW.json
+++ b/lang/zh-TW.json
@@ -258,10 +258,7 @@
   "syncCollections": "收藏庫",
   "syncEnvironments": "環境",
   "turn_on": "打開",
-  "login_first": "請先登入",
-  "paste_a_note": "Paste a note",
   "import_from_sync": "Import from Sync",
-  "notes": "Notes",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "mqtt": "MQTT",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index bda374e92..452a4da8e 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -457,14 +457,6 @@
             <SmartTab :id="'collections'" :label="$t('collections')">
               <CollectionsGraphql />
             </SmartTab>
-
-            <!-- <SmartTab :id="'env'" :label="$t('environments')">
-                <Environments @use-environment="useSelectedEnvironment($event)" />
-              </SmartTab>
-
-              <SmartTab :id="'notes'" :label="$t('notes')">
-                <HttpNotes />
-              </SmartTab> -->
           </SmartTabs>
         </aside>
       </TranslateSlideLeft>
diff --git a/pages/index.vue b/pages/index.vue
index 82806848a..b7e51d7eb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -637,10 +637,6 @@
               <SmartTab :id="'env'" :label="$t('environments')">
                 <Environments />
               </SmartTab>
-
-              <SmartTab :id="'notes'" :label="$t('notes')">
-                <HttpNotes />
-              </SmartTab>
             </SmartTabs>
           </section>
         </aside>
@@ -775,7 +771,11 @@ import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
 import { tokenRequest, oauthRedirect } from "~/helpers/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
-import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpers/requestParams"
+import {
+  hasPathParams,
+  addPathParamsToVariables,
+  getQueryParams,
+} from "~/helpers/requestParams"
 import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
 import {
diff --git a/pages/settings.vue b/pages/settings.vue
index e899a5ee0..210f5f7a3 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -57,13 +57,6 @@
               {{ SYNC_HISTORY ? $t("enabled") : $t("disabled") }}
             </SmartToggle>
           </p>
-
-          <p v-if="isSyncDisabled">
-            <button @click="initSettings">
-              <i class="material-icons">sync</i>
-              <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
-            </button>
-          </p>
         </div>
         <div v-else>
           <label>{{ $t("login_with") }}</label>
@@ -286,9 +279,6 @@ export default Vue.extend({
         key: this.PROXY_KEY,
       }
     },
-    isSyncDisabled(): boolean {
-      return this.SYNC_COLLECTIONS && this.SYNC_ENVIRONMENTS && this.SYNC_HISTORY
-    }
   },
   watch: {
     proxySettings: {
@@ -318,11 +308,6 @@ export default Vue.extend({
     ) {
       this.applySetting(name, value)
     },
-    initSettings() {
-      applySetting("syncHistory", true)
-      applySetting("syncCollections", true)
-      applySetting("syncEnvironments", true)
-    },
     resetProxy({ target }: { target: HTMLElement }) {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
 

From 4ce7f0b487e9d4497910f71a6e00b600aa551a13 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 16 Jun 2021 22:33:17 -0400
Subject: [PATCH 6/9] Remove redudant applySettingFB

---
 helpers/fb/settings.ts | 10 +++-------
 newstore/settings.ts   | 29 -----------------------------
 2 files changed, 3 insertions(+), 36 deletions(-)

diff --git a/helpers/fb/settings.ts b/helpers/fb/settings.ts
index 5b4f06c3f..e51b127a6 100644
--- a/helpers/fb/settings.ts
+++ b/helpers/fb/settings.ts
@@ -1,10 +1,6 @@
 import firebase from "firebase"
 import { currentUser$ } from "./auth"
-import {
-  applySettingFB,
-  settingsStore,
-  SettingsType,
-} from "~/newstore/settings"
+import { applySetting, settingsStore, SettingsType } from "~/newstore/settings"
 
 /**
  * Used locally to prevent infinite loop when settings sync update
@@ -51,7 +47,7 @@ export function initSettings() {
         Object.keys(dispatch.payload).forEach((key) => {
           writeSettings(key, dispatch.payload[key])
         })
-      } else if (dispatch.dispatcher !== "applySettingFB") {
+      } else {
         writeSettings(
           dispatch.payload.settingKey,
           settingsStore.value[dispatch.payload.settingKey as keyof SettingsType]
@@ -86,7 +82,7 @@ export function initSettings() {
           loadedSettings = false
           settings.forEach((e) => {
             if (e && e.name && e.value != null) {
-              applySettingFB(e.name, e.value)
+              applySetting(e.name, e.value)
             }
           })
           loadedSettings = true
diff --git a/newstore/settings.ts b/newstore/settings.ts
index 2b3536e53..e51a66598 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -64,22 +64,6 @@ const dispatchers = defineDispatchers({
     const result: Partial<SettingsType> = {}
     result[settingKey] = value
 
-    return result
-  },
-  applySettingFB<K extends keyof SettingsType>(
-    _currentState: SettingsType,
-    { settingKey, value }: { settingKey: K; value: SettingsType[K] }
-  ) {
-    if (!validKeys.includes(settingKey)) {
-      console.log(
-        `Ignoring non-existent setting key '${settingKey}' assignment by firebase`
-      )
-      return {}
-    }
-
-    const result: Partial<SettingsType> = {}
-    result[settingKey] = value
-
     return result
   },
 })
@@ -120,16 +104,3 @@ export function applySetting<K extends keyof SettingsType>(
     },
   })
 }
-
-export function applySettingFB<K extends keyof SettingsType>(
-  settingKey: K,
-  value: SettingsType[K]
-) {
-  settingsStore.dispatch({
-    dispatcher: "applySettingFB",
-    payload: {
-      settingKey,
-      value,
-    },
-  })
-}

From 02d3b45efc1cc26deac5d5fddfe09098b9dcc388 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 16 Jun 2021 22:35:53 -0400
Subject: [PATCH 7/9] Added settings observable

---
 newstore/settings.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/newstore/settings.ts b/newstore/settings.ts
index e51a66598..af99ce721 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -70,6 +70,11 @@ const dispatchers = defineDispatchers({
 
 export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
 
+/**
+ * An observable value to make avail all the state information at once
+ */
+export const settings$ = settingsStore.subject$.asObservable()
+
 export function getSettingSubject<K extends keyof SettingsType>(
   settingKey: K
 ): Observable<SettingsType[K]> {

From 1fb2c359843be35dadfd44aac7e157e5c7b0be12 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 17 Jun 2021 08:22:59 -0400
Subject: [PATCH 8/9] Handle error.vue initializeFirebase

---
 layouts/error.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/layouts/error.vue b/layouts/error.vue
index b48488983..9d2518194 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -22,6 +22,8 @@
 </template>
 
 <script>
+import { initializeFirebase } from "~/helpers/fb"
+
 export default {
   props: {
     error: {
@@ -37,7 +39,9 @@ export default {
       },
     }
   },
-
+  beforeMount() {
+    initializeFirebase()
+  },
   computed: {
     statusCode() {
       return (this.error && this.error.statusCode) || 500

From a85729b4cf348db69d8ac7a273f1933063fe91bb Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 19 Jun 2021 20:36:23 -0400
Subject: [PATCH 9/9] Fix firebase reinitialization crash

---
 helpers/fb/index.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/helpers/fb/index.ts b/helpers/fb/index.ts
index 5d03f18b6..25566d530 100644
--- a/helpers/fb/index.ts
+++ b/helpers/fb/index.ts
@@ -16,12 +16,18 @@ const firebaseConfig = {
   measurementId: process.env.MEASUREMENT_ID,
 }
 
-export function initializeFirebase() {
-  firebase.initializeApp(firebaseConfig)
+let initialized = false
 
-  initAuth()
-  initSettings()
-  initCollections()
-  initHistory()
-  initEnvironments()
+export function initializeFirebase() {
+  if (!initialized) {
+    firebase.initializeApp(firebaseConfig)
+
+    initAuth()
+    initSettings()
+    initCollections()
+    initHistory()
+    initEnvironments()
+
+    initialized = true
+  }
 }