feat: update firebase in with-firebase

examples/with-firebase/context/userContext.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, createContext, useContext } from 'react'
-import firebase from '../firebase/clientApp'
+import { createFirebaseApp } from '../firebase/clientApp'
+import { getAuth, onAuthStateChanged } from 'firebase/auth'
 
 export const UserContext = createContext()
 
@@ -9,7 +10,9 @@ export default function UserContextComp({ children }) {
 
   useEffect(() => {
     // Listen authenticated user
-    const unsubscriber = firebase.auth().onAuthStateChanged(async (user) => {
+    const app = createFirebaseApp()
+    const auth = getAuth(app)
+    const unsubscriber = onAuthStateChanged(auth, async (user) => {
       try {
         if (user) {
           // User is signed in.

examples/with-firebase/firebase/clientApp.js

@@ -1,30 +1,26 @@
-import firebase from 'firebase/app'
-import 'firebase/auth' // If you need it
-import 'firebase/firestore' // If you need it
-import 'firebase/storage' // If you need it
-import 'firebase/analytics' // If you need it
-import 'firebase/performance' // If you need it
-
-const clientCredentials = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-}
+import { initializeApp, getApps } from 'firebase/app'
+import { getAnalytics } from 'firebase/analytics'
+export const createFirebaseApp = () => {
+  const clientCredentials = {
+    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
+    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+  }
 
-if (!firebase.apps.length) {
-  firebase.initializeApp(clientCredentials)
-  // Check that `window` is in scope for the analytics module!
-  if (typeof window !== 'undefined') {
-    // Enable analytics. https://firebase.google.com/docs/analytics/get-started
-    if ('measurementId' in clientCredentials) {
-      firebase.analytics()
-      firebase.performance()
+  if (getApps().length <= 0) {
+    const app = initializeApp(clientCredentials)
+    // Check that `window` is in scope for the analytics module!
+    if (typeof window !== 'undefined') {
+      // Enable analytics. https://firebase.google.com/docs/analytics/get-started
+      if ('measurementId' in clientCredentials) {
+        getAnalytics()
+      }
     }
+    return app
   }
 }
-
-export default firebase

examples/with-firebase/package.json

@@ -6,8 +6,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "firebase": "7.17.0",
-    "firebase-admin": "9.0.0",
+    "firebase": "9.1.1",
+    "firebase-admin": "9.12.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

examples/with-firebase/pages/index.js

@@ -1,8 +1,8 @@
+import { getFirestore, setDoc, doc } from 'firebase/firestore'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useEffect } from 'react'
 import { useUser } from '../context/userContext'
-import firebase from '../firebase/clientApp'
 
 export default function Home() {
   // Our custom hook to get context values
@@ -16,12 +16,14 @@ export default function Home() {
       console.log(user)
     }
     // You also have your firebase app initialized
-    console.log(firebase)
   }, [loadingUser, user])
 
   const createUser = async () => {
-    const db = firebase.firestore()
-    await db.collection('profile').doc(profile.username).set(profile)
+    const db = getFirestore()
+    await setDoc(doc(db, 'profile', profile.username), {
+      profile,
+    })
+
     alert('User created!!')
   }