VueJS bcrypt implementation

Question

I am a bit confused about bcrypt usage in VueJS ...

I am working on a sample application with VueJS as FE and NodeJS as BE (+ Postgres as the DB).

In NodeJs, there is no problem for me to encrypt the password, but since I am security-paranoid, I don't wanna send it in a plain-text from FE to BE.

And here is the problem, I cannot find any documentation re BCRYPT in VueJS ...

I was able to install it:

npm install --save bcrypt

> [email protected] install /home/fe/node_modules/bcrypt
> node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[bcrypt] Success: "/home/fe/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 34 packages from 101 contributors and audited 871 packages in 6.769s

But I have no idea how to use it ... I found this but that is for BE (NodeJS) .. https://www.npmjs.com/package/bcrypt

Is there any other (un)official docs I can look into? thx a lot

EDIT: ok I was able to come up with this ..

let password = 'secret'
let passwordHash
bcrypt.genSalt(10, function(err, salt) {
   bcrypt.hash(password, salt, function(err, hash) {
     console.log(hash)
     passwordHash = hash
   })
})
console.log(passwordHash)

The first console.log(hash) returns the hash but the other one returns "undefined"

How am I gonna get that hash out of that section? sorry for such a lame question

EDIT2:

Ok I finally got it working :) it was actually much easier than I thought it would be ...

I will leave the steps here for the others (just in case)

install bcryptjs

npm install --save bcryptjs

import bcrypt in the Vue template and use it

<template lang="html">
  <div class="main">
    <label for="password">Password</label>
      <input type="password" class="form-control"
             id="password" placeholder="Password"
             v-model.lazy="customerData.password">
    <button type="submit" class="btn btn-primary"
            @click.prevent="addUser">Add</button>
  </div>
</template>

<script>
    import bcrypt from 'bcryptjs';

    export default {
      data() {
        return {
           password: null
        }
      },
      methods: {
        addUser(){
           console.log(this.encryptPassword(this.password))
        },
        encryptPassword(password)          
          const salt = bcrypt.genSaltSync(10)
          return bcrypt.hashSync(password, salt)
        },
      }
    }

</script>

Jalbert

Answer 1

I don't think it should be any different from doing it on node (of course unless you are doing file IO).

Check this site out

HTH

Kernel

Answer 2

Eventhough this problem already solved, i'll give some context for everyone in case the link are dead or someone still curious about the issue.

let password = 'secret'
let passwordHash
bcrypt.genSalt(10, function(err, salt) {
   bcrypt.hash(password, salt, function(err, hash) {
     console.log(hash)
     passwordHash = hash
   })
})
console.log(passwordHash)

for the first snippet, the bcrypt.genSalt function and bcrypt.hash function are ran asynchronously therefore the second console.log result are undefined, cause it printed before the hash function done.

As i am observe from 2nd snippet, OP try to use bcrypt in synchronous way, which it's work that way, but async way are more preferred. Following code are async way i modified from 2nd snippet, i haven't test this code, but this will give the clue about that.

<template lang="html">
  <div class="main">
    <label for="password">Password</label>
      <input type="password" class="form-control"
             id="password" placeholder="Password"
             v-model.lazy="customerData.password">
    <button type="submit" class="btn btn-primary"
            @click.prevent="addUser">Add</button>
  </div>
</template>

<script>
    import bcrypt from 'bcryptjs';

    export default {
      data() {
        return {
           password: null
        }
      },
      methods: {
        async addUser(){
           console.log(await this.encryptPassword(this.password))
        },
        async encryptPassword(password)          
          const salt = await bcrypt.genSalt(10)
          return await bcrypt.hashSync(password, salt)
        },
      }
    }

</script>

in case the link dead, i also archive it here

Aeromechanic