refactor firebase providers concealing firebaseConfig in .env

frontend/src/app/admin/firebase/firebase.ts

@@ -1,5 +1,6 @@
 import { FirebaseApp, FirebaseOptions, initializeApp } from "firebase/app";
 import { Auth, getAuth, signInWithEmailAndPassword, signOut } from "firebase/auth";
+import { FirebaseStorage, getStorage } from "firebase/storage";
 
 import env from "../util/validateEnv";
 
@@ -16,8 +17,9 @@ export const initFirebase = () => {
 
   const app: FirebaseApp = initializeApp(firebaseConfig);
   const auth: Auth = getAuth(app);
+  const storage: FirebaseStorage = getStorage(app);
 
-  return auth;
+  return { app, auth, storage };
 };
 
 /**
@@ -47,3 +49,14 @@ export const firebaseSignOut = async (auth: Auth) => {
     alert(error);
   }
 };
+
+/**
+ * Get's the firebase config for use with reactfire components
+ *
+ */
+export const getFirebaseConfig = (): FirebaseOptions => {
+  if (!env.NEXT_PUBLIC_FIREBASE_SETTINGS) {
+    throw new Error("Cannot get firebase settings");
+  }
+  return env.NEXT_PUBLIC_FIREBASE_SETTINGS as FirebaseOptions;
+};

frontend/src/app/admin/firebase/firebaseProvider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Auth } from "firebase/auth";
+import React, { createContext, useContext, useMemo } from "react";
+
+import { getFirebaseConfig, initFirebase } from "./firebase";
+import FirebaseProviderSDKs from "./reactfireProvider";
+
+const FirebaseContext = createContext<Auth | null>(null);
+
+/**
+ * Firebase Context Provider giving access to Auth object in components
+ */
+export const FirebaseProvider = ({ children }: { children: React.ReactNode }) => {
+  const { auth, storage } = useMemo(() => initFirebase(), []);
+
+  return (
+    <FirebaseContext.Provider value={auth}>
+      <FirebaseProviderSDKs storage={storage} firebaseConfig={getFirebaseConfig()}>
+        {children}
+      </FirebaseProviderSDKs>
+    </FirebaseContext.Provider>
+  );
+};
+
+export const useFirebase = () => useContext(FirebaseContext);

frontend/src/app/admin/firebase/reactfireProvider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { FirebaseOptions } from "firebase/app";
+import { FirebaseStorage } from "firebase/storage";
+import { FC, ReactNode } from "react";
+import { FirebaseAppProvider, StorageProvider } from "reactfire";
+
+type FirebaseProviderSDKsProps = {
+  storage: FirebaseStorage;
+  firebaseConfig: FirebaseOptions;
+  children: ReactNode;
+};
+
+const FirebaseProviderSDKs: FC<FirebaseProviderSDKsProps> = ({
+  storage,
+  firebaseConfig,
+  children,
+}: FirebaseProviderSDKsProps) => {
+  return (
+    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
+      <StorageProvider sdk={storage}>{children}</StorageProvider>
+    </FirebaseAppProvider>
+  );
+};
+
+export default FirebaseProviderSDKs;

frontend/src/app/admin/util/hooks.ts

@@ -1,7 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
-import { useFirebase } from "../firebase/firebaseContext";
+import { useFirebase } from "../firebase/firebaseProvider";
 
 /**
  * Hook that returns the state of login for the user

frontend/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import { Inter, Open_Sans, Roboto_Slab } from "next/font/google";
 
-import { FirebaseProvider } from "./admin/firebase/firebaseContext";
+import { FirebaseProvider } from "./admin/firebase/firebaseProvider";
 
 import type { Metadata } from "next";
 

frontend/src/components/UserIcon.tsx

@@ -10,7 +10,7 @@ import { useRouter } from "next/navigation";
 import * as React from "react";
 
 import { firebaseSignOut } from "@/app/admin/firebase/firebase";
-import { useFirebase } from "@/app/admin/firebase/firebaseContext";
+import { useFirebase } from "@/app/admin/firebase/firebaseProvider";
 
 export default function UserIcon() {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

frontend/src/components/admin/ForgotPassword.tsx

@@ -3,7 +3,7 @@
 import { sendPasswordResetEmail } from "firebase/auth";
 import React, { Dispatch, SetStateAction, useState } from "react";
 
-import { useFirebase } from "@/app/admin/firebase/firebaseContext";
+import { useFirebase } from "@/app/admin/firebase/firebaseProvider";
 
 type ForgotPasswordProps = {
   setForgotPass: Dispatch<SetStateAction<boolean>>;

frontend/src/components/admin/LoginForm.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import React, { Dispatch, SetStateAction, useState } from "react";
 
 import { firebaseSignIn } from "@/app/admin/firebase/firebase";
-import { useFirebase } from "@/app/admin/firebase/firebaseContext";
+import { useFirebase } from "@/app/admin/firebase/firebaseProvider";
 
 import styles from "./LoginForm.module.css";