[Bug]: Implement Strong Password Validation with Character and Length Requirements

[anushreekhatri028-coder]

Before submitting

• I have searched existing issues to make sure this is not a duplicate.
• I have read the contribution guidelines.

Bug summary

Implement Strong Password Validation with Character and Length Requirements

Steps to reproduce

1.Navigate to the registration or password update page.
2.Enter a weak password (e.g., password, 12345678, or abc123).
3.Submit the form.
4.Observe that the password is accepted even though it does not meet strong security standards.

Expected behavior

Users should only be able to register or update their password if it meets all password strength requirements.
Passwords must contain:
1.At least 8 characters
2.At least one uppercase letter (A–Z)
3.At least one lowercase letter (a–z)
4.At least one numeric digit (0–9)
5.At least one special character (e.g., !@#$%^&*())

Actual behavior

1.Users can create or update passwords without meeting strong security requirements.
2.Weak passwords such as password, 12345678, or abc123 may be accepted.
3.No validation is performed to ensure the presence of uppercase letters, lowercase letters, numbers, or special characters.
4.Users do not receive feedback about password strength or missing requirements.
5.This can lead to the use of weak passwords, increasing the risk of unauthorized account access.

Screenshots or recordings

Browser and device information

Browser: Google Chrome
Browser version:148.0.0.0
Operating system:Windows10
Device: Desktop

Additional context

No response

[anushreekhatri028-coder]

@kunalverma2512 Kindly assign it to me

[kunalverma2512]

@coderabbitai please tell what this issue needs in codebase to be changed
tell everything to change in codebas in detail make sure that changes must be compatible to whole code

[coderabbitai]

Coding Plan

Summary

• Server-side validation is updated first to ensure security enforcement at the API boundary using Zod regex validation
• A shared frontend utility centralizes password validation logic for consistency between registration and password reset forms
• Frontend components are updated to provide real-time, granular feedback showing each specific requirement's status as users type
• The implementation extends existing validation patterns in both server (Zod schemas) and client (inline validation with alert roles) without introducing new architectural abstractions

Implementation Steps

Phase 1: Server-Side Password Validation

Enforce the new password strength requirements at the API layer to ensure security regardless of client behavior. All password validation happens in Zod schemas within the auth module.

Update Password Validation Schema

Add comprehensive password strength validation to the Zod schemas for registration and password reset endpoints.

• Update server/modules/auth/validation.js to modify the password field validation in both registerSchema and resetPasswordSchema
• Replace the current .min(6) validation with .min(8) and add a .regex() check that enforces all character requirements (uppercase, lowercase, digit, special character)
• Use a single regex pattern with positive lookaheads: ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()]) combined with the minimum length check
• Provide a clear, user-friendly error message that lists all requirements when validation fails (e.g., "Password must be at least 8 characters and contain uppercase, lowercase, number, and special character")

🤖 Prompt for AI agents

Update the server-side Zod validation schemas in
`server/modules/auth/validation.js` to enforce strong password requirements for
both `registerSchema` and `resetPasswordSchema`.

- Locate the password field in both `registerSchema` and `resetPasswordSchema`
- Replace the existing `.min(6)` check with `.min(8)`
- Chain a `.regex()` call using a single pattern with positive lookaheads:
`^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()])` to enforce the presence of
uppercase, lowercase, digit, and special character
- Set the regex error message to a clear, user-friendly string listing all
requirements (e.g., `"Password must be at least 8 characters and contain
uppercase, lowercase, number, and special character"`)

Phase 2: Frontend Password Validation and Feedback UI

Update the client-side validation to match server requirements and provide granular, real-time feedback showing users exactly which password requirements are not yet met.

Task 1: Create Shared Password Validation Utility

Create a reusable password validation utility to ensure consistent validation logic across all password forms.

• Create a new utility file at frontend/src/utils/passwordValidation.js
• Implement a function that takes a password string and returns an object with boolean flags for each requirement (hasMinLength, hasUppercase, hasLowercase, hasDigit, hasSpecialChar)
• Include a computed isValid property that is true only when all requirements are met
• Define the special character set to match the server-side validation (e.g., !@#$%^&*())

Task 2: Update SignupPage Password Validation

Integrate the new validation utility and display granular feedback for each unmet requirement.

• Update frontend/src/pages/SignupPage.jsx to import and use the password validation utility
• Replace the current password.length >= 6 check with the new isValid check from the utility
• Replace the single "Password must be at least 6 characters" message with a list of requirement indicators
• Display each requirement with visual feedback (e.g., checkmark or red X) showing which are met and which are not as the user types
• Follow the existing role="alert" and aria-invalid accessibility patterns already in use
• Update the form submission guard to use the new validation result

Task 3: Update ForgotPassword Password Validation

Apply the same validation and feedback pattern to the password reset form.

• Update frontend/src/components/auth/ForgotPassword.jsx to import and use the password validation utility
• Replace the current newPassword.length >= 6 check with the new isValid check
• Add the same granular requirement feedback UI as implemented in SignupPage
• Ensure the confirm password validation (doPasswordsMatch) continues to work alongside the new validation
• Maintain consistency with the existing styling and accessibility patterns in the component

🤖 Prompt for AI agents

Implement the frontend password validation utility and update both
password-entry components to use it with real-time granular feedback.

**1. Create `frontend/src/utils/passwordValidation.js`:**
- Export a function that accepts a password string
- Return an object with boolean flags: `hasMinLength` (>= 8 chars),
`hasUppercase`, `hasLowercase`, `hasDigit`, `hasSpecialChar` (matching
`!@#$%^&*()`)
- Include a computed `isValid` property that is `true` only when all flags are
`true`
- Ensure the special character set matches the server-side regex

**2. Update `frontend/src/pages/SignupPage.jsx`:**
- Import the new password validation utility
- Replace the `password.length >= 6` check with `isValid` from the utility
result
- Remove the single "Password must be at least 6 characters" message
- Render a list of per-requirement indicators (e.g., checkmark or red X) that
update in real-time as the user types
- Preserve existing `role="alert"` and `aria-invalid` accessibility attributes
- Update the form submission guard to use the new `isValid` value

**3. Update `frontend/src/components/auth/ForgotPassword.jsx`:**
- Import and apply the same password validation utility
- Replace `newPassword.length >= 6` with `isValid` from the utility
- Add the same per-requirement feedback UI as used in `SignupPage.jsx`
- Ensure `doPasswordsMatch` confirm-password validation continues to function
alongside the new validation
- Match the existing styling and accessibility patterns of the component

Research

The codebase is a Node.js/Express backend with a React frontend. Authentication is handled in server/modules/auth/ with Zod-based validation schemas applied as route middleware. Password hashing uses bcrypt in the service layer. The frontend has two password entry points: SignupPage.jsx (registration) and ForgotPassword.jsx (password reset via OTP). Both components use inline real-time validation with role="alert" feedback messages and disable the submit button until validation passes. Currently, both server and client only enforce a 6-character minimum with no character-type requirements.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Update the server-side Zod validation schemas in
`server/modules/auth/validation.js` to enforce strong password requirements for
both `registerSchema` and `resetPasswordSchema`.

- Locate the password field in both `registerSchema` and `resetPasswordSchema`
- Replace the existing `.min(6)` check with `.min(8)`
- Chain a `.regex()` call using a single pattern with positive lookaheads:
`^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()])` to enforce the presence of
uppercase, lowercase, digit, and special character
- Set the regex error message to a clear, user-friendly string listing all
requirements (e.g., `"Password must be at least 8 characters and contain
uppercase, lowercase, number, and special character"`)
===============================================================================

Task: 2

Implement the frontend password validation utility and update both
password-entry components to use it with real-time granular feedback.

**1. Create `frontend/src/utils/passwordValidation.js`:**
- Export a function that accepts a password string
- Return an object with boolean flags: `hasMinLength` (>= 8 chars),
`hasUppercase`, `hasLowercase`, `hasDigit`, `hasSpecialChar` (matching
`!@#$%^&*()`)
- Include a computed `isValid` property that is `true` only when all flags are
`true`
- Ensure the special character set matches the server-side regex

**2. Update `frontend/src/pages/SignupPage.jsx`:**
- Import the new password validation utility
- Replace the `password.length >= 6` check with `isValid` from the utility
result
- Remove the single "Password must be at least 6 characters" message
- Render a list of per-requirement indicators (e.g., checkmark or red X) that
update in real-time as the user types
- Preserve existing `role="alert"` and `aria-invalid` accessibility attributes
- Update the form submission guard to use the new `isValid` value

**3. Update `frontend/src/components/auth/ForgotPassword.jsx`:**
- Import and apply the same password validation utility
- Replace `newPassword.length >= 6` with `isValid` from the utility
- Add the same per-requirement feedback UI as used in `SignupPage.jsx`
- Ensure `doPasswordsMatch` confirm-password validation continues to function
alongside the new validation
- Match the existing styling and accessibility patterns of the component

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[kunalverma2512]

@anushreekhatri028-coder you can start to work on this issue