How to prevent my secret data (e.g. from 'man in the middle attacks') while sending them in a request between Frontend and Backend?

Question

I want to prevent my secret data (e.g. 'password') while sending them in my requests.

I'm using React on Frontend and MongoDB on Backend side.

Actually, I'm registering a user to database with his salted and hashed password like this:

userSchema.pre('save', async function (next) {
    if (!this.isModified('password')) {
        next()
    }

    const salt = await bcrypt.genSalt(10);
    
    console.log('this.password: ', this.password); 
    // password coming form Frontend is not still protected here, like '1234'
    
    this.password = await bcrypt.hash(this.password, salt); 
    // password is protected like '$2a$10$gxNPkFvqRIFZPyMsB.Dmf.G52yQntT3LxJQHuteCaSZCpUZ0RPkdm'
})

But I want to protect the sensitive data also on the way (for example from 'man in the middle attacks').

So, how should I implement the sending of user password as protected, or what is the best experienced way to do it?

Thanks.

Answer 1

Use asymmetric encryption.

Generate a public-private key pair, encrypt the password with the public key on the frontend, send the ciphertext to the backend, decrypt with the private key on the backend.