Updating a password in firebase (Angular 5)

Question

I am building a settings component for accounts on an app im working on, and I want the user to have the ability to update their password from these account settings. I have created this firebase function:

 updateUserPassword(password) {
    this.currentUser.updatePassword(password).then(function() {
      console.log('succcess!')
    }).catch(function(error) {
      alert(error)
    });
  }

however each time I call it, I get the following error:

I understand that I need to re-authenticate in order to perform requests like this, however I can't seem to figure out how to do it! Any suggestions?

Answer 1

If the Login of the User is too far in the past and you wanna Change important Information like the Password the User Needs to Reauthenticate in Order to do the process. There is a ton of Information regarding this in the offical Firebase Documentation.

Answer 2

In order to re-authenticating the user with credential, you basically give an email and a password as parameters. Below I'll show you my account.ts page that has a button for the user to change his password. When the user clicks the button, an alert prompt with inputs appears:

account.ts

changePassword(){
    console.log('Change Password Button Clicked');
    //Creating the promt alert with inputs
    let alert = this.alertCtrl.create({
      title: 'Change Password',
      inputs: [
        {
          name: 'oldPassword',
          placeholder: 'Your old password..',
          type: 'password'
        },
        {
          name: 'newPassword',
          placeholder: 'Your new password..',
          type: 'password'
        },
        {
          name: 'newPasswordConfirm',
          placeholder: 'Confirm your new password..',
          type: 'password'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
         {
          text: 'Update Password',
          handler: data => {
            //First you get the current logged in user
            const cpUser = firebase.auth().currentUser; 

            /*Then you set credentials to be the current logged in user's email
            and the password the user typed in the input named "old password"
            where he is basically confirming his password just like facebook for example.*/

            const credentials = firebase.auth.EmailAuthProvider.credential(
              cpUser.email, data.oldPassword);

              //Reauthenticating here with the data above
              cpUser.reauthenticateWithCredential(credentials).then(
                success => {
                  if(data.newPassword != data.newPasswordConfirm){
                    let alert = this.alertCtrl.create({
                      title: 'Change Password Failed',
                      message: 'You did not confirm your password correctly.',
                      buttons: ['Try Again']
                    });
                    alert.present();
                  } else if(data.newPassword.length < 6){
                    let alert = this.alertCtrl.create({
                      title: 'Change Password Failed',
                      message: 'Your password should be at least 6 characters long',
                      buttons: ['Try Again']
                    });
                    alert.present();
                  } else {
                    let alert = this.alertCtrl.create({
                      title: 'Change Password Success',
                      message: 'Your password has been updated!',
                      buttons: ['OK']
                    });
                    alert.present();
                  /* Update the password to the password the user typed into the
                    new password input field */
                  cpUser.updatePassword(data.newPassword).then(function(){
                    //Success
                  }).catch(function(error){
                    //Failed
                  });
                  }
                },
                error => {
                  console.log(error);
                  if(error.code === "auth/wrong-password"){
                    let alert = this.alertCtrl.create({
                      title: 'Change Password Failed',
                      message: 'Your old password is invalid.',
                      buttons: ['Try Again']
                    });
                    alert.present();
                  }
                }
              )
              console.log(credentials); 
            }
          }
      ]
    });
    alert.present();
  }