Next.js Cart Duplicates Products When Logged In

distro_dave

I'm building an e-commerce website using Next.js, TypeScript, MongoDB, and NextAuth.js. I'm handling the shopping cart differently for guest users and logged-in users: Guest users: Cart is stored in localStorage. Logged-in users: Cart is stored in the MongoDB user document. When I add a product to the cart while logged in and refresh the page, I see that the quantity is multiplying like crazy in the same product. This does not happen for guest...

Originally asked by Haggen on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Maybe... just ditch cart functionality for unregistered users—sometimes, less is more. Remove cart functionality for unregistered users – Sometimes, less is more. Eliminate cart merging in fetchCart to prevent quantity duplication issues. Ensure guest users only use localStorage for their cart, keeping it separate from authenticated users. For registered users, load the cart from MongoDB and overwrite the cart state in useState . (Optional) Display a message encouraging guest users to register so they can save their cart.

Full answer by 0Veritas0: https://stackoverflow.stackexchange.com/a/79438181 (CC BY-SA 4.0).

Need it done for your business? UphillTech.