dev #3978
Updated by Nazmul Hossain Shovon 3 months ago
# PR Description
This PR improves the authentication system by reorganizing auth routes for better structure, adding input sanitization to prevent XSS attacks on passwords, introducing a password generator tool for secure password creation during resets, and enhancing form usability with proper labels and a "Lost your password?" link. Key changes include:
* Reorganized auth route files under auth for cleaner routing.
* Added sanitize-html to password fields in auth schemas for security.
* Implemented a collapsible password generator panel in the reset password form, allowing users to generate strong passwords with customizable options (length, character types).
* Added form labels for better accessibility in sign-in, forgot password, and reset password forms.
* Updated forgot password button text to "Send Reset Link" and added a forgot password link in the sign-in form.
* Minor UI improvements, such as character counters and validation refinements.
* These changes enhance security, usability, and maintainability of the auth flow.
## Testing Instructions
To test these changes in the browser UI, follow these steps as a reviewer. Ensure you're running the app locally (e.g., via npm run dev or pnpm dev) and have access to the auth pages.
### Test Auth Route Reorganization:
* Navigate to sign-in, sign-up, forgot password, and reset password pages (e.g., /auth/signin, /auth/[role]/signup, /auth/forgot-password, etc.).
* Verify that all routes load correctly without 404 errors. The URLs should now be under /auth/ (e.g., /auth/signin instead of the old paths).
* Try signing up as an agency or client, signing in, and verifying email to ensure routing works end-to-end.
### Test Password Sanitization:
* In the sign-up or reset password forms, enter passwords with HTML tags (e.g., <script>alert('xss')</script>).
* Submit the form and check that the password is sanitized (no scripts execute; the input should be cleaned).
* Verify that password validation still works (8-64 characters, no match issues).
### Test Password Generator Panel:
* Go to the reset password page (/auth/reset-password or similar).
* Scroll to the "New Password" field and expand the "Password Generator" accordion.
* Adjust the length slider (12-32 characters) and toggle options (uppercase, lowercase, numbers, symbols).
* Click "Generate Password" and confirm the generated password appears in the input field.
* Check that the password meets the selected criteria (e.g., includes symbols if enabled).
* Submit the form with the generated password and ensure it resets successfully.
### Test Form Labels and UI Enhancements:
* On sign-in, forgot password, and reset password forms, verify that labels are visible (e.g., "Username or Email address", "New Password").
* In sign-in, check for the "Lost your password?" link at the bottom; click it to navigate to forgot password.
* In reset password, ensure labels for "New Password" and "Confirm New Password" are present.
* Test character counters (e.g., in agency name during sign-up) by typing and confirming the count updates.
### Test Forgot Password Flow:
* From sign-in, click "Lost your password?" to go to forgot password.
* Enter an email and submit; verify the button says "Send Reset Link" and the flow proceeds (check email if possible).
* Complete the reset process, including OTP validation and password reset.
### Edge Cases and Validation:
* Try invalid inputs (e.g., short passwords, mismatched confirms) and ensure error messages appear correctly.
* Test on different devices/browsers for responsiveness.
* Run any existing auth tests (e.g., via Jest) to confirm no regressions.