refactor: bump firebase to v9

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
   // add your custom rules here
   rules: {
     semi: [2, "never"],
+    "import/named": "off", // because, named import issue with typescript see: https://github.com/typescript-eslint/typescript-eslint/issues/154
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "vue/max-attributes-per-line": "off",

helpers/fb/analytics.ts

@@ -1,5 +1,11 @@
-import firebase from "firebase/app"
+import {
-import "firebase/analytics"
+  Analytics,
+  getAnalytics,
+  logEvent,
+  setAnalyticsCollectionEnabled,
+  setUserId,
+  setUserProperties,
+} from "firebase/analytics"
 import { authEvents$ } from "./auth"
 import {
   HoppAccentColor,
@@ -8,7 +14,7 @@ import {
   settingsStore,
 } from "~/newstore/settings"
 
-let analytics: firebase.analytics.Analytics | null
+let analytics: Analytics | null = null
 
 type SettingsCustomDimensions = {
   usesProxy: boolean
@@ -29,7 +35,7 @@ type HoppRequestEvent =
   | { platform: "wss" | "sse" | "socketio" | "mqtt" }
 
 export function initAnalytics() {
-  analytics = firebase.app().analytics()
+  analytics = getAnalytics()
 
   initLoginListeners()
   initSettingsListeners()
@@ -38,16 +44,16 @@ export function initAnalytics() {
 function initLoginListeners() {
   authEvents$.subscribe((ev) => {
     if (ev.event === "login") {
-      if (settingsStore.value.TELEMETRY_ENABLED) {
+      if (settingsStore.value.TELEMETRY_ENABLED && analytics) {
-        analytics?.setUserId(ev.user.uid)
+        setUserId(analytics, ev.user.uid)
 
-        analytics?.logEvent("login", {
+        logEvent(analytics, "login", {
           method: ev.user.providerData[0]?.providerId, // Assume the first provider is the login provider
         })
       }
     } else if (ev.event === "logout") {
-      if (settingsStore.value.TELEMETRY_ENABLED) {
+      if (settingsStore.value.TELEMETRY_ENABLED && analytics) {
-        analytics?.logEvent("logout")
+        logEvent(analytics, "logout")
       }
     }
   })
@@ -71,29 +77,30 @@ function initSettingsListeners() {
 
     // User toggled telemetry mode to off or to on
     if (
-      (telemetryStatus && !settings.TELEMETRY_ENABLED) ||
+      ((telemetryStatus && !settings.TELEMETRY_ENABLED) ||
-      settings.TELEMETRY_ENABLED
+        settings.TELEMETRY_ENABLED) &&
+      analytics
     ) {
-      analytics?.setUserProperties(conf)
+      setUserProperties(analytics, conf)
     }
 
     telemetryStatus = settings.TELEMETRY_ENABLED
 
-    analytics?.setAnalyticsCollectionEnabled(telemetryStatus)
+    if (analytics) setAnalyticsCollectionEnabled(analytics, telemetryStatus)
   })
 
-  analytics?.setAnalyticsCollectionEnabled(telemetryStatus)
+  if (analytics) setAnalyticsCollectionEnabled(analytics, telemetryStatus)
 }
 
 export function logHoppRequestRunToAnalytics(ev: HoppRequestEvent) {
-  if (settingsStore.value.TELEMETRY_ENABLED) {
+  if (settingsStore.value.TELEMETRY_ENABLED && analytics) {
-    analytics?.logEvent("hopp-request", ev)
+    logEvent(analytics, "hopp-request", ev)
   }
 }
 
 export function logPageView(pagePath: string) {
-  if (settingsStore.value.TELEMETRY_ENABLED) {
+  if (settingsStore.value.TELEMETRY_ENABLED && analytics) {
-    analytics?.logEvent("page_view", {
+    logEvent(analytics, "page_view", {
       page_path: pagePath,
     })
   }

helpers/fb/auth.ts

@@ -1,6 +1,26 @@
-import firebase from "firebase/app"
+import {
-import "firebase/firestore"
+  User,
-import "firebase/auth"
+  getAuth,
+  onAuthStateChanged,
+  onIdTokenChanged,
+  signInWithPopup,
+  GoogleAuthProvider,
+  GithubAuthProvider,
+  signInWithEmailAndPassword as signInWithEmailAndPass,
+  isSignInWithEmailLink as isSignInWithEmailLinkFB,
+  fetchSignInMethodsForEmail,
+  sendSignInLinkToEmail,
+  signInWithEmailLink as signInWithEmailLinkFB,
+  ActionCodeSettings,
+  signOut,
+} from "firebase/auth"
+import {
+  onSnapshot,
+  getFirestore,
+  setDoc,
+  doc,
+  updateDoc,
+} from "firebase/firestore"
 import {
   BehaviorSubject,
   distinctUntilChanged,
@@ -11,7 +31,7 @@ import {
 } from "rxjs"
 import { onBeforeUnmount, onMounted } from "@nuxtjs/composition-api"
 
-export type HoppUser = firebase.User & {
+export type HoppUser = User & {
   provider?: string
   accessToken?: string
 }
@@ -39,9 +59,12 @@ export const authEvents$ = new Subject<AuthEvents>()
  * Initializes the firebase authentication related subjects
  */
 export function initAuth() {
+  const auth = getAuth()
+  const firestore = getFirestore()
+
   let extraSnapshotStop: (() => void) | null = null
 
-  firebase.auth().onAuthStateChanged((user) => {
+  onAuthStateChanged(auth, (user) => {
     /** Whether the user was logged in before */
     const wasLoggedIn = currentUser$.value !== null
 
@@ -62,19 +85,14 @@ export function initAuth() {
           uid: profile.uid,
         }
 
-        firebase
+        setDoc(doc(firestore, "users", user.uid), us, { merge: true }).catch(
-          .firestore()
+          (e) => console.error("error updating", us, e)
-          .collection("users")
+        )
-          .doc(user.uid)
-          .set(us, { merge: true })
-          .catch((e) => console.error("error updating", us, e))
       })
 
-      extraSnapshotStop = firebase
+      extraSnapshotStop = onSnapshot(
-        .firestore()
+        doc(firestore, "users", user.uid),
-        .collection("users")
+        (doc) => {
-        .doc(user.uid)
-        .onSnapshot((doc) => {
           const data = doc.data()
 
           const userUpdate: HoppUser = user
@@ -86,7 +104,8 @@ export function initAuth() {
           }
 
           currentUser$.next(userUpdate)
-        })
+        }
+      )
     }
     currentUser$.next(user)
 
@@ -104,7 +123,7 @@ export function initAuth() {
     }
   })
 
-  firebase.auth().onIdTokenChanged(async (user) => {
+  onIdTokenChanged(auth, async (user) => {
     if (user) {
       authIdToken$.next(await user.getIdToken())
 
@@ -123,18 +142,17 @@ export function initAuth() {
  * Sign user in with a popup using Google
  */
 export async function signInUserWithGoogle() {
-  return await firebase
+  return await signInWithPopup(getAuth(), new GoogleAuthProvider())
-    .auth()
-    .signInWithPopup(new firebase.auth.GoogleAuthProvider())
 }
 
 /**
  * Sign user in with a popup using Github
  */
 export async function signInUserWithGithub() {
-  return await firebase
+  return await signInWithPopup(
-    .auth()
+    getAuth(),
-    .signInWithPopup(new firebase.auth.GithubAuthProvider().addScope("gist"))
+    new GithubAuthProvider().addScope("gist")
+  )
 }
 
 /**
@@ -144,7 +162,7 @@ export async function signInWithEmailAndPassword(
   email: string,
   password: string
 ) {
-  return await firebase.auth().signInWithEmailAndPassword(email, password)
+  return await signInWithEmailAndPass(getAuth(), email, password)
 }
 
 /**
@@ -155,7 +173,7 @@ export async function signInWithEmailAndPassword(
  * @returns Promise for string array of the auth provider methods accessible
  */
 export async function getSignInMethodsForEmail(email: string) {
-  return await firebase.auth().fetchSignInMethodsForEmail(email)
+  return await fetchSignInMethodsForEmail(getAuth(), email)
 }
 
 /**
@@ -166,9 +184,9 @@ export async function getSignInMethodsForEmail(email: string) {
  */
 export async function signInWithEmail(
   email: string,
-  actionCodeSettings: firebase.auth.ActionCodeSettings
+  actionCodeSettings: ActionCodeSettings
 ) {
-  return await firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
+  return await sendSignInLinkToEmail(getAuth(), email, actionCodeSettings)
 }
 
 /**
@@ -177,7 +195,7 @@ export async function signInWithEmail(
  * @param url - The URL to look in
  */
 export function isSignInWithEmailLink(url: string) {
-  return firebase.auth().isSignInWithEmailLink(url)
+  return isSignInWithEmailLinkFB(getAuth(), url)
 }
 
 /**
@@ -187,7 +205,7 @@ export function isSignInWithEmailLink(url: string) {
  * @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)
+  return await signInWithEmailLinkFB(getAuth(), email, url)
 }
 
 /**
@@ -196,7 +214,7 @@ export async function signInWithEmailLink(email: string, url: string) {
 export async function signOutUser() {
   if (!currentUser$.value) throw new Error("No user has logged in")
 
-  await firebase.auth().signOut()
+  await signOut(getAuth())
 }
 
 /**
@@ -216,12 +234,10 @@ export async function setProviderInfo(id: string, token: string) {
   }
 
   try {
-    await firebase
+    await updateDoc(
-      .firestore()
+      doc(getFirestore(), "users", currentUser$.value.uid),
-      .collection("users")
+      us
-      .doc(currentUser$.value.uid)
+    ).catch((e) => console.error("error updating", us, e))
-      .update(us)
-      .catch((e) => console.error("error updating", us, e))
   } catch (e) {
     console.error("error updating", e)
     throw e

helpers/fb/collections.ts

@@ -1,5 +1,10 @@
-import firebase from "firebase/app"
+import {
-import "firebase/firestore"
+  collection,
+  doc,
+  getFirestore,
+  onSnapshot,
+  setDoc,
+} from "firebase/firestore"
 import { currentUser$ } from "./auth"
 import {
   restCollections$,
@@ -49,13 +54,10 @@ export async function writeCollections(
   }
 
   try {
-    await firebase
+    await setDoc(
-      .firestore()
+      doc(getFirestore(), "users", currentUser$.value.uid, flag, "sync"),
-      .collection("users")
+      cl
-      .doc(currentUser$.value.uid)
+    )
-      .collection(flag)
-      .doc("sync")
-      .set(cl)
   } catch (e) {
     console.error("error updating", cl, e)
     throw e
@@ -98,12 +100,9 @@ export function initCollections() {
         graphqlSnapshotStop = null
       }
     } else {
-      restSnapshotStop = firebase
+      restSnapshotStop = onSnapshot(
-        .firestore()
+        collection(getFirestore(), "users", user.uid, "collections"),
-        .collection("users")
+        (collectionsRef) => {
-        .doc(user.uid)
-        .collection("collections")
-        .onSnapshot((collectionsRef) => {
           const collections: any[] = []
           collectionsRef.forEach((doc) => {
             const collection = doc.data()
@@ -124,14 +123,12 @@ export function initCollections() {
           }
 
           loadedRESTCollections = true
-        })
+        }
+      )
 
-      graphqlSnapshotStop = firebase
+      graphqlSnapshotStop = onSnapshot(
-        .firestore()
+        collection(getFirestore(), "users", user.uid, "collectionsGraphql"),
-        .collection("users")
+        (collectionsRef) => {
-        .doc(user.uid)
-        .collection("collectionsGraphql")
-        .onSnapshot((collectionsRef) => {
           const collections: any[] = []
           collectionsRef.forEach((doc) => {
             const collection = doc.data()
@@ -150,7 +147,8 @@ export function initCollections() {
           }
 
           loadedGraphqlCollections = true
-        })
+        }
+      )
     }
   })
 }

helpers/fb/environments.ts

@@ -1,5 +1,10 @@
-import firebase from "firebase/app"
+import {
-import "firebase/firestore"
+  collection,
+  doc,
+  getFirestore,
+  onSnapshot,
+  setDoc,
+} from "firebase/firestore"
 import { currentUser$ } from "./auth"
 import {
   Environment,
@@ -39,13 +44,16 @@ async function writeEnvironments(environment: Environment[]) {
   }
 
   try {
-    await firebase
+    await setDoc(
-      .firestore()
+      doc(
-      .collection("users")
+        getFirestore(),
-      .doc(currentUser$.value.uid)
+        "users",
-      .collection("environments")
+        currentUser$.value.uid,
-      .doc("sync")
+        "envrionments",
-      .set(ev)
+        "sync"
+      ),
+      ev
+    )
   } catch (e) {
     console.error("error updating", ev, e)
     throw e
@@ -65,13 +73,10 @@ async function writeGlobalEnvironment(variables: Environment["variables"]) {
   }
 
   try {
-    await firebase
+    await setDoc(
-      .firestore()
+      doc(getFirestore(), "users", currentUser$.value.uid, "globalEnv", "sync"),
-      .collection("users")
+      ev
-      .doc(currentUser$.value.uid)
+    )
-      .collection("globalEnv")
-      .doc("sync")
-      .set(ev)
   } catch (e) {
     console.error("error updating", ev, e)
     throw e
@@ -115,12 +120,9 @@ export function initEnvironments() {
         globalsSnapshotStop = null
       }
     } else if (user) {
-      envSnapshotStop = firebase
+      envSnapshotStop = onSnapshot(
-        .firestore()
+        collection(getFirestore(), "users", user.uid, "environments"),
-        .collection("users")
+        (environmentsRef) => {
-        .doc(user.uid)
-        .collection("environments")
-        .onSnapshot((environmentsRef) => {
           const environments: any[] = []
 
           environmentsRef.forEach((doc) => {
@@ -134,13 +136,11 @@ export function initEnvironments() {
             replaceEnvironments(environments[0].environment)
           }
           loadedEnvironments = true
-        })
+        }
-      globalsSnapshotStop = firebase
+      )
-        .firestore()
+      globalsSnapshotStop = onSnapshot(
-        .collection("users")
+        collection(getFirestore(), "users", user.uid, "globalEnv"),
-        .doc(user.uid)
+        (globalsRef) => {
-        .collection("globalEnv")
-        .onSnapshot((globalsRef) => {
           if (globalsRef.docs.length === 0) {
             loadedGlobals = true
             return
@@ -150,7 +150,8 @@ export function initEnvironments() {
           loadedGlobals = false
           setGlobalEnvVariables(doc.variables)
           loadedGlobals = true
-        })
+        }
+      )
     }
   })
 }

helpers/fb/history.ts

@@ -1,5 +1,16 @@
-import firebase from "firebase/app"
+import {
-import "firebase/firestore"
+  addDoc,
+  collection,
+  deleteDoc,
+  doc,
+  getDocs,
+  getFirestore,
+  limit,
+  onSnapshot,
+  orderBy,
+  query,
+  updateDoc,
+} from "firebase/firestore"
 import { currentUser$ } from "./auth"
 import { settingsStore } from "~/newstore/settings"
 import {
@@ -46,12 +57,10 @@ async function writeHistory(entry: any, col: HistoryFBCollections) {
   }
 
   try {
-    await firebase
+    await addDoc(
-      .firestore()
+      collection(getFirestore(), "users", currentUser$.value.uid, col),
-      .collection("users")
+      hs
-      .doc(currentUser$.value.uid)
+    )
-      .collection(col)
-      .add(hs)
   } catch (e) {
     console.error("error writing to history", hs, e)
     throw e
@@ -63,13 +72,9 @@ async function deleteHistory(entry: any, col: HistoryFBCollections) {
     throw new Error("User not logged in to delete history")
 
   try {
-    await firebase
+    await deleteDoc(
-      .firestore()
+      doc(getFirestore(), "users", currentUser$.value.uid, col, entry.id)
-      .collection("users")
+    )
-      .doc(currentUser$.value.uid)
-      .collection(col)
-      .doc(entry.id)
-      .delete()
   } catch (e) {
     console.error("error deleting history", entry, e)
     throw e
@@ -80,12 +85,9 @@ async function clearHistory(col: HistoryFBCollections) {
   if (currentUser$.value == null)
     throw new Error("User not logged in to clear history")
 
-  const { docs } = await firebase
+  const { docs } = await getDocs(
-    .firestore()
+    collection(getFirestore(), "users", currentUser$.value.uid)
-    .collection("users")
+  )
-    .doc(currentUser$.value.uid)
-    .collection(col)
-    .get()
 
   await Promise.all(docs.map((e) => deleteHistory(e, col)))
 }
@@ -95,13 +97,10 @@ async function toggleStar(entry: any, col: HistoryFBCollections) {
     throw new Error("User not logged in to toggle star")
 
   try {
-    await firebase
+    await updateDoc(
-      .firestore()
+      doc(getFirestore(), "users", currentUser$.value.uid, col, entry.id),
-      .collection("users")
+      { star: !entry.star }
-      .doc(currentUser$.value.uid)
+    )
-      .collection(col)
-      .doc(entry.id)
-      .update({ star: !entry.star })
   } catch (e) {
     console.error("error toggling star", entry, e)
     throw e
@@ -161,14 +160,13 @@ export function initHistory() {
         graphqlSnapshotStop = null
       }
     } else {
-      restSnapshotStop = firebase
+      restSnapshotStop = onSnapshot(
-        .firestore()
+        query(
-        .collection("users")
+          collection(getFirestore(), "users", user.uid, "history"),
-        .doc(user.uid)
+          orderBy("updatedOn", "desc"),
-        .collection("history")
+          limit(HISTORY_LIMIT)
-        .orderBy("updatedOn", "desc")
+        ),
-        .limit(HISTORY_LIMIT)
+        (historyRef) => {
-        .onSnapshot((historyRef) => {
           const history: RESTHistoryEntry[] = []
 
           historyRef.forEach((doc) => {
@@ -180,16 +178,16 @@ export function initHistory() {
           loadedRESTHistory = false
           setRESTHistoryEntries(history)
           loadedRESTHistory = true
-        })
+        }
+      )
 
-      graphqlSnapshotStop = firebase
+      graphqlSnapshotStop = onSnapshot(
-        .firestore()
+        query(
-        .collection("users")
+          collection(getFirestore(), "users", user.uid, "graphqlHistory"),
-        .doc(user.uid)
+          orderBy("updatedOn", "desc"),
-        .collection("graphqlHistory")
+          limit(HISTORY_LIMIT)
-        .orderBy("updatedOn", "desc")
+        ),
-        .limit(HISTORY_LIMIT)
+        (historyRef) => {
-        .onSnapshot((historyRef) => {
           const history: GQLHistoryEntry[] = []
 
           historyRef.forEach((doc) => {
@@ -201,7 +199,8 @@ export function initHistory() {
           loadedGraphqlHistory = false
           setGraphqlHistoryEntries(history)
           loadedGraphqlHistory = true
-        })
+        }
+      )
     }
   })
 }

helpers/fb/index.ts

@@ -1,4 +1,4 @@
-import firebase from "firebase/app"
+import { initializeApp } from "firebase/app"
 import { initAnalytics } from "./analytics"
 import { initAuth } from "./auth"
 import { initCollections } from "./collections"
@@ -22,7 +22,7 @@ let initialized = false
 export function initializeFirebase() {
   if (!initialized) {
     try {
-      firebase.initializeApp(firebaseConfig)
+      initializeApp(firebaseConfig)
 
       initAuth()
       initSettings()

helpers/fb/request.ts

@@ -1,5 +1,3 @@
-import firebase from "firebase/app"
-import "firebase/firestore"
 import {
   audit,
   combineLatest,
@@ -9,6 +7,7 @@ import {
   map,
   Subscription,
 } from "rxjs"
+import { doc, getDoc, getFirestore, setDoc } from "firebase/firestore"
 import {
   HoppRESTRequest,
   translateToNewRequest,
@@ -23,13 +22,10 @@ import { restRequest$ } from "~/newstore/RESTSession"
  * @param request The request to write to the request sync
  */
 function writeCurrentRequest(user: HoppUser, request: HoppRESTRequest) {
-  return firebase
+  return setDoc(
-    .firestore()
+    doc(getFirestore(), "users", user.uid, "requests", "rest"),
-    .collection("users")
+    request
-    .doc(user.uid)
+  )
-    .collection("requests")
-    .doc("rest")
-    .set(request)
 }
 
 /**
@@ -43,15 +39,11 @@ export async function loadRequestFromSync(): Promise<HoppRESTRequest | null> {
   if (!currentUser)
     throw new Error("Cannot load request from sync without login")
 
-  const doc = await firebase
+  const fbDoc = await getDoc(
-    .firestore()
+    doc(getFirestore(), "users", currentUser.uid, "requests", "rest")
-    .collection("users")
+  )
-    .doc(currentUser.uid)
-    .collection("requests")
-    .doc("rest")
-    .get()
 
-  const data = doc.data()
+  const data = fbDoc.data()
 
   if (!data) return null
   else return translateToNewRequest(data)

helpers/fb/settings.ts

@@ -1,5 +1,10 @@
-import firebase from "firebase/app"
+import {
-import "firebase/firestore"
+  collection,
+  doc,
+  getFirestore,
+  onSnapshot,
+  setDoc,
+} from "@firebase/firestore"
 import { currentUser$ } from "./auth"
 import { applySetting, settingsStore, SettingsType } from "~/newstore/settings"
 
@@ -28,13 +33,10 @@ async function writeSettings(setting: string, value: any) {
   }
 
   try {
-    await firebase
+    await setDoc(
-      .firestore()
+      doc(getFirestore(), "users", currentUser$.value.uid, "settings", setting),
-      .collection("users")
+      st
-      .doc(currentUser$.value.uid)
+    )
-      .collection("settings")
-      .doc(setting)
-      .set(st)
   } catch (e) {
     console.error("error updating", st, e)
     throw e
@@ -66,12 +68,9 @@ export function initSettings() {
       snapshotStop()
       snapshotStop = null
     } else if (user) {
-      snapshotStop = firebase
+      snapshotStop = onSnapshot(
-        .firestore()
+        collection(getFirestore(), "users", user.uid, "settings"),
-        .collection("users")
+        (settingsRef) => {
-        .doc(user.uid)
-        .collection("settings")
-        .onSnapshot((settingsRef) => {
           const settings: any[] = []
 
           settingsRef.forEach((doc) => {
@@ -87,7 +86,8 @@ export function initSettings() {
             }
           })
           loadedSettings = true
-        })
+        }
+      )
     }
   })
 }

package.json

@@ -23,7 +23,7 @@
     "*.{css,scss,vue}": "stylelint"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.8",
+    "@apollo/client": "^3.4.10",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.27.0",
     "@nuxtjs/gtm": "^2.4.0",
@@ -36,7 +36,7 @@
     "acorn-walk": "^8.1.1",
     "core-js": "^3.16.2",
     "esprima": "^4.0.1",
-    "firebase": "^8.10.0",
+    "firebase": "^9.0.0",
     "graphql": "^15.5.0",
     "graphql-language-service-interface": "^2.8.4",
     "json-loader": "^0.5.7",