Changing Password with Firebase

Firebase Authentication provides an easy and secure way to allow users to change their passwords. In ShipFast, we leverage Firebase’s updatePassword method to offer a seamless and secure password change experience for authenticated users. This guide explains how the password change functionality is implemented and provides the necessary details to customize it for your application.

1. Password Change

ShipFast enables users to securely update their passwords while adhering to Firebase’s best security practices. The password change process requires users to be authenticated and ensures they have recently logged in, fulfilling Firebase's security requirements before updating their password.

The handleSave Function

The password change functionality is implemented in the ChangePasswordForm component. The handleSave function validates the new password, ensures it matches the confirmation, and calls Firebase’s updatePassword method to apply the change. If the user's authentication is outdated, the setIsReAuthOpen method prompts them to reauthenticate, maintaining the security of the platform.

Here’s the implementation:

const handleSave = async e => {
  e.preventDefault();
  const user = authUser;
 
  const validationError = validatePasswords(password, confirmPassword);
  if (validationError) {
    showNotification(validationError, "error");
    return;
  }
 
  try {
    await updatePassword(user, password);
    showNotification(
      "Password updated successfully! Your changes have been saved."
    );
  } catch (err) {
    setIsReAuthOpen(
      Boolean(err?.message?.includes("auth/requires-recent-login"))
    );
  }
};

File Path: src/components/forms/ChangePasswordForm/index.js

The function handles the password update process and ensures that users meet the security requirements. If the user needs to reauthenticate, the system triggers a dialog prompting them to log in again.

2. Handling Reauthentication

In ShipFast, the password change functionality is designed to handle scenarios where reauthentication is required. Firebase enforces a security rule that requires users to reauthenticate before changing their passwords, particularly if the user’s session has been active for a while. This is done to prevent unauthorized password changes if someone else gains access to the user’s device.

Reauthentication Handling

If the password update fails with the error message "auth/requires-recent-login", we use the setIsReAuthOpen method to trigger the reauthentication flow.

Here’s an example of how reauthentication is handled:

catch (err) {
  setIsReAuthOpen(
    Boolean(err?.message?.includes("auth/requires-recent-login"))
  );
}

`