Skip to content

feat: Add 'Forgot Password' feature #116

@archa8

Description

@archa8

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>.
  1. /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.
  1. 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."

Metadata

Metadata

Assignees

Labels

featureSuggest a new feature for the projectgood first issueGood for newcomershacktoberfestIssues marked with this label are part of Hacktoberfest and open for contributions

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions