fix bug where PrivatePage would try to check auth state before auth loaded

Author: jackavh

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

@@ -2,28 +2,23 @@
 
 import { Auth } from "firebase/auth";
 import { FirebaseStorage } from "firebase/storage";
-import React, { FC, ReactNode, createContext, useContext, useEffect, useState } from "react";
+import React, { FC, ReactNode, createContext, useContext } from "react";
 
 import { FirebaseServices, initFirebase } from "./firebase";
 
 const AuthContext = createContext<Auth | undefined>(undefined);
 const StorageContext = createContext<FirebaseStorage | undefined>(undefined);
 
-export const FirebaseProvider: FC<{ children: ReactNode }> = ({ children }) => {
-  const [firebaseServices, setFirebaseServices] = useState<FirebaseServices | undefined>(undefined);
+let firebaseServices: FirebaseServices | undefined;
 
-  useEffect(() => {
-    // Don't initialize Firebase if it has already been initialized
-    if (firebaseServices === undefined) {
-      setFirebaseServices(initFirebase());
-    }
-  }, []);
+export const FirebaseProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  if (firebaseServices === undefined) {
+    firebaseServices = initFirebase();
+  }
 
   return (
-    <AuthContext.Provider value={firebaseServices?.auth}>
-      <StorageContext.Provider value={firebaseServices?.storage}>
-        {children}
-      </StorageContext.Provider>
+    <AuthContext.Provider value={firebaseServices.auth}>
+      <StorageContext.Provider value={firebaseServices.storage}>{children}</StorageContext.Provider>
     </AuthContext.Provider>
   );
 };

frontend/src/app/admin/layout.tsx

@@ -15,11 +15,17 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
 
   return (
     <FirebaseProvider>
-      <section>
-        {!isLoginPage && <NavigationBar />}
-        {!isLoginPage && <HeaderBarSpace />}
-        {!isLoginPage ? <PrivatePage>{children}</PrivatePage> : children}
-      </section>
+      {!isLoginPage ? (
+        <PrivatePage>
+          <section>
+            <NavigationBar />
+            <HeaderBarSpace />
+            {children}
+          </section>
+        </PrivatePage>
+      ) : (
+        children
+      )}
     </FirebaseProvider>
   );
 }

frontend/src/components/admin/PrivatePage.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { getAuth } from "firebase/auth";
-import { useRouter } from "next/navigation";
+import { redirect } from "next/navigation";
 import { FC, ReactNode } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 
 import LoadingSpinner from "./LoadingSpinner";
 
 const PrivatePage: FC<{ children: ReactNode }> = ({ children }) => {
-  const router = useRouter();
   const auth = getAuth();
 
   const [user, loading, error] = useAuthState(auth);
@@ -21,7 +20,7 @@ const PrivatePage: FC<{ children: ReactNode }> = ({ children }) => {
   // firebase threw AuthError, non-critical
   if (error) {
     console.log(error);
-    router.push("/admin");
+    redirect("/admin");
     return <LoadingSpinner />;
   }
 
@@ -31,7 +30,7 @@ const PrivatePage: FC<{ children: ReactNode }> = ({ children }) => {
   }
 
   // otherwise go to login
-  router.push("/admin");
+  redirect("/admin");
   return <LoadingSpinner />;
 };