fix: header when disabling javascript

firebase · Sep 13, 2023 · e7648b5 · e7648b5
1 parent fbaf3a8
commit e7648b5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
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();