How to hash password in React App, before sending it to the API

The problem (the why): Your React Log in form takes in plain text for the password, and we are sending the password OTA (Over the Air)

Scenario: Let's say you are in a Starbucks or using public wifi, and you log in to your app, and it so happens that there is a hacker monitoring the network traffic. Even though your app is using https:// your password might still be compromised.

Solution (the how): Let’s hash our password before we send it to the API

in your react app

1. If you don’t have a React app let’s create one npx create-react-app bcrypt-react , then cd bcrypt-reactthen run the app with yarn start

Add bcryptjs library to hash password with yarn add bcryptjs
(info about bcrypt libriary https://www.npmjs.com/package/bcryptjs)

1. Create a simple login form in App.js

Notice your PASSWORD is HASHED and SALTED with the hardcoded SALT

Notice how the password is being hashed

Here is the sample code for the form.

here is the sample repo https://github.com/jonathans199/bcryptjs-react-app

Finally, on the API

1. You handle/receive on the user's hashed password
2. Save it to the DB and that will be saved for every user and checked upon every login
3. You could add JWT to the hashed password, then save the hashedPassword within the JWT token

Let me know if that helped……