Should I use a controlled React component for the input field (security wise)?

Question

I made a React controlled component for the password input field:

onPasswordChange(ev) {
  this.setState({
    passoword: ev.target.value
  });
}

<input
  value={this.state.password}
  onChange={this.onPasswordChange}
>

As you can see in the image below if the component is controlled we can see the password value if I go and inspect the element. My question is: Is this the right way to control a password input? (security wise).

I know that I can use the ref={} on the input field but I want to know the best practices on handling password fields.

Answer 1

That's an interesting question but I don't think it's really a problem. From my knowledge, I think that you could always access the value of the input field if you have access to the inspector by using document.getElementById('passwordInputId').value for example. The password type is set so that someone behind you can't see what you are writing. This is a good example of what I'm talking about.

So you should probably use the controlled component with the state, since it's the way recommended by React and it's better to avoid refs.