changes

pages/_app.js

@@ -1,14 +1,39 @@
 import '../styles/globals.css'
 import Navbar from '../components/Navbar';
 import { Toaster } from 'react-hot-toast';
+import { UserContext } from '../lib/context';
+import { auth, firestore } from '../lib/firebase';
+
+import { useEffect, useState } from 'react';
+import { useAuthState } from 'react-firebase-hooks/auth';
 
 function MyApp({ Component, pageProps }) {
+  const [user] = useAuthState(auth);
+  const [username, setUsername] = useState(null);
+
+  useEffect(() => {
+    //turn off realtime subscription
+    let unsubscribe;
+
+    if (user) {
+      const ref = firestore.collection('users').doc(user.uid);
+      unsubscribe = ref.onSnapshot((doc) => {
+        setUsername(doc.data()?.username);
+      });
+    } else {
+      setUsername(null);
+    }
+
+    return unsubscribe;
+  }, [user]);
+
+
   return (
-    <>
+    <UserContext.Provider value={{ user, username}}>
       <Navbar />
       <Component {...pageProps} />
       <Toaster />
-    </>
+    </UserContext.Provider>
   );
 }
 

pages/enter.js

@@ -1,9 +1,10 @@
 import { auth, googleAuthProvider } from '../lib/firebase';
+import { useContext } from 'react';
+import { UserContext } from '../lib/context';
 
 
 export default function EnterPage({ }) {
-    const user = null
-    const username = null;
+    const { user, username } = useContext(UserContext);
 
     // 1. user signed out <SignInButton />
     // 2. user signed in, but missing username <UsernameForm />