adding a display name on auth user

src/components/Hero.jsx

@@ -13,6 +13,20 @@ function Hero() {
         cursor.style.top = `${e.clientY}px`;
       }
     };
+    async function fetchUser() {
+      const res = await fetch("http://localhost:3000/api/current_user", {
+        credentials: "include", // very important
+      });
+      if (res.ok) {
+        const user = await res.json();
+        console.log("User display name:", user.displayName);
+
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+    }
+    fetchUser();
 
     window.addEventListener("mousemove", handleMouseMove);
 

src/pages/HomePage.jsx

@@ -1,23 +1,33 @@
 // Page - Home
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 const PageHome = () => {
-
   useEffect(() => {
-        document.title = 'Home';
+    document.title = "Home";
   }, []);
+  const [user, setUser] = useState(null);
+
+  //   useEffect(() => {
+  //     if (user) {
+  //       console.log(`Welcome, ${user.displayName || "Guest"}!`);
+  //     }
+  //   }, [user]);
 
   return (
     <div className="homepage-container">
       <main>
         <section>
           <h2>Home Page</h2>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit porro, dolorem, quod facere enim voluptate provident quo labore vero repellat nemo animi ad exercitationem rem quos, possimus libero deleniti laudantium?</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit
+            porro, dolorem, quod facere enim voluptate provident quo labore vero
+            repellat nemo animi ad exercitationem rem quos, possimus libero
+            deleniti laudantium?
+          </p>
         </section>
       </main>
     </div>
   );
-
 };
 
 export default PageHome;