Fix signup failure and improve error handling with proper user feedback #2696
Conversation
|
@KaranUnique is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR enhances the UserAuth component with comprehensive inline form validation, adding real-time validation for username, email, phone, and password fields. It introduces pre-submission frontend validations, improves error handling with granular server response differentiation, and updates the form UI to display validation states with dynamic borders and error messages while maintaining existing social login functionality. Changes
Sequence DiagramsequenceDiagram
participant User
participant Form as Form Component
participant Validation as Validation Logic
participant API as API Server
participant Alert as Swal Alert
User->>Form: Enter credentials
Form->>Validation: onChange/onBlur triggered
activate Validation
Validation->>Form: Update error state<br/>(username, email, phone, password)
Form->>User: Display inline errors<br/>(dynamic border colors)
deactivate Validation
User->>Form: Click Submit
Form->>Validation: Pre-submission checks<br/>(password match, phone format,<br/>length requirements)
alt Validation fails
Validation-->>Form: Return error state
Form-->>User: Display error highlights
else Validation passes
Form->>API: POST signup request<br/>(env-based URL)
activate API
alt Success (2xx)
API->>Form: Return user data
Form->>Alert: Show success alert
Alert->>User: Confirm signup success
Form->>Form: Clear fields, reset state
Form->>User: Flip to login view
else Error (400/409/500)
API->>Form: Return error response
Form->>Validation: Differentiate error type
Validation->>Alert: Granular error message
Alert->>User: Display error title & details
else Network Error
Form->>Alert: Network issue alert
Alert->>User: Display connection error
end
deactivate API
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Areas requiring extra attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/User/pages/UserAuth/UserAuth.jsx (1)
327-330: Use environment variable for Google OAuth URL to match backend configuration.The Google login handler uses a hardcoded
http://localhost:3000while login and signup correctly useimport.meta.env.VITE_API_URL || "http://localhost:5000". The backend runs on port 5000 (as configured inbackend/.env.exampleand the Google callback URL), so the Google OAuth flow will fail in production and create inconsistency in development.} else if (provider === "google") { - const apiUrl = - "http://localhost:3000"; + const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:5000"; // Google ke liye backend par redirect karein window.location.href = `${apiUrl}/auth/google`; }
🧹 Nitpick comments (2)
src/User/pages/UserAuth/UserAuth.jsx (2)
216-221: Remove debug console.log statements before production.These logging statements expose request details (including email) in the browser console and should be removed or wrapped in a development-only check.
- console.log("🚀 Attempting signup with:", { - username, - email: signupEmail, - phone, - apiUrl: `${apiUrl}/auth/signup` - });Also remove related logs at lines 230, 253, 264, 284, and 289.
199-210: Consider adding email validation to pre-submission checks.Other fields (username, phone, password) have pre-submission validation, but email relies solely on inline validation. For consistency and defense-in-depth, consider adding email validation here.
// Validate username length if (username.length < 3) { await Swal.fire({ title: "Invalid Username", text: "Username must be at least 3 characters long.", icon: "error", confirmButtonText: "OK", }); return; } + // Validate email format + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(signupEmail)) { + await Swal.fire({ + title: "Invalid Email", + text: "Please enter a valid email address.", + icon: "error", + confirmButtonText: "OK", + }); + return; + } + setLoading(true);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/User/pages/UserAuth/UserAuth.jsx(5 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/User/pages/UserAuth/UserAuth.jsx (1)
backend/controllers/authController.js (1)
req(68-121)
🔇 Additional comments (6)
src/User/pages/UserAuth/UserAuth.jsx (6)
43-48: LGTM!Clean and properly structured state declarations for inline validation errors.
52-97: LGTM!Validation rules correctly match backend requirements (username ≥3 chars, password ≥8 chars, 10-digit phone). The closure capture of
signupPasswordinvalidateConfirmPasswordworks correctly in the current usage context.
680-697: LGTM!The disabled state logic correctly prevents submission when validation errors exist, and the visual feedback with opacity and cursor changes provides clear UX. The loading state enhancement with "Creating Account..." text is a nice touch.
559-584: LGTM!Good input sanitization that restricts to digits only, with appropriate
maxLengthattribute. The validation timing (on 10 digits or blur) provides good real-time feedback.
597-604: Good UX consideration.Re-validating
confirmPasswordwhen the password field changes (line 603) ensures the match state stays current if the user modifies their password after filling the confirmation field.
165-208: LGTM!Pre-submission validation correctly guards against invalid data before making the API call. The sequential validation approach (showing one error at a time) is acceptable UX.
| switch (status) { | ||
| case 400: | ||
| errorTitle = "Invalid Input"; | ||
| errorMessage = data.message || "Please check your input and try again."; | ||
| break; | ||
| case 409: | ||
| errorTitle = "Account Already Exists"; | ||
| errorMessage = data.message || "An account with this email or username already exists."; | ||
| break; | ||
| case 500: | ||
| errorTitle = "Server Error"; | ||
| errorMessage = "Our server encountered an error. Please try again later."; | ||
| break; | ||
| default: | ||
| errorMessage = data.message || "An unexpected error occurred."; | ||
| } |
There was a problem hiding this comment.
Status code mismatch with backend - 409 handler will never trigger.
The backend (from authController.js) returns 400 for duplicate email/username errors, not 409. This means users with duplicate accounts will see the generic "Invalid Input" message instead of "Account Already Exists".
Either update the backend to return 409 for conflicts, or handle duplicates based on the error message:
case 400:
- errorTitle = "Invalid Input";
- errorMessage = data.message || "Please check your input and try again.";
+ // Check if it's a duplicate account error
+ if (data.message?.includes("already exists")) {
+ errorTitle = "Account Already Exists";
+ errorMessage = data.message;
+ } else {
+ errorTitle = "Invalid Input";
+ errorMessage = data.message || "Please check your input and try again.";
+ }
break;
- case 409:
- errorTitle = "Account Already Exists";
- errorMessage = data.message || "An account with this email or username already exists.";
- break;📝 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.
| switch (status) { | |
| case 400: | |
| errorTitle = "Invalid Input"; | |
| errorMessage = data.message || "Please check your input and try again."; | |
| break; | |
| case 409: | |
| errorTitle = "Account Already Exists"; | |
| errorMessage = data.message || "An account with this email or username already exists."; | |
| break; | |
| case 500: | |
| errorTitle = "Server Error"; | |
| errorMessage = "Our server encountered an error. Please try again later."; | |
| break; | |
| default: | |
| errorMessage = data.message || "An unexpected error occurred."; | |
| } | |
| switch (status) { | |
| case 400: | |
| // Check if it's a duplicate account error | |
| if (data.message?.includes("already exists")) { | |
| errorTitle = "Account Already Exists"; | |
| errorMessage = data.message; | |
| } else { | |
| errorTitle = "Invalid Input"; | |
| errorMessage = data.message || "Please check your input and try again."; | |
| } | |
| break; | |
| case 500: | |
| errorTitle = "Server Error"; | |
| errorMessage = "Our server encountered an error. Please try again later."; | |
| break; | |
| default: | |
| errorMessage = data.message || "An unexpected error occurred."; | |
| } |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your valuable contribution to the project 🚀 Keep contributing!! ✨ 📢 Don’t forget to share your VigyBag PR on LinkedIn and tag @VigyBag and me — we’d love to celebrate your achievement with you! 🔗💡 |
2 participants
Fixes Issue #2695
Changes proposed
Fixed signup API integration to ensure successful user registration
Note to reviewers
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.