changes

components/Navbar.js

@@ -1,8 +1,10 @@
 import Link from 'next/link';
+import { useContext } from 'react';
+import { UserContext } from '../lib/context';
 
 export default function Navbar() {
-    const user = null;
+    
-    const username = null;
+  const { user, username } = useContext(UserContext);
 
   return (
     <nav className="navbar">

lib/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const UserContext = createContext({user: null, username: null});

lib/firebase.js

@@ -1,7 +1,7 @@
-import firebase from 'firebase/compat/app'
+import * as firebase from "firebase/app";
-import 'firebase/compat/auth';
+import 'firebase/auth';
-import 'firebase/compat/firestore';
+import 'firebase/firestore';
-import 'firebase/compat/storage';
+import 'firebase/storage';
 
 
 const firebaseConfig = {

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "firebase": "^8.10.1",
     "firebase-hooks": "^0.0.1",
     "firebase-react-hooks": "^0.8.0",
     "next": "12.1.6",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "react-firebase-hooks": "^5.0.3",
     "react-hot-toast": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",
     "eslint": "8.14.0",
-    "eslint-config-next": "12.1.6"
+    "eslint-config-next": "12.1.6",
+    "firebase": "^8.2.1"
   }
 }

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 { user, username } = useContext(UserContext);
-    const username = null;
 
     // 1. user signed out <SignInButton />
     // 2. user signed in, but missing username <UsernameForm />