React encrypt password

Question

I have following component to pass data in my firestore database. Currently the password is not encrypted and and is visible to users of the database. Therefore I want to encrypt it. However, I get the error

TypeError: Cannot read property 'encrypt' of undefined.

That is my component for putting data in the database:

import React, {useState} from "react";
import fire from './fire.js';
import {userAuth} from './Main';
import '../style/inputPasswords.css';
import {encrypt} from './encryption';

const database = fire.firestore();

const InputPasswords = () => {

    const [title, setTitle] = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();

        let encryptedPassword = encrypt(password);

        database.collection("password-"+userAuth).add({
            title: title,
            username: username,
            password: encryptedPassword
        })
        .then(() => {
            window.location.reload();
        })
        .catch((error) => {
            console.error(error);
        })

        setTitle("");
        setUsername("");
        setPassword("");
    }

    return (
        <form className="form" onSubmit={handleSubmit}>
            <label>title</label>
            <input className="input" id="title" placeholder="Title" value={title} autoComplete="off"
            onChange={(e) => setTitle(e.target.value)}/> 

           <label>Username</label>
           <input className="input" id="username" placeholder="Username" value={username} autoComplete="off"
           onChange={(e) => setUsername(e.target.value)}/> 

           <label>Password</label>
           <input className="input" id="password" placeholder="Password" type="password" value={password} autoComplete="off"
           onChange={(e) => setPassword(e.target.value)}/>

           <button type="submit">Add</button>
        </form>
    )
}

export default InputPasswords

This is the code for the encryption:

import crypto from "crypto";
const secret = "testtesttesttesttesttesttesttest";

const encrypt = (password) => {
    return crypto.AES.encrypt(password, secret).toString();
};

const decrypt = (encryption) => {
   let bytes = crypto.AES.decrypt(encryption, secret);
   let originalText = bytes.toString(crypto.enc.Utf8);

   return originalText;
};

export {encrypt, decrypt};

I am not sure how to fix that. Does anyone have an idea how to solve that problem? Because without the encryption the code runs without any problems

Where will you get your secret from? Will it stay contained in the source on the client? Then your encryption is completely useless ... Please refer to this question on how to store passwords securely https://stackoverflow.com/questions/1054022/best-way-to-store-password-in-database — derpirscher, Jul 03 '21 at 12:16
Later on it will not be client sided. However for testing purposes it is hardcoded in the class — Jan Masta, Jul 03 '21 at 12:35

score 0 · Accepted Answer · answered Jul 03 '21 at 12:41

I edited and moved the encryption function into the component and so the password gets encrypted

  const handleSubmit = (e) => {
        e.preventDefault();
        const secret = "testtesttesttesttesttesttesttest";

        const iv = Buffer.from(crypto.randomBytes(16));
        const cipher = crypto.createCipheriv('aes-256-ctr', Buffer.from(secret), iv);

        const encryptedPassword = Buffer.concat([cipher.update(password), cipher.final()]);

        //let encryptedPassword = crypto.AES.encrypt("password", secret).toString();;

        database.collection("password-"+userAuth).add({
            title: title,
            username: username,
            password: encryptedPassword.toString('hex')
        })
        .then(() => {
            window.location.reload();
        })
        .catch((error) => {
            console.error(error);
        })

        setTitle("");
        setUsername("");
        setPassword("");
    }

If it's password for user authentication, DO NOT store the password, neither in encrypted form. The problem is that you have to have the key. Use **slow salted hash**, such as Argon2, SCrypt, BCrypt,... or pbkdf2 if nothing else https://crackstation.net/hashing-security.htm — gusto2, Jul 04 '21 at 12:29

React encrypt password

1 Answers1