Skip to content

Added authentication requirement for cart and wishlist functionality #2631

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added authentication requirement for cart and wishlist functionality #2631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
709c020
Fix typo: change 'accpet' to 'accept' in README.md
Aug 27, 2025
0850856
Add authentication requirement for cart and wishlist functionality
Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ Technologies Used :
- [Check it out here :eyes:](https://www.figma.com/design/sttuMcIvVuk7AORRMS70s5/VigyBag-Redesign?node-id=0-1&t=hA6fe3u7c9kflZzx-0)


We accpet contributions to our project pertaining to the [Code of Conduct](https://github.com/codervivek5/VigyBag?tab=coc-ov-file) and [Contributing Guidelines](https://github.com/codervivek5/VigyBag/blob/main/CONTRIBUTING.md) stated below.
We accept contributions to our project pertaining to the [Code of Conduct](https://github.com/codervivek5/VigyBag?tab=coc-ov-file) and [Contributing Guidelines](https://github.com/codervivek5/VigyBag/blob/main/CONTRIBUTING.md) stated below.


## :handshake: Contributing <a name="contributing"></a>
Expand Down
22 changes: 22 additions & 0 deletions src/User/components/Popular_Categories/ProductGrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import { FaHeart, FaRegHeart } from "react-icons/fa";
import PaymentPage from "../../pages/Payment/Payment";
import { useAuth } from "../../../context/AuthContext";

// ProductGrid component to display a grid of products
function ProductGrid({ products, headingText }) {
Expand Down Expand Up @@ -35,6 +36,7 @@ function ProductGrid({ products, headingText }) {
function ProductCard({ product }) {
const navigate = useNavigate();
const dispatch = useDispatch();
const { isLoggedIn } = useAuth();
const cartItems = useSelector((state) => state.cart.items);
const wishlistItems = useSelector((state) => state.wishlist.items);

Expand All @@ -43,11 +45,21 @@ function ProductCard({ product }) {
};

const handleBuyNow = () => {
if (!isLoggedIn) {
toast.error("Please login to buy products!");
navigate("/auth");
return;
}
navigate(`/checkout`);
};

// Function to add product to cart
const onAddToCart = (product) => {
if (!isLoggedIn) {
toast.error("Please login to add items to cart!");
navigate("/auth");
return;
}
const quantity = 1;
dispatch(manageCartItem({ product, quantity }));
toast.success("Successfully added to cart!");
Expand All @@ -66,6 +78,11 @@ function ProductCard({ product }) {
<button
className="mt-2 md:ml-48 ml-80 text-red-600 absolute top-0 right-2 p-2 bg-red-100 rounded-full hover:bg-red-200 transition"
onClick={() => {
if (!isLoggedIn) {
toast.error("Please login to manage wishlist!");
navigate("/auth");
return;
}
onAddToWishlist(product);
toast.success("Item removed from wishlist!");
}}>
Expand All @@ -75,6 +92,11 @@ function ProductCard({ product }) {
<button
className="mt-2 md:ml-48 ml-80 text-red-600 absolute top-0 right-2 p-2 bg-red-100 rounded-full hover:bg-red-200 transition"
onClick={() => {
if (!isLoggedIn) {
toast.error("Please login to add items to wishlist!");
navigate("/auth");
return;
}
onAddToWishlist(product);
toast.success("Item added to wishlist!");
}}>
Expand Down
17 changes: 17 additions & 0 deletions src/User/components/ProductCard/ProductCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
import React from "react";
import { FaStar } from "react-icons/fa";
import { useAuth } from "../../../context/AuthContext";
import { useNavigate } from "react-router-dom";

const ProductCard = ({ image, title, price, rating }) => {
const { isLoggedIn } = useAuth();
const navigate = useNavigate();

const handleAddToCart = () => {
if (!isLoggedIn) {
alert("Please login to add items to your cart!");
navigate("/auth");
return;
}

// Add to cart logic here
alert(`${title} added to cart!`);
};
Comment on lines +10 to +19
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

“Add to Bag” shows success without adding anything.

This misleads users and tests. Either wire Redux add-to-cart or remove the success message until implemented.

Minimal fix to avoid false positives and align UX with ProductGrid toasts:

-import { useAuth } from "../../../context/AuthContext";
+import { useAuth } from "../../../context/AuthContext";
+import toast from "react-hot-toast";
@@
-  const handleAddToCart = () => {
-    if (!isLoggedIn) {
-      alert("Please login to add items to your cart!");
-      navigate("/auth");
-      return;
-    }
-    
-    // Add to cart logic here
-    alert(`${title} added to cart!`);
-  };
+  const handleAddToCart = () => {
+    if (!isLoggedIn) {
+      toast.error("Please login to add items to your cart!");
+      navigate("/auth");
+      return;
+    }
+    // TODO: Wire up actual add-to-cart logic (e.g., dispatch manageCartItem).
+  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const handleAddToCart = () => {
if (!isLoggedIn) {
alert("Please login to add items to your cart!");
navigate("/auth");
return;
}
// Add to cart logic here
alert(`${title} added to cart!`);
};
// at the top of the file, alongside your other imports
import { useAuth } from "../../../context/AuthContext";
import toast from "react-hot-toast";
// …
const handleAddToCart = () => {
if (!isLoggedIn) {
toast.error("Please login to add items to your cart!");
navigate("/auth");
return;
}
// TODO: Wire up actual add-to-cart logic (e.g., dispatch manageCartItem).
};
🤖 Prompt for AI Agents 
In src/User/components/ProductCard/ProductCard.jsx around lines 10 to 19, the
handler currently shows a success alert without actually adding the product to
the cart; either wire the Redux add-to-cart action or remove the misleading
success message. Replace the placeholder success alert with a dispatch to the
existing Redux addToCart (or addCartItem) action passing the product
id/quantity/details and then show the same toast used by ProductGrid on
successful dispatch (or handle errors and show an error toast); if Redux wiring
is not ready, remove the success alert entirely (or replace it with a
non-committal "feature coming soon" toast) so the UI no longer reports success
when nothing was added.


return (
<div className="bg-white rounded-lg shadow-md p-4 h-full flex flex-col">
<img
Expand All @@ -22,6 +38,7 @@ const ProductCard = ({ image, title, price, rating }) => {
</div>

<button
onClick={handleAddToCart}
className="mt-auto w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600"
style={{
display: "flex",
Expand Down
29 changes: 26 additions & 3 deletions src/context/AuthContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,35 @@ const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
const [isAdmin, setIsAdmin] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [user, setUser] = useState(null);

Comment on lines +7 to 9
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Auth state isn’t persisted or initialized from storage; will desync with existing login flow.

Login code elsewhere writes to localStorage, but AuthContext never reads it. After a successful login, isLoggedIn in context remains false, breaking the new guards.

Apply this diff to initialize from storage on mount:

-const AuthContext = createContext();
+const AuthContext = createContext();
@@
-export const AuthProvider = ({ children }) => {
+export const AuthProvider = ({ children }) => {
   const [isAdmin, setIsAdmin] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [user, setUser] = useState(null);
+  React.useEffect(() => {
+    try {
+      const storedLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+      const storedUser = localStorage.getItem("user");
+      const storedAdminRole = localStorage.getItem("adminRole");
+      if (storedLoggedIn) {
+        setIsLoggedIn(true);
+        setUser(storedUser ? JSON.parse(storedUser) : null);
+      }
+      if (storedAdminRole != null) {
+        setIsAdmin(storedAdminRole === "1" || storedAdminRole === "true");
+      }
+    } catch {
+      /* no-op */
+    }
+  }, []);

Also update the import to include useEffect:

-import React, { createContext, useState, useContext } from 'react';
+import React, { createContext, useState, useContext, useEffect } from 'react';
🤖 Prompt for AI Agents 
In src/context/AuthContext.jsx around lines 7 to 9, the AuthContext initial
state is not hydrated from localStorage so it stays false after an existing
login; import useEffect and on component mount read stored auth (e.g.
localStorage.getItem('auth') or specific keys like 'isLoggedIn'/'user'), parse
safely, then call setIsLoggedIn and setUser to initialize the context values;
also fall back to defaults if nothing is stored and ensure you handle JSON.parse
errors gracefully (try/catch) so the app doesn't crash.

const loginAsAdmin = () => setIsAdmin(true);
const loginAsUser = () => setIsAdmin(false);
const loginAsAdmin = () => {
setIsAdmin(true);
setIsLoggedIn(true);
};

const loginAsUser = (userData = null) => {
setIsAdmin(false);
setIsLoggedIn(true);
setUser(userData);
};
Comment on lines +10 to +19
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Login helpers don’t sync storage; context and consumers using localStorage will diverge.

Ensure loginAsAdmin/loginAsUser update localStorage so Navbar, PrivateRoute, etc., stay consistent.

Apply:

   const loginAsAdmin = () => {
     setIsAdmin(true);
     setIsLoggedIn(true);
+    try {
+      localStorage.setItem("isLoggedIn", "true");
+      localStorage.setItem("adminRole", "1");
+    } catch {}
   };
@@
   const loginAsUser = (userData = null) => {
     setIsAdmin(false);
     setIsLoggedIn(true);
     setUser(userData);
+    try {
+      localStorage.setItem("isLoggedIn", "true");
+      localStorage.setItem("user", JSON.stringify(userData));
+      localStorage.removeItem("adminRole");
+    } catch {}
   };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const loginAsAdmin = () => {
setIsAdmin(true);
setIsLoggedIn(true);
};
const loginAsUser = (userData = null) => {
setIsAdmin(false);
setIsLoggedIn(true);
setUser(userData);
};
const loginAsAdmin = () => {
setIsAdmin(true);
setIsLoggedIn(true);
try {
localStorage.setItem("isLoggedIn", "true");
localStorage.setItem("adminRole", "1");
} catch {}
};
const loginAsUser = (userData = null) => {
setIsAdmin(false);
setIsLoggedIn(true);
setUser(userData);
try {
localStorage.setItem("isLoggedIn", "true");
localStorage.setItem("user", JSON.stringify(userData));
localStorage.removeItem("adminRole");
} catch {}
};


const logout = () => {
setIsAdmin(false);
setIsLoggedIn(false);
setUser(null);
};
Comment on lines +7 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify end-to-end: Is loginAsUser or loginAsAdmin called anywhere?

Current login screens set localStorage directly and don’t invoke these helpers, leaving context stale during the session.

Run:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Calls to login helpers (outside context file):"
rg -nP 'loginAs(User|Admin)\s*\(' -g '!src/context/AuthContext.jsx' -C2 || true

echo
echo "Direct localStorage isLoggedIn usage:"
rg -nP "localStorage\\.getItem\\(['\"]isLoggedIn['\"]\\)" -n -C2

Length of output: 1975

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

echo "Locations with localStorage.setItem:"
rg -nP 'localStorage\.setItem\(' -n -C2

Length of output: 6264

Login helpers are unused and context remains stale

The loginAsUser and loginAsAdmin functions in src/context/AuthContext.jsx are never invoked—every authentication flow writes directly to localStorage instead (e.g. in UserAuth.jsx, Admin.jsx, Dashboard.jsx, etc.). As a result, your context’s isLoggedIn, isAdmin, and user states never update during a session, leading to stale or inconsistent UI state.

Please address by:

  • Refactoring your login flows (in src/User/pages/UserAuth/UserAuth.jsx, src/User/pages/AdditionalDetails.jsx, src/User/pages/Admin-Verification/Admin.jsx, src/User/pages/Dashboard/Dashboard.jsx, etc.) to call the corresponding context helpers (loginAsUser, loginAsAdmin) instead of writing directly to localStorage.
  • Ensuring those helpers also persist the session to localStorage (e.g. inside loginAsUser, call localStorage.setItem("isLoggedIn", "true"), localStorage.setItem("username", userData.username), etc.) so that both context and storage remain in sync.
  • Optionally removing redundant direct localStorage.setItem calls once all flows use the context API.

This change is necessary to guarantee that the React Context accurately reflects authentication state across your app.

🤖 Prompt for AI Agents 
In src/context/AuthContext.jsx around lines 7 to 25, the loginAsUser and
loginAsAdmin helpers are never called so context state stays stale; update these
helpers to both update context state (setIsAdmin, setIsLoggedIn, setUser) and
persist the same values to localStorage (e.g., set isLoggedIn, isAdmin, and user
fields such as username) so context and storage stay in sync, then refactor the
authentication flows (UserAuth.jsx, AdditionalDetails.jsx, Admin.jsx,
Dashboard.jsx, etc.) to call loginAsUser(userData) or loginAsAdmin() instead of
writing directly to localStorage (and remove redundant localStorage.setItem
calls in those files once they use the context API).

Comment on lines +21 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Logout doesn’t clear storage.

Components that read from localStorage will still think the user is logged in.

Apply:

   const logout = () => {
     setIsAdmin(false);
     setIsLoggedIn(false);
     setUser(null);
+    try {
+      localStorage.removeItem("isLoggedIn");
+      localStorage.removeItem("user");
+      localStorage.removeItem("adminRole");
+    } catch {}
   };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const logout = () => {
setIsAdmin(false);
setIsLoggedIn(false);
setUser(null);
};
const logout = () => {
setIsAdmin(false);
setIsLoggedIn(false);
setUser(null);
try {
localStorage.removeItem("isLoggedIn");
localStorage.removeItem("user");
localStorage.removeItem("adminRole");
} catch {}
};
🤖 Prompt for AI Agents 
In src/context/AuthContext.jsx around lines 21 to 25, the logout function only
updates React state but does not clear persisted auth data, so other components
reading localStorage will still think the user is logged in; update logout to
also remove or clear the auth-related keys from storage (removeItem for keys you
persist such as "isAdmin", "isLoggedIn", "user" and any auth token like "token"
or "authToken"), and if you support sessionStorage remove them there too; keep
the state resets as-is after clearing storage so UI and persisted state stay in
sync.


return (
<AuthContext.Provider value={{ isAdmin, loginAsAdmin, loginAsUser }}>
<AuthContext.Provider value={{
isAdmin,
isLoggedIn,
user,
loginAsAdmin,
loginAsUser,
logout
}}>
{children}
</AuthContext.Provider>
);
Expand Down