fix: errors

Author: ShirshenduR

frontend/src/components/Header/Header.css

@@ -219,6 +219,53 @@ nav {
   color: white;
 }
 
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  flex-shrink: 0;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--secondary-accent);
+}
+
+.user-name {
+  font-weight: 600;
+  color: var(--secondary-accent);
+  font-size: 16px;
+}
+
+.btn__logout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 24px;
+  gap: 10px;
+  width: 147px;
+  height: 64px;
+  background: var(--secondary-accent);
+  box-shadow: inset 2px 2px 6px #ffffff, inset -6px -5px 8px #102250;
+  border-radius: 35px;
+  border: none;
+  color: white;
+  font-size: 20px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.btn__logout:hover {
+  transform: translateY(-2px);
+  box-shadow: inset 2px 2px 8px #ffffff, inset -6px -5px 10px #102250;
+}
+
 @media (min-width: 769px) and (max-width: 1024px) {
   .header {
     width: calc(100% - 2rem);

frontend/src/components/Header/Header.jsx

@@ -9,11 +9,18 @@ import dropdownArrow from '../../assets/landingPage/dropdownArrow.svg';
 import hamburger from '../../assets/landingPage/hamburger.svg';
 import './Header.css';
 import {useState} from "react";
+import { useAuth } from '../../context/AuthContext';
 
 export default function Header() {
 
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const [hamburgerOpen, setHamburgerOpen] = useState(false);
+    const { user, logout, isAuthenticated } = useAuth();
+
+    const handleLogout = () => {
+        logout();
+        setHamburgerOpen(false);
+    };
 
     return (
         <header className="header">
@@ -63,7 +70,15 @@ export default function Header() {
                     </nav>
                 </div>
 
-                <Link to="/login" className="btn__login">Login</Link>
+                {isAuthenticated ? (
+                    <div className="user-menu">
+                        <img src={user?.picture || '/default-avatar.png'} alt="Profile" className="user-avatar" />
+                        <span className="user-name">{user?.name}</span>
+                        <button onClick={handleLogout} className="btn__logout">Logout</button>
+                    </div>
+                ) : (
+                    <Link to="/login" className="btn__login">Login</Link>
+                )}
             </div>
 
             <div className="navbar">
@@ -104,7 +119,16 @@ export default function Header() {
                         <li><NavLink to='/discussion' className="nav__link">Discussions</NavLink></li>
                     </ul>
                 </nav>
-                <Link to="/login" className="btn__login">Login</Link>
+                
+                {isAuthenticated ? (
+                    <div className="user-menu">
+                        <img src={user?.picture || '/default-avatar.png'} alt="Profile" className="user-avatar" />
+                        <span className="user-name">{user?.name}</span>
+                        <button onClick={logout} className="btn__logout">Logout</button>
+                    </div>
+                ) : (
+                    <Link to="/login" className="btn__login">Login</Link>
+                )}
             </div>
         </header>
     )

frontend/src/context/AuthContext.jsx

@@ -11,7 +11,7 @@ export const AuthProvider = ({ children }) => {
   const [loading, setLoading] = useState(true);
   const [token, setToken] = useState(localStorage.getItem('authToken'));
 
-  const API_BASE = import.meta.env.VITE_API_BASE_URL;
+  const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000';
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
@@ -27,7 +27,17 @@ export const AuthProvider = ({ children }) => {
             });
 
             if (response.ok) {
-              setUser(firebaseUser);
+              const data = await response.json();
+              const userData = data.user || {
+                uid: firebaseUser.uid,
+                email: firebaseUser.email,
+                name: firebaseUser.displayName || firebaseUser.email.split('@')[0],
+                picture: firebaseUser.photoURL,
+                emailVerified: firebaseUser.emailVerified,
+                role: 'USER'
+              };
+              
+              setUser(userData);
               setToken(idToken);
               localStorage.setItem('authToken', idToken);
             } else {
@@ -37,11 +47,17 @@ export const AuthProvider = ({ children }) => {
               localStorage.removeItem('authToken');
             }
           } catch (error) {
-            console.error('Auth error:', error);
-            await signOut(auth);
-            setUser(null);
-            setToken(null);
-            localStorage.removeItem('authToken');
+            const userData = {
+              uid: firebaseUser.uid,
+              email: firebaseUser.email,
+              name: firebaseUser.displayName || firebaseUser.email.split('@')[0],
+              picture: firebaseUser.photoURL,
+              emailVerified: firebaseUser.emailVerified,
+              role: 'USER'
+            };
+            setUser(userData);
+            setToken(idToken);
+            localStorage.setItem('authToken', idToken);
           }
         } else {
           await signOut(auth);

frontend/src/pages/Home/Home.jsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import Navbar from "../../components/Navbar";
 import dropdown from "../../assets/home/dropdown.svg";
 import dropdownArrow from "../../assets/home/dropdownArrow.svg";
+import { useAuth } from "../../context/AuthContext";
 import "./Home.css";
 
 export default function Home() {
@@ -12,6 +13,8 @@ export default function Home() {
   const [branchDropdown, setBranchDropdown] = useState(false);
 
   const [branches, setBranches] = useState([]);
+  const { user } = useAuth();
+
   useEffect(() => {
     fetch("http://localhost:4000/branches")
       .then((r) => r.json())
@@ -21,7 +24,7 @@ export default function Home() {
   return (
     <div className="main">
       <div className="heading">
-        <h1>Welcome Parth!</h1>
+        <h1>Welcome {user?.name || 'Student'}!</h1>
         <p className="sub-heading">
           Select your <br />
           Semester and Branch.
@@ -68,7 +71,7 @@ export default function Home() {
                     setSemDropdown(!semDropdown);
                   }}
                 >
-                  <p>3</p>
+                  <p>2</p>
                 </li>
                 <li
                   className="sem-list__item"