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) ..

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

EDIT: ok I was able to e 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>

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./package/bcrypt

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

EDIT: ok I was able to e 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>

• javascript
• node.js
• vue.js
• hash
• bcrypt

2 Answers 2

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

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