Password security React.js

Question

I am currently working on a project and I am using firebase for the back-end part and I have the following questions:

1. How can I make sure that nobody can access a user's password in react.js?
2. Is it wrong to save a password in a local variable?
3. In my project, when the user tries to log in, the username and password inputs got the 'onChange' eventlistener attached, so basically every time the password input's value changes a state is updated and that state variable is used to log in the user. Is this wrong?
4. Is it better to use react's useRef on the password input and when the user tries to log in, just get the password input's value using ref?

Answer 1

I'm not very familiar with firebase but from what I know about authentication:

1. Don't store it. The only time the password should show up in the client is when the user inputs it. After that input is used you shouldn't be storing it (plain) anywhere. A server application would probably store a hash from it though (eg bcrypt).
2. Yes, it's wrong. Like stated in 1, the plain password is not meant to be stored anywhere. Just used and then forgotten. Clients usually send the password to a server side application and then receive a token back, proof that they are logged in. That toke is then used to make subsequent requests. Some implementations might involve two tokens, being one short-lived (access-token) and one long-lived (refresh-token).
3. Not wrong. As long as that state is not kept after submission.
4. This works too. But 3 is fine.

I wrote those answers based on my studies and past experiences. But the authentication subject is vast and there's a lot of debate. I suggest some research on the topic so you get more acquainted with the various aspects of the security of it.

Answer 2

Your React application is a client application, the place where password checking is made is in the firebase backend that you don't control.

The onChange event listener is just there to help you grab what the user is typing in the password field so that you can send some data in the server(firbase) .The local state that you use for that is not a persistant storage like localstorage ,it just a variable that only your client application can access in your browser.So there is not security issue.When you reload your page the values will no longer exist in the variable.

Where it's important to consider to protect your password is:

1. When you send data into the server,make sure that you are in https so that your password field doesn't be sent in clear to the server.
2. Hash your password in your backend application .So as you're using database, you don't have to worry for that.

Summary:

• There is no security issue as long as your password are temporarly kept in a local state or variable as long it not a persistant storage who's goal is not to store data permanently like localstorage , cookies ,etc..The only thing that it does it to keep the value until your make an http request to send it into the server
• Read a little bit about security with SSL/TLS in client server communication

I hope it helped.

Notice: English is not my first langage,so i may have written with some mistakes