Change Password in firebase with react native

Question

Im trying to update the password in the database firebase with react native It works but I have the error "The password must be 6characters long or more"

I know this is because of the "this.setState({newPassword: "",currentPassword: ""})", but I dont know how to fix it..

export default class ChangePassword extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newPassword: "",
      currentPassword: "",
    };
  }

  reauthenticate = (currentPassword) => {
    console.log("currentPassword = "+currentPassword)
    var user = firebase.auth().currentUser;
    var cred = firebase.auth.EmailAuthProvider.credential(
      user.email,
      currentPassword
    );
    return user.reauthenticateWithCredential(cred);
  };

  OnChangePassword = async () => {
    if (this.state.currentPassword === "" || this.state.newPassword === "") {
      alert("All the fields are required");
    }
    else if( this.state.newPassword.length <= 5)
    {
      alert("Password must contains more than 5 characters");
    } else {
      try {
        await this.reauthenticate(this.state.currentPassword).then(() => {
          var user = firebase.auth().currentUser;
          user.updatePassword(this.state.newPassword);
          const response = firebase.database().ref("Users").child(user.uid);

              this.setState({
            currentPassword:"",
            newPassword:""
          })
        })

      } catch (error) {
        console.log(error);
        alert(error);
      }
    }
  };

  render() {
    return (
          <View >
            <TextInput
              secureTextEntry={true}
              onChangeText={(currentPassword) =>
                this.setState({ currentPassword })
              }
            />
            <TextInput
              secureTextEntry={true}
              onChangeText={(newPassword)=>this.setState({newPassword})}
            />

            <Button onPress={() => this.OnChangePassword()}/>
          </View>
    );
  }
}
}

if I delete the ".then", I dont have any error but when I go back the same screen, the fields currentPassword and newPassword are not empty (the last text I wrote again here) — user123456, Jul 08 '21 at 14:56
and if you reset `newPassword` and `currentPassword` on `ComponentDidMounth`? — Giovanni Esposito, Jul 08 '21 at 14:59
It does not work, I go back to the screen and the fields are not empty — user123456, Jul 08 '21 at 15:16
I mean, the fields are not empty but if I click on "change password", I have the message that all the fileds are required, like they are empty — user123456, Jul 08 '21 at 15:24
Basically I understood where the problem could be but without code is impossible. Post some relevant code (or a codesandbox preferably). — Giovanni Esposito, Jul 08 '21 at 15:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234663/discussion-between-user123456-and-giovanni-esposito). — user123456, Jul 08 '21 at 15:43

score 0 · Answer 1 · answered Jul 08 '21 at 14:48

0

Use formik or anyother formLibrary where you could set the password Length by which you could verify how many characters you want minimum and maximum and validate it with user entered password by the way the work around with your code would be with this if Condition..

if (this.state.newPassword.length <= 5 ) {
Alert("New Password Should Contain more than 5 characters")
}

answered Jul 08 '21 at 14:48

Jhanzeb Ali

31
1
3

The problem is that the password that I write, bigger than 5 and I have the same error, like this.setState arrive before everytinh – user123456 Jul 08 '21 at 14:51
bro first you have to setState on TextInput onchange Function then Change the password on onPress of TouchableOpacity where you Click on Button with that state updated First if you dont setState before calling the function it would be empty state. – Jhanzeb Ali Jul 08 '21 at 14:57
But I dont have an empty state, the password is updated in my database, but I think that the update of CurrentPassword and Newpassword to empty field arrive before the end – user123456 Jul 08 '21 at 15:15
could you please give a sandbox ? – Jhanzeb Ali Jul 08 '21 at 15:17
what do you mean – user123456 Jul 08 '21 at 15:25
share your code into sandbox which could be accessible by any one so we could debug what your problem could be. please search code sandbox on google – Jhanzeb Ali Jul 08 '21 at 15:45

Change Password in firebase with react native

1 Answers1