Complete migration to firebase 9

Author: georgyo

src/components/NavBar.svelte

@@ -9,13 +9,14 @@
     NavLink
   } from 'sveltestrap/src';
   import authStore from '../stores/authStore';
-  import firebase from 'firebase/compat/app';
+
+  import { getAuth, signOut } from 'firebase/auth';
 
   let isOpen = false;
 
   // handles the logout of
   async function logout() {
-    await firebase.auth().signOut();
+    signOut(getAuth());
   }
 </script>
 

src/db.ts

@@ -1,5 +1,9 @@
-import firebase from 'firebase/app';
-import { firestore } from './firestore';
+import db from '$lib/firebase/store';
+import firebaseApp from '$lib/firebase/app';
+import { getStorage, ref, getDownloadURL, uploadBytes } from 'firebase/storage';
+import { collection, serverTimestamp, addDoc, updateDoc } from 'firebase/firestore';
+
+import type { Timestamp, FieldValue } from 'firebase/firestore';
 
 export type Ingredient = {
   name: string;
@@ -11,8 +15,8 @@ export type Recipe = {
   title: string;
   description: string;
   userId: string;
-  createdAt: firebase.firestore.Timestamp | firebase.firestore.FieldValue;
-  updatedAt: firebase.firestore.Timestamp | firebase.firestore.FieldValue;
+  createdAt: Timestamp | FieldValue;
+  updatedAt: Timestamp | FieldValue;
   ingredients: Ingredient[];
 };
 
@@ -29,27 +33,26 @@ export const createRecipe = async (recipeForm: RecipeForm, userId: string) => {
     description: recipeForm.description,
     ingredients: recipeForm.ingredients,
     userId,
-    createdAt: firebase.firestore.FieldValue.serverTimestamp(),
-    updatedAt: firebase.firestore.FieldValue.serverTimestamp()
+    createdAt: serverTimestamp(),
+    updatedAt: serverTimestamp()
   };
-  const db = await firestore();
-  const recipeRef = await db.collection('recipes').add(recipe);
+  const recipeRef = await addDoc(collection(db, 'recipes'), recipe);
   const path = await uploadFile(recipeRef.id, userId, recipeForm.mainPicture);
   const url = await getUrl(path);
-  recipeRef.update('picture', url);
+  await updateDoc(recipeRef, { picture: url });
 
   return recipeRef;
 };
 
 const uploadFile = async (recipeId: string, userId: string, pic: File) => {
   const mainPicturePath = `/${userId}/${recipeId}.${pic.name.split('.').pop()}`;
-  const storage = firebase.storage();
-  const ref = storage.ref(mainPicturePath);
-  await ref.put(pic);
+  const storage = getStorage(firebaseApp);
+  const picref = ref(storage, mainPicturePath);
+  await uploadBytes(picref, pic);
   return mainPicturePath;
 };
 
 export const getUrl = async (path: string) => {
-  const storage = firebase.storage();
-  return await storage.ref(path).getDownloadURL();
+  const storage = getStorage(firebaseApp);
+  return await getDownloadURL(ref(storage, path));
 };

src/firestore.ts

@@ -0,0 +1,5 @@
+import { initializeApp } from 'firebase/app';
+import firebaseConfig from '$lib/firebase/config';
+
+const fb = initializeApp(firebaseConfig);
+export default fb;

src/initFirebase.ts

@@ -0,0 +1,6 @@
+import { getAuth } from 'firebase/auth';
+import firebaseApp from '$lib/firebase/app';
+
+const auth = getAuth(firebaseApp);
+
+export default auth;

src/lib/firebase/app.ts

@@ -0,0 +1,6 @@
+import firebaseApp from '$lib/firebase/app';
+import { getFirestore } from 'firebase/firestore';
+
+const db = getFirestore(firebaseApp);
+
+export default db;

src/lib/firebase/auth.ts

@@ -1,16 +1,14 @@
-<script context="module" lang="ts">
-</script>
-
 <script lang="ts">
   import { Container } from 'sveltestrap';
-  import firebase from 'firebase/compat/app';
-  import 'firebase/compat/auth';
   import { onMount } from 'svelte';
   import authStore from '../stores/authStore';
   import NavBar from '../components/NavBar.svelte';
+  import { onAuthStateChanged } from 'firebase/auth';
+
+  import auth from '$lib/firebase/auth';
 
   onMount(() => {
-    firebase.auth().onAuthStateChanged((user) => {
+    onAuthStateChanged(auth, (user) => {
       authStore.set({
         isLoggedIn: user !== null,
         user,

src/env.ts renamed to src/lib/firebase/config.ts

@@ -1,7 +1,8 @@
-import { initFirebase } from '../initFirebase';
+import firebaseApp from '$lib/firebase/app';
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async () => {
-  initFirebase();
-  return {};
+  return {
+    app: firebaseApp
+  };
 };