firebase upgrade to version 9.*.*

components/AuthContext.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import firebase from '../lib/client'
+import { getApps} from "firebase/app";
+import { getAuth,onAuthStateChanged} from 'firebase/auth';
 // IDEA: just read from firebase store at request time?
 import { client } from '../lib/api'
 
@@ -13,9 +14,12 @@ function AuthContext(props) {
   const [user, setState] = React.useState(null)
 
   React.useEffect(() => {
-    if (firebase) {
-      firebase.auth().onAuthStateChanged(newUser => setState(newUser))
+
+    if(getApps().length > 0)
+    {
+    onAuthStateChanged(getAuth() , newUser => setState(newUser))
     }
+
   }, [])
 
   React.useEffect(() => {

components/LoginButton.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
-import firebase, { logout, loginGitHub } from '../lib/client'
+import { getApps } from 'firebase/app'
+import { logout, loginGitHub } from '../lib/client'
 
 import Button from './Button'
 import Popout, { managePopout } from './Popout'
@@ -48,7 +49,7 @@ function Drawer(props) {
 function LoginButton({ isVisible, toggleVisibility }) {
   const user = useAuth()
 
-  if (!firebase) {
+  if (getApps().length === 0) {
     return null
   }
 

lib/api.js

@@ -3,8 +3,8 @@ import debounce from 'lodash.debounce'
 import ms from 'ms'
 
 import { fileToDataURL } from './util'
-import firebase from './client'
 import { DEFAULT_CODE } from './constants'
+import { getAuth } from 'firebase/auth'
 
 export const client = axios.create({
   baseURL: `${process.env.NEXT_PUBLIC_API_URL || ''}/api`,
@@ -104,8 +104,8 @@ function getSnippet(uid = '', { host, filename } = {}) {
 
 function listSnippets(page) {
   // IDEA: move into axios interceptor
-  return firebase
-    .auth()
+
+  return getAuth()
     .currentUser.getIdToken()
     .then(authorization =>
       client

lib/client.js

@@ -1,38 +1,48 @@
-import firebase from 'firebase/app'
-import 'firebase/auth'
-
-if (firebase.apps.length === 0) {
-  if (process.env.NEXT_PUBLIC_FIREBASE_API_KEY && process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID) {
-    firebase.initializeApp({
-      apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-      authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`,
-      databaseURL: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseio.com`,
-      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-      storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`,
-      messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-      appId: process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID,
-    })
-  }
+import { getApps, initializeApp } from "firebase/app";
+import { getAuth, signOut , setPersistence , browserLocalPersistence , signInWithPopup , GithubAuthProvider , onAuthStateChanged} from 'firebase/auth';
+
+
+const firebaseConfig = {
+        apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+        authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`,
+        databaseURL: `https://${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseio.com`,
+        projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+        storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`,
+        messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+        appId: process.env.NEXT_PUBLIC_FIREBASE_FE_APP_ID,
+      };
+
+let FirebaseApp , auth
+
+if(getApps().length === 0 )
+{
+if(typeof process.env.NEXT_PUBLIC_FIREBASE_API_KEY !== "undefined" && typeof process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID !== "undefined" )
+{
+FirebaseApp = initializeApp(firebaseConfig)
+auth = getAuth(FirebaseApp)
+}
 }
 
 export function logout() {
-  return firebase.auth().signOut().catch(console.error)
+  return signOut(auth).then(() => {
+      // Sign out successful
+  }).catch((error) => {
+      console.log(error)
+  });
 }
 
 export function login(provider) {
-  return firebase
-    .auth()
-    .setPersistence(firebase.auth.Auth.Persistence.LOCAL)
-    .then(() => firebase.auth().signInWithPopup(provider))
+  return setPersistence(auth, browserLocalPersistence)
+    .then(() => signInWithPopup(auth, provider))
     .catch(console.error)
 }
 
 export function loginGitHub() {
-  const provider = new firebase.auth.GithubAuthProvider()
+  const provider = new GithubAuthProvider()
   provider.setCustomParameters({
     allow_signup: 'true',
   })
   return login(provider)
 }
 
-export default firebase.apps.length ? firebase : null
+export default FirebaseApp 

package.json

@@ -44,7 +44,7 @@
     "eitherx": "^1.0.3",
     "email-validator": "^2.0.4",
     "escape-goat": "^4.0.0",
-    "firebase": "^8.9.1",
+    "firebase": "9.9.3",
     "graphql": "^16.5.0",
     "highlight.js": "^10.7.2",
     "lodash.debounce": "^4.0.8",