📜 Description
Labels: bug ux backend frontend
Affected Files: Signup.tsx, authValidator.js
What's broken
The frontend and backend enforce completely different validation rules for both username and password fields during registration. A value that passes frontend validation can fail backend validation and vice versa — leaving users stranded with generic error messages and no actionable guidance on what to fix.
Username mismatch
|
Regex |
Allows |
Rejects |
Frontend (Signup.tsx) |
/^[A-Za-z\s]+$/ |
Letters, spaces |
Numbers, underscores |
Backend (authValidator.js) |
/^[a-zA-Z0-9_]+$/ |
Letters, numbers, underscores |
Spaces |
Consequence: John Doe (with a space) passes frontend validation and submits — the backend returns 400 Bad Request. john_123 is blocked by the frontend before it ever reaches the server. There is no username a user can type that both layers simultaneously accept if it contains either a space, a number, or an underscore.
Password mismatch
|
Requirement |
Frontend (Signup.tsx) |
Letters + numbers, 8+ characters |
Backend (authValidator.js) |
Uppercase + lowercase + digit + special character (@$!%*?&) |
Consequence: password123 clears the frontend check and submits successfully — the backend rejects it with a 400. The user receives a generic error with no indication that a special character is required, as the frontend never communicated this constraint.
User experience impact
In both cases the failure mode is identical and particularly damaging: the form appears to accept the input, the request fires, and then a vague server error surfaces. Users have no way to know which rule they violated or what the actual requirements are, since the frontend's own validation told them they were fine.
Fix
Align Signup.tsx's validation patterns exactly with the Zod schema in authValidator.js — the backend is the source of truth. Update the frontend regex and error messages to reflect:
- Username:
/^[a-zA-Z0-9_]+$/ — letters, numbers, underscores; no spaces
- Password:
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/ — uppercase, lowercase, digit, and one special character
Also update the frontend error messages to explicitly state each constraint so users know exactly what is required before submitting.
📜 Description
Labels:
buguxbackendfrontendAffected Files:
Signup.tsx,authValidator.jsWhat's broken
The frontend and backend enforce completely different validation rules for both username and password fields during registration. A value that passes frontend validation can fail backend validation and vice versa — leaving users stranded with generic error messages and no actionable guidance on what to fix.
Username mismatch
Signup.tsx)/^[A-Za-z\s]+$/authValidator.js)/^[a-zA-Z0-9_]+$/Consequence:
John Doe(with a space) passes frontend validation and submits — the backend returns400 Bad Request.john_123is blocked by the frontend before it ever reaches the server. There is no username a user can type that both layers simultaneously accept if it contains either a space, a number, or an underscore.Password mismatch
Signup.tsx)authValidator.js)@$!%*?&)Consequence:
password123clears the frontend check and submits successfully — the backend rejects it with a400. The user receives a generic error with no indication that a special character is required, as the frontend never communicated this constraint.User experience impact
In both cases the failure mode is identical and particularly damaging: the form appears to accept the input, the request fires, and then a vague server error surfaces. Users have no way to know which rule they violated or what the actual requirements are, since the frontend's own validation told them they were fine.
Fix
Align
Signup.tsx's validation patterns exactly with the Zod schema inauthValidator.js— the backend is the source of truth. Update the frontend regex and error messages to reflect:/^[a-zA-Z0-9_]+$/— letters, numbers, underscores; no spaces/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/— uppercase, lowercase, digit, and one special characterAlso update the frontend error messages to explicitly state each constraint so users know exactly what is required before submitting.