show user profile in header

Author: Mishra-coder

frontend/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-oauth/google": "^0.13.4",
     "framer-motion": "^12.38.0",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"

frontend/package.json

@@ -7,6 +7,7 @@ import { ALL_PRODUCTS } from './data/products'
 import { motion, AnimatePresence } from 'framer-motion'
 import { X, ShoppingBag, Heart, User, Trash2 } from 'lucide-react'
 import { GoogleLogin } from '@react-oauth/google'
+import { jwtDecode } from 'jwt-decode'
 
 function App() {
   const [selectedCategories, setSelectedCategories] = useState([]);
@@ -18,6 +19,7 @@ function App() {
   const [sortOption, setSortOption] = useState('recommended');
   const [activeNav, setActiveNav] = useState('MEN');
   const [sneakersView, setSneakersView] = useState(false);
+  const [loggedInUser, setLoggedInUser] = useState(null);
 
   const toggleFilter = (item, type) => {
     if (type === 'category') {
@@ -90,6 +92,8 @@ function App() {
         cartCount={cartItems.reduce((sum, i) => sum + i.qty, 0)}
         wishlistCount={wishlistItems.length}
         activeNav={activeNav}
+        loggedInUser={loggedInUser}
+        onLogout={() => setLoggedInUser(null)}
       />
 
       <main className="app-main">
@@ -159,14 +163,15 @@ function App() {
             wishlistItems={wishlistItems}
             onRemoveFromCart={removeFromCart}
             onToggleWishlist={toggleWishlist}
+            onLoginSuccess={setLoggedInUser}
           />
         )}
       </AnimatePresence>
     </div>
   )
 }
 
-const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, onToggleWishlist }) => {
+const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, onToggleWishlist, onLoginSuccess }) => {
   const [isSignUp, setIsSignUp] = useState(false);
   const isDrawer = type === 'cart' || type === 'wishlist';
   const cartTotal = cartItems.reduce((sum, i) => sum + i.price * i.qty, 0);
@@ -276,7 +281,8 @@ const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, on
               <div className="google-btn-wrap">
                 <GoogleLogin
                   onSuccess={(credentialResponse) => {
-                    console.log('Google login success', credentialResponse);
+                    const decoded = jwtDecode(credentialResponse.credential);
+                    onLoginSuccess(decoded);
                     onClose();
                   }}
                   onError={() => console.log('Google login failed')}

frontend/src/App.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Search, ShoppingCart, Heart, User, Menu, X } from 'lucide-react';
 
-const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav }) => {
+const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav, loggedInUser, onLogout }) => {
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
@@ -51,9 +51,17 @@ const Header = ({ onOpenOverlay, onNavigate, cartCount, wishlistCount, activeNav
           </div>
 
           <div className="user-actions">
-            <button className="action-btn" title="Profile" onClick={() => onOpenOverlay('login')}>
-              <User size={22} />
-            </button>
+            {loggedInUser ? (
+              <div className="user-profile-btn">
+                <img src={loggedInUser.picture} alt={loggedInUser.name} className="user-avatar" />
+                <span className="user-name">{loggedInUser.name.split(' ')[0]}</span>
+                <button className="logout-btn" onClick={onLogout}>Logout</button>
+              </div>
+            ) : (
+              <button className="action-btn" title="Profile" onClick={() => onOpenOverlay('login')}>
+                <User size={22} />
+              </button>
+            )}
             <button className="action-btn" title="Wishlist" onClick={() => onOpenOverlay('wishlist')}>
               <Heart size={22} />
               {wishlistCount > 0 && <span className="badge">{wishlistCount}</span>}

frontend/src/components/Header.jsx

@@ -1004,3 +1004,10 @@ ul {
 /* Google Login Button */
 .google-btn-wrap { display: flex; justify-content: center; width: 100%; margin-top: 4px; }
 .google-btn-wrap > div { width: 100% !important; }
+
+/* User Profile in Header */
+.user-profile-btn { display: flex; align-items: center; gap: 8px; }
+.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
+.user-name { font-size: 13px; font-weight: 600; }
+.logout-btn { font-size: 12px; background: none; border: 1px solid #ddd; border-radius: 6px; padding: 4px 10px; cursor: pointer; color: #666; }
+.logout-btn:hover { border-color: #e85d04; color: #e85d04; }