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.