Initial Firebase refactor pass

2021-06-14 00:07:30 -04:00
parent ced2f1b911
commit 85c6932f8f
30 changed files with 979 additions and 1029 deletions
--- 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() {
--- 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",
            },
          }
--- 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",
            },
          }
--- 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
--- 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",
            },
          }
--- 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)
--- 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",
      })
--- 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>
--- 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()
--- 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>
--- a/components/firebase/tests/Feeds.spec.js
+++ b/components/firebase/tests/Feeds.spec.js
@@ -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")
-  })
-})
--- a/components/firebase/tests/Inputform.spec.js
+++ b/components/firebase/tests/Inputform.spec.js
@@ -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")
-  })
-})
--- a/components/firebase/tests/Logout.spec.js
+++ b/components/firebase/tests/Logout.spec.js
@@ -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())
-  })
-})
--- 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,
    }
  },
--- 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`