How to make a reset password system in React Firebase-CodePudding

I'm a little lost. I'm trying to set up a password reset system, but I'm not sure how to do it. I don't have to send an email to create a new password. How can I do to allow the user to change the password through this form? In theory the new password should replace the old one saved in the Firebase database.

import './ResetPassword.css'
import {Link} from 'react-router-dom';
import {useNavigate} from 'react-router-dom';
import { getAuth, sendPasswordResetEmail } from "firebase/auth";

function ResetPassword() {

    const [email, setEmail] = useState('')
    const auth = getAuth();

    sendPasswordResetEmail(auth, email)
      .then(() => {
        // Password reset email sent!
        // .. 
        })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });



    return (
        <div className="resetPassword-main">
            <div className="resetPassword-container">
                <h2>Ripristina la password</h2>
                <div className="resetPassword-form">
                    <form onSubmit={sendPasswordResetEmail}>

                    <label>Email</label> <br />
                    <input className="resetEmailInput" placeholder="Email" type="email" required /> <br/>

                    <label>Nuova password</label> <br />
                    <input className="resetPwInput" placeholder="Password" type="password"  /> <br/>

                    <button className="resetBtn" type="submit">Ripristina password</button>

                    </form>
                </div>
            </div>
        </div>
    )
}

export default ResetPassword;

CodePudding user response：

The sendPasswordResetEmail() is used when user is not logged in and needs to reset the password as they don't remember it. In that case an email containing a password reset is sent using which user can reset their password.

You don't have to ask for the new password in this form. Once the user changes the password using the email sent, it'll be updated in Firebase Auth.

Try wrapping the sendPasswordResetEmail code in a function e.g. triggerResetEmail and then call it on button click onClick={triggerResetEmail}:

function ResetPassword() {

  const [email, setEmail] = useState('')
  const auth = getAuth();

  const triggerResetEmail = async () => {
    await sendPasswordResetEmail(auth, email);
    console.log("Password reset email sent")
  }
 
  return (
    <div className="resetPassword-main">
      // Input field for email
      <button className="resetBtn" type="button" onClick={triggerResetEmail}>Ripristina password</button>

    </div>
  )
}

export default ResetPassword;

CodePudding user response：

const [email, setEmail] = useState('')
    const auth = getAuth();

    const triggerResetEmail = async () => {
        console.log(email);
        await sendPasswordResetEmail(auth, email);
        console.log("Password reset email sent");
    }

I am referring to the Firebase database. I thought the database saved credentials (email, password). I used firebase authentication to let the user to create credentials to login the platform. And it works.

This one?

CodePudding user response：

I don't have to send an email to create a new password. How can I do to allow the user to change the password through this form?

Since you don't need to send an email, you can simply use the updatePassword() method as follow:

import {
  getAuth,
  updatePassword,
} from 'firebase/auth';

const newPassword = ... // Get the value of the new password
await updatePassword(auth.currentUser, newPassword);

The tricky thing is that "this is a security sensitive operation that requires the user to have recently signed in" as explained in the doc. "If this requirement isn't met, ask the user to authenticate again and then call reauthenticateWithCredential()".

You'll get an auth/requires-recent-login error from the updatePassword() method if the user hasn't recently signed in.

In this case do as follows:

import {
  getAuth,
  updatePassword,
  reauthenticateWithCredential,
  EmailAuthProvider,
} from 'firebase/auth';

// ...

const oldPassword = ... // Get the value of the old password
const credential = EmailAuthProvider.credential(
   this.currentUser.email,
   oldPassword
);
await reauthenticateWithCredential(auth.currentUser, credential);

// Call again updatePassword()
const newPassword = ... // Get the value of the new password
await updatePassword(auth.currentUser, newPassword);