Problem or Need

Currently, the application lacks a self-service way for users to reset their password if they forget it. When a user cannot remember their password, their only option is to contact support or re-register, which is inefficient for the support team and frustrating for the user. This can lead to account abandonment and a poor user experience. Implementing a "Forgot Password" feature is a standard and essential component of modern web application security and usability.

Proposed Solution

Introduce a complete password reset flow that allows users to securely reset their own password. This involves three main components:

1. A "Forgot Password?" link on the login page.
2. A form where the user can enter their email address to receive a password reset link.
3. A secure page, accessible only via a unique tokenized link, where the user can set a new password.

Expected Behavior

From a user's perspective, the process should be as follows:

1. The user clicks the "Forgot Password?" link on the login page.
2. They are taken to a new page and prompted to enter the email address associated with their account.
3. After submitting their email, they see a confirmation message instructing them to check their inbox.
4. The user receives an email containing a unique, time-sensitive link to reset their password.
5. Clicking the link opens a new page where they are prompted to enter and confirm their new password.
6. Upon successful submission, their password is changed, they are redirected to the login page, and a success message is displayed.

Benefits

• Improved User Experience: Provides a critical self-service function, reducing user frustration and allowing them to regain access to their account 24/7 without intervention.
• Reduced Support Load: Automates the password reset process, freeing up support or administrative staff from handling manual password reset requests.
• Enhanced Security: Implements a secure, token-based system for password changes, ensuring that only the owner of the email address can reset the password.

Possible Implementation

Backend (API)

1. /auth/forgot-password Endpoint (POST):

• Accepts an email address.
• Verifies if a user with that email exists.
• Generates a secure, unique, and short-lived password reset token (e.g., a JWT or a random crypto string).
• Stores a hash of the token in the database, associated with the user's ID and an expiration timestamp.
• Sends an email to the user containing a link like https://yourwebsite.com/reset-password?token=<unique_token>.

2. /auth/reset-password Endpoint (POST):

• Accepts the token and the newPassword.
• Verifies the token against the stored hash in the database, checks for expiration, and finds the associated user.
• If the token is valid, hashes the newPassword and updates the user's record in the database.
• Invalidates the used reset token.

Frontend (React)

1. UI Components:

• Add a Link component for "Forgot Password?" on the LoginPage.
• Create a ForgotPasswordPage component with an email input form.
• Create a ResetPasswordPage component with two password input fields (new password and confirm password). This page should read the token from the URL parameters.

2. Logic:

• Update AuthContext.js or a similar service file with new functions (forgotPassword, resetPassword) that call the new backend endpoints.
• Implement state management for handling loading, success, and error messages for both forms.

Additional Notes

• The password reset token should have a short expiration time (e.g., 15-60 minutes) to minimize security risks.
• The email service used to send the reset link must be reliable to ensure users receive the instructions promptly.
• Clear error handling should be implemented for cases like "Email not found," "Invalid or expired token," and "Passwords do not match."