fix: align frontend auth validation with backend#530
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 26 minutes and 18 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughBackend password validation tightened with explicit quantifier syntax. Frontend username input validation expanded to accept letters, digits, and underscores, while form submission validation retains the previous letters/spaces-only rule—creating an internal inconsistency. Multiple JSX className attributes reformatted across lines without logic changes. ChangesValidation Alignment
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @Tanish-Solanki for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Signup/Signup.tsx (1)
56-58:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPassword regex is still weaker than backend requirements in both validation paths.
Lines 56 and 77 only require letters+numbers and don’t enforce uppercase/lowercase/special-character presence, so frontend and backend can still disagree.
💡 Suggested fix (single source used in both checks)
+ const PASSWORD_REGEX = + /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/; ... - } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value)) { - errorMessage = "Password must be 8+ characters with letters and numbers"; + } else if (!PASSWORD_REGEX.test(value)) { + errorMessage = + "Password must be at least 8 characters and include uppercase, lowercase, number, and special character"; } ... - const passwordError = !formData.password.trim() - ? "Password is required" - : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password) - ? "Password must be 8+ characters with letters and numbers" - : ""; + const passwordError = !formData.password.trim() + ? "Password is required" + : !PASSWORD_REGEX.test(formData.password) + ? "Password must be at least 8 characters and include uppercase, lowercase, number, and special character" + : "";Also applies to: 75-79
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Signup/Signup.tsx` around lines 56 - 58, The password check in Signup.tsx is weaker than backend rules; extract a single constant (e.g., PASSWORD_REGEX) and use it in both validation paths instead of the current inline regex so frontend and backend agree; set the regex to require at least one lowercase, one uppercase, one digit, one special character and minimum length 8 (e.g. (?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&]).{8,}), replace the two inline tests with PASSWORD_REGEX.test(value) (or the equivalent function like validatePassword) and update the errorMessage text to reflect the new requirements.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@backend/validators/authValidator.js`:
- Line 21: The regex for signupSchema.password contains an invalid possessive
quantifier `{8,}+` which is a syntax error; update the pattern used in
signupSchema (the password regex) to remove the possessive plus and use a
standard quantifier such as `{8,}` (or rely on existing .min(8)/.max(100)
validations) so the regex becomes valid ECMAScript and signup validation can
load correctly. Ensure you edit the pattern in the signupSchema.password
definition where the regex is declared.
In `@src/pages/Signup/Signup.tsx`:
- Around line 65-69: The submit-time validation for username (variable
usernameError) uses a regex that allows only letters/spaces but must match the
live validation/backend rule; update the ternary branch that tests
formData.username to use a regex allowing letters, digits and underscores (e.g.
/^[A-Za-z0-9_]+$/) while keeping the initial trim check, so usernameError logic
aligns with the live validator and backend contract.
---
Outside diff comments:
In `@src/pages/Signup/Signup.tsx`:
- Around line 56-58: The password check in Signup.tsx is weaker than backend
rules; extract a single constant (e.g., PASSWORD_REGEX) and use it in both
validation paths instead of the current inline regex so frontend and backend
agree; set the regex to require at least one lowercase, one uppercase, one
digit, one special character and minimum length 8 (e.g.
(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&]).{8,}), replace the two inline
tests with PASSWORD_REGEX.test(value) (or the equivalent function like
validatePassword) and update the errorMessage text to reflect the new
requirements.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 177bc73b-d714-4088-8c95-c1da07c42d4b
📒 Files selected for processing (2)
backend/validators/authValidator.jssrc/pages/Signup/Signup.tsx
| .max(100, "Password must be at most 100 characters long") | ||
| .regex( | ||
| /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/, | ||
| /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}+$/, |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does JavaScript (ECMAScript regex) support possessive quantifiers like {8,}+? If not, what is the correct equivalent for enforcing length alongside .min(8) validation?
💡 Result:
No. JavaScript regular expressions (ECMAScript) do not support possessive quantifier syntax like {8,}+; attempting it results in a syntax error (e.g., “Nothing to Repeat”) because ECMAScript regex only recognizes greedy quantifiers ({8,}) and non-greedy ones ({8,}?), not possessive ones [1][2]. Correct equivalent (enforce minimum length / no .min(8)-style “backtracking control”): use a normal quantifier with a length anchor. - If you want “length at least 8” for the whole input: ^.{8,}$ (or with a specific character class, e.g. ^[A-Za-z0-9]{8,}$). - If you only need to match a substring of length ≥ 8 inside a larger string: .{8,}. Note: possessive quantifiers are about preventing backtracking for performance/engine control, not about adding a “minimum length” constraint. For length validation in regex, use quantifiers {n,} (or {n,m}) and anchors like ^ and $ as shown above [2][3].
Citations:
- 1: https://stackoverflow.com/questions/25255790/regex-error-when-using-1-possessive-quantifier-in-javascript-regex
- 2: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Quantifiers
- 3: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Regular_expressions
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the region around the targeted line
nl -ba backend/validators/authValidator.js | sed -n '1,120p'
# Focus on password schema/regex area
rg -n "password|regex|signupSchema|min\\(8\\)" backend/validators/authValidator.js || trueRepository: GitMetricsLab/github_tracker
Length of output: 115
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="backend/validators/authValidator.js"
# Print a small window around the cited line (21) using cat -n
if [ -f "$FILE" ]; then
cat -n "$FILE" | sed -n '1,80p'
else
echo "Missing file: $FILE"
exit 1
fi
# Narrow search for password/regex/min(8)
rg -n "password|signupSchema|regex|min\\(8\\)|\\{8,\\}\\+" "$FILE" || trueRepository: GitMetricsLab/github_tracker
Length of output: 1824
Fix invalid password regex quantifier ({8,}+)
backend/validators/authValidator.js contains {8,}+ in signupSchema.password’s regex; ECMAScript regex doesn’t support possessive quantifiers like this, so it’s a regex syntax error that can prevent the module from loading (breaking signup validation). Replace {8,}+ with a valid quantifier such as {8,} (length is already enforced via .min(8) / .max(100)).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@backend/validators/authValidator.js` at line 21, The regex for
signupSchema.password contains an invalid possessive quantifier `{8,}+` which is
a syntax error; update the pattern used in signupSchema (the password regex) to
remove the possessive plus and use a standard quantifier such as `{8,}` (or rely
on existing .min(8)/.max(100) validations) so the regex becomes valid ECMAScript
and signup validation can load correctly. Ensure you edit the pattern in the
signupSchema.password definition where the regex is declared.
| const usernameError = !formData.username.trim() | ||
| ? "Username is required" | ||
| : !/^[A-Za-z\s]+$/.test(formData.username) | ||
| ? "Only letters are allowed" | ||
| : ""; | ||
| ? "Only letters are allowed" | ||
| : ""; |
There was a problem hiding this comment.
Submit-time username rule still contradicts live validation and backend contract.
Line 67 still enforces letters/spaces only, while Line 42 allows letters, numbers, and underscores. This reintroduces frontend inconsistency.
💡 Suggested fix
- const usernameError = !formData.username.trim()
- ? "Username is required"
- : !/^[A-Za-z\s]+$/.test(formData.username)
- ? "Only letters are allowed"
- : "";
+ const usernameError = !formData.username.trim()
+ ? "Username is required"
+ : !/^[a-zA-Z0-9_]+$/.test(formData.username)
+ ? "Username can contain only letters, numbers, and underscores"
+ : "";📝 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.
| const usernameError = !formData.username.trim() | |
| ? "Username is required" | |
| : !/^[A-Za-z\s]+$/.test(formData.username) | |
| ? "Only letters are allowed" | |
| : ""; | |
| ? "Only letters are allowed" | |
| : ""; | |
| const usernameError = !formData.username.trim() | |
| ? "Username is required" | |
| : !/^[a-zA-Z0-9_]+$/.test(formData.username) | |
| ? "Username can contain only letters, numbers, and underscores" | |
| : ""; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/Signup/Signup.tsx` around lines 65 - 69, The submit-time validation
for username (variable usernameError) uses a regex that allows only
letters/spaces but must match the live validation/backend rule; update the
ternary branch that tests formData.username to use a regex allowing letters,
digits and underscores (e.g. /^[A-Za-z0-9_]+$/) while keeping the initial trim
check, so usernameError logic aligns with the live validator and backend
contract.
|
🎉🎉 Thank you for your contribution! Your PR #530 has been merged! 🎉🎉 |
2 participants
Related Issue
Description
Aligned frontend registration validation rules with backend validation logic to prevent contradictory signup behavior.
Changes Made
Signup.tsxUsername Rules
Password Rules
How Has This Been Tested?
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit