Fix registration and cart authentication issues

[Chanu716]

Fix: Registration and Cart Authentication Issues

Description

Fixed critical authentication bugs preventing account creation and cart functionality for logged-in users.

Issues Fixed

1. Account Creation Not Working

Problem: After filling registration form and clicking "Create Account", nothing happened - no success message, no redirection, and no error shown.

Root Cause:

• Validation functions returned true for valid inputs, but error state expected empty strings
• Used browser alert() instead of toast notifications
• Missing comprehensive validation before form submission

Solution:

• Fixed validation functions to return empty strings for valid inputs
• Replaced alert() with proper toast error messages
• Added comprehensive form validation before submission
• Added proper error handling for all fields

2. Cart "Login Required" for Logged-in Users

Problem: After successful login, adding items to cart still showed "Login Required" popup.

Root Cause:

• ItemCard component didn't listen to authentication state changes
• No real-time update when user logged in/registered

Solution:

• Added authentication state tracking with useState
• Added event listeners for storage and authChange events
• Component now re-renders when auth state changes
• Dispatched custom authChange event after login/registration

3. Profile Showing Wrong Email

Problem: Profile page showed OAuth email instead of JWT account email.

Root Cause:

• MyAccount component prioritized Supabase OAuth data over JWT data
• Incorrect data access path for backend response

Solution:

• Prioritized JWT token authentication
• Fetch user data from /api/auth/me endpoint first
• Properly access nested response data (userData.data.email and userData.data.username)
• Fallback to OAuth only if JWT fails

Technical Changes

Files Modified

1. client/src/components/Card/RegisterCard/RegisterCard.js

• Fixed validateEmail() to return "" instead of true for valid emails
• Fixed validatePassword() to return "" instead of true for valid passwords
• Replaced alert() with toast.error() for password mismatch
• Added comprehensive pre-submission validation
• Added usernameTouched to useEffect dependencies
• Added authChange event dispatch after registration

2. client/src/components/Card/ItemCard/ItemCard.js

• Added isAuthenticated state to track auth status
• Added useEffect to listen for auth changes
• Listen to both storage and authChange events
• Added debug logging for token checks
• Component now re-renders when user logs in/out

3. client/src/components/Authentication/Login/Login.js

• Added authChange event dispatch after successful login
• Ensures all components are notified of auth state change

4. client/src/components/Account/MyAccount/MyAccount.js

• Prioritize JWT authentication over OAuth
• Fetch user data from /api/auth/me endpoint first
• Fixed data access to use userData.data.email and userData.data.username
• Only fallback to Supabase if JWT fetch fails
• Proper error handling for both auth methods

Testing Completed

Registration Flow

• ✅ Fill all fields with valid data → Account created successfully
• ✅ Password mismatch → Shows error toast
• ✅ Invalid email → Shows inline error
• ✅ Duplicate username → Shows error message
• ✅ Short password → Shows validation error
• ✅ Successful registration → Redirects to home page
• ✅ Token stored in localStorage
• ✅ Auth state updates across components

Cart Functionality

• ✅ Not logged in → Shows "Login Required" popup
• ✅ After login → Can add items to cart without popup
• ✅ After registration → Can immediately add items to cart
• ✅ Items properly added to cart with correct data
• ✅ Stock validation works correctly

Profile Display

• ✅ JWT login → Shows correct username and email from registration
• ✅ OAuth login → Shows OAuth email as fallback
• ✅ Logout → Clears profile data correctly
• ✅ Token refresh → Profile updates properly

Before & After

Before:

• Registration form submission did nothing
• Cart showed "Login Required" even after login
• Profile showed wrong OAuth email instead of registered email

After:

• Registration creates account and redirects successfully
• Cart works immediately after login
• Profile shows correct registered username and email

API Endpoints Used

• POST /api/auth/register - Create new account
• POST /api/auth/login - User login
• GET /api/auth/me - Fetch authenticated user data
• GET /api/auth/check-username - Check username availability

Breaking Changes

None - All changes are backwards compatible

Dependencies

No new dependencies added

#292

[vercel]

@Chanu716 is attempting to deploy a commit to the agamjotsingh18's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼