Storing form inputs in component state in React.js, specifically passwords

Well to respond your questions on two layers:

First: You'll need authorization to take place in a secured setting, and the browser isn't that place. If you're guarding a form submittal, for example, it's up to you to have the server-side code that processes the submittal to validate that the captcha response is as expected. The fact that client-side state can be manipulated shouldn't really matter as long as you're not using that as your sole source of validation/authorization like passwords.

Second: I recommend that you use password-hash a node.js library to use hashed passwords. I didnt tested myself but that shouldn't be an issue. Of course https protocols is how the client and server need to communicate.


No, no vulnerability here: the user will be able to see the password while it is inside her browser, after she inputs it...

A password should not be a secret for it's owner... :-)

Of course you will use https protocol if you send the password to a server, otherwise it will be visible on the cable, an that is a security issue!


I agree with @MarcoS there is no security issue.

I would add if a thief knows how to read the state in dev tools he can also do this:

document.querySelector("[type=password]").value

Of course the password must be protected and disable to be revealed, it could be avoided using refs and without onChange event

<input type="password" ref="password"/>

And when the form is submitted you can get the password as follow

const password = this.refs.password.value;