firebase v9.0+

upgrade the firebase version to 9

Author: Nuwan Chandrasoma

package-lock.json

@@ -6,9 +6,9 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "firebase": "^8.6.5",
-    "vue": "^3.0.5",
-    "vue-router": "^4.0.8"
+    "firebase": "^9.9.2",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.3",

package.json

@@ -6,7 +6,7 @@
         <router-link to="/feed"> Feed </router-link> |
       </span>
       <span v-if="isLoggedIn"> 
-        <button @click="signOut"> Logout </button> 
+        <button @click="handleSignOut"> Logout </button> 
       </span>
       <span v-else>
         <router-link to="/register"> Register </router-link> |
@@ -20,24 +20,24 @@
 
 <script setup>
 import { ref, watchEffect } from 'vue' // used for conditional rendering
-import firebase from 'firebase'
+import { getAuth,onAuthStateChanged, signOut } from 'firebase/auth'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
 const isLoggedIn = ref(true)
 
 // runs after firebase is initialized
-firebase.auth().onAuthStateChanged(function(user) {
+onAuthStateChanged(getAuth(),function(user) {
     if (user) {
       isLoggedIn.value = true // if we have a user
     } else {
       isLoggedIn.value = false // if we do not
     }
 })
 
-const signOut = () => {
-  firebase.auth().signOut()
+const handleSignOut = () => {
+  signOut(getAuth())
   router.push('/')
 }
 </script>

src/App.vue

@@ -1,20 +1,25 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import firebase from 'firebase'
+import { initializeApp } from 'firebase/app'
+import { getAuth,connectAuthEmulator } from 'firebase/auth';
 
 /* code from our Firebase console */
-var firebaseConfig = {
-    apiKey: "YOUR_API_KEY",
-    authDomain: "YOUR_AUTH_DOMAIN",
-    projectId: "YOUR_PROJECT_ID",
-    storageBucket: "YOUR_STORAGE_BUCKET",
-    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
-    appId: "YOUR_APP_ID"
-  }
+const firebaseConfig = {
+  apiKey: "YOUR_API_KEY",
+  authDomain: "YOUR_AUTH_DOMAIN",
+  projectId: "YOUR_PROJECT_ID",
+  storageBucket: "YOUR_STORAGE_BUCKET",
+  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+  appId: "YOUR_APP_ID"
+};
 
 // Initialize Firebase
-firebase.initializeApp(firebaseConfig)
+initializeApp(firebaseConfig)
+
+if (location.hostname === "localhost") {
+  connectAuthEmulator(getAuth(), "http://localhost:9099");
+}
 
 const app = createApp(App)
 

src/main.js

@@ -4,12 +4,12 @@
 </template>
 
 <script setup>
-import firebase from 'firebase'
+import { getAuth,onAuthStateChanged } from 'firebase/auth'
 import { useRouter } from 'vue-router'
 import { onBeforeUnmount } from 'vue'
 
 const router = useRouter()
-const authListener = firebase.auth().onAuthStateChanged(function(user) {
+const authListener = onAuthStateChanged(getAuth(),function(user) {
     if (!user) { // not logged in
         alert('you must be logged in to view this. redirecting to the home page')
         router.push('/')

src/views/Feed.vue

@@ -7,17 +7,15 @@
 
 <script setup>
 import { ref } from 'vue'
-import firebase from 'firebase'
+import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'
 import { useRouter } from 'vue-router' // import router
 
 const email = ref('')
 const password = ref('')
 
 const router = useRouter() // get a reference to our vue router
 const register = () => {
-  firebase
-    .auth() // get the auth api
-    .createUserWithEmailAndPassword(email.value, password.value) // need .value because ref()
+    createUserWithEmailAndPassword(getAuth(),email.value, password.value) // need .value because ref()
     .then((data) => {
       console.log('Successfully registered!');
       router.push('/feed') // redirect to the feed

src/views/Register.vue

@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import firebase from 'firebase'
+import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'
 import { useRouter } from 'vue-router' // import router
 
 const email = ref('')
@@ -18,9 +18,7 @@ const errMsg = ref() // ERROR MESSAGE
 const router = useRouter() // get a reference to our vue router
 
 const signIn = () => { // we also renamed this method 
-  firebase
-    .auth()
-    .signInWithEmailAndPassword(email.value, password.value) // THIS LINE CHANGED
+  signInWithEmailAndPassword(getAuth(),email.value, password.value) // THIS LINE CHANGED
     .then((data) => {
       console.log('Successfully logged in!');
       router.push('/feed') // redirect to the feed