在 react.js 中设置 bcryptjs 的问题

Question

I was trying to setting up a single registration page in a react component but I wanted to hash the password before sending the response to my back-end.

I am confused on why the code below does not work, it returns a promise but it should not as I am wrapping the login in an asynchronous function and gets also awaited.

Any help would be greatly appreciated.

import React, { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
/// Error when using bycript ?
var bcrypt = require('bcryptjs');


const Register = () => {

    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [address, setAddress] = useState('')
    const [password, setPassword] = useState('')
    /*
       async function hashPassword(password) {
           const hashedPassword = await bcrypt.hash(password, 10);
           return hashedPassword;
       }
   
       useEffect(() => {
           try {
               const hashedPassword = hashPassword(password);
               setPassword(hashedPassword)
           } catch (error) {
               console.log(error)
           }
           console.log(password)
       }, [password])
   
       TRIED TO USE BCRYPT BUT DID NOT WORK
        */



    async function register() {
        const url = 'http://localhost:5000/customers';
        const object = {
            customer_id: uuidv4(), 
            customer_name: name,
            address: address,
            email: email,
            customer_password: password
        }
        const result = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(object)
        });

        result = await result.json();
    }



    return (
        <>
            <div>
                <h1>Register</h1>
                <div>
                    <label for="customer_name">Name: </label>
                    <input type="text" name="customer_name" id="customer_name"
                        onChange={(e) => setName(e.target.value)} required />
                </div>
                <div>
                    <label for="email">Email: </label>
                    <input type="email" name="email" id="email"
                        onChange={(e) => setEmail(e.target.value)} required />
                </div>
                <div>
                    <label for="address">Address: </label>
                    <input type="text" name="address" id="address"
                        onChange={(e) => setAddress(e.target.value)} />
                </div>
                <div>
                    <label for="password">Create a new password: </label>
                    <input type="password" name="password" id="password"
                        onChange={(e) => setPassword(e.target.value)} required />
                </div>
                <button type="submit" onClick={register}>Register</button>
                <br />
                <p>Copyright 2022 E-Market</p>
            </div>
        </>
    );
};

export default Register;

Answer 1

hashPassword returns a promise that's why it doesn't work.
But you shouldn't hash passwords to send to the back-end, the password should only be hashed upon database insertion. More info here .