firebase · HYACCCINT · Sep 15, 2023 · Aug 30, 2023 · Sep 12, 2023 · Sep 13, 2023
diff --git a/nextjs-end/src/app/actions.js b/nextjs-end/src/app/actions.js
@@ -1,12 +1,17 @@
 "use server";
 
 import { addReviewToRestaurant } from "@/src/lib/firebase/firestore.js";
+import { getAuthenticatedAppForUser } from "@/src/lib/firebase/firebase";
+import { getFirestore } from "firebase/firestore";
 
 // This is a next.js server action, an alpha feature, so
 // use with caution
 // https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
 export async function handleReviewFormSubmission(data) {
-	await addReviewToRestaurant(data.get("restaurantId"), {
+	const { app } = await getAuthenticatedAppForUser();
+	const db = getFirestore(app);
+
+	await addReviewToRestaurant(db, data.get("restaurantId"), {
 		text: data.get("text"),
 		rating: data.get("rating"),
 

diff --git a/nextjs-end/src/app/layout.js b/nextjs-end/src/app/layout.js
@@ -18,7 +18,7 @@ export default async function RootLayout({ children }) {
     <html lang="en">
 
           <body>
-            <Header initialUser={currentUser.toJSON()}/>
+            <Header initialUser={currentUser?.toJSON()}/>
 
             <main>{children}</main>
           </body>

diff --git a/nextjs-end/src/components/Header.jsx b/nextjs-end/src/components/Header.jsx
@@ -1,16 +1,46 @@
 'use client'
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import {
 	signInWithGoogle,
 	signOut,
+	onAuthStateChanged
 } from "@/src/lib/firebase/auth.js";
 import { addFakeRestaurantsAndReviews } from "@/src/lib/firebase/firestore.js";
+import { useRouter } from "next/navigation";
 
+function useUserSession(initialUser) {
+	// The initialUser comes from the server via a server component
+	const [user, setUser] = useState(initialUser);
+	const router = useRouter()
+
+	useEffect(() => {
+		const unsubscribe = onAuthStateChanged((authUser) => {
+			setUser(authUser)
+		})
+
+		return () => unsubscribe()
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [])
+
+	useEffect(() => {
+		onAuthStateChanged((authUser) => {
+			if (user === undefined) return
+
+			// refresh when user changed to ease testing
+			if (user?.email !== authUser?.email) {
+				router.refresh()
+			}
+		})
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [user])
+
+	return user;
+}
 
 export default function Header({initialUser}) {
 
-	const user = initialUser ;
+	const user = useUserSession(initialUser) ;
 
 	const handleSignOut = event => {
 		event.preventDefault();

diff --git a/nextjs-end/src/lib/firebase/auth.js b/nextjs-end/src/lib/firebase/auth.js
@@ -1,12 +1,14 @@
 import {
   GoogleAuthProvider,
   signInWithPopup,
+  onAuthStateChanged as _onAuthStateChanged,
 } from "firebase/auth";
 
 import { auth } from "@/src/lib/firebase/firebase";
 
-
-
+export function onAuthStateChanged(cb) {
+	return _onAuthStateChanged(auth, cb);
+}
 
 export async function signInWithGoogle() {
   const provider = new GoogleAuthProvider();

diff --git a/nextjs-end/src/lib/firebase/firebase.js b/nextjs-end/src/lib/firebase/firebase.js
@@ -1,26 +1,3 @@
-// import firebaseConfig from "@/src/lib/firebase/config.js";
-// import { initializeApp } from "firebase/app";
-
-// import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
-
-// import { getAuth, connectAuthEmulator } from "firebase/auth";
-
-// import { getStorage, connectStorageEmulator } from "firebase/storage";
-
-// import { getApps } from "firebase/app";
-
-// let app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
-
-// export const db = getFirestore(app);
-// export const storage = getStorage(app);
-// export const auth = getAuth(app);
-
-// // For development purposes only
-// connectFirestoreEmulator(db, "127.0.0.1", 8080);
-// connectStorageEmulator(storage, "127.0.0.1", 9199);
-// connectAuthEmulator(auth, "http://127.0.0.1:9099", {
-// 	disableWarnings: true,
-// });
 
 import { initializeApp, getApps } from "firebase/app";
 import {
@@ -30,7 +7,6 @@ import {
 } from "firebase/auth";
 import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
 import { getStorage, connectStorageEmulator } from "firebase/storage";
-import dynamic from "next/dynamic";
 
 export const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,

diff --git a/nextjs-end/src/lib/firebase/firestore.js b/nextjs-end/src/lib/firebase/firestore.js
@@ -51,7 +51,7 @@ const updateWithRating = async (
 	});
 };
 
-export async function addReviewToRestaurant(restaurantId, review) {
+export async function addReviewToRestaurant(db, restaurantId, review) {
 	if (!restaurantId) {
 		throw new Error("No restaurant ID has been provided.");
 	}

diff --git a/nextjs-end/storage.rules b/nextjs-end/storage.rules
@@ -6,7 +6,8 @@ rules_version = '2';
 service firebase.storage {
   match /b/{bucket}/o {
     match /{allPaths=**} {
-      allow read, write: if false;
+      allow read;
+      allow write: if request.auth.uid != null;
     }
   }
 }