title: VueJS bcrypt implementation
body: <p>I am a bit confused about bcrypt usage in VueJS ...</p>
  <p>I am working on a sample application with VueJS as FE and NodeJS as BE (+ Postgres as the DB).</p>
  <p>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.</p>
  <p>And here is the problem, I cannot find any documentation re BCRYPT in VueJS ...</p>
  <p>I was able to install it:</p>
  <pre><code>npm install --save bcrypt
  
  &gt; bcrypt@5.0.0 install /home/fe/node_modules/bcrypt
  &gt; node-pre-gyp install --fallback-to-build
  
  node-pre-gyp WARN Using needle for node-pre-gyp https download 
  [bcrypt] Success: &quot;/home/fe/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node&quot; is installed via remote
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;})
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;})
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: {&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;})
  
  + bcrypt@5.0.0
  added 34 packages from 101 contributors and audited 871 packages in 6.769s
  </code></pre>
  <p>But I have no idea how to use it ... I found this but that is for BE (NodeJS) .. <a href="https://www.npmjs.com/package/bcrypt" rel="noreferrer">https://www.npmjs.com/package/bcrypt</a></p>
  <p>Is there any other (un)official docs I can look into? thx a lot</p>
  <p><strong>EDIT:</strong>
  ok I was able to come up with this ..</p>
  <pre><code>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)
  </code></pre>
  <p>The first console.log(hash) returns the hash but the other one returns &quot;undefined&quot;</p>
  <p>How am I gonna get that hash out of that section? sorry for such a lame question</p>
  <p>EDIT2:</p>
  <p>Ok I finally got it working :) it was actually much easier than I thought it would be ...</p>
  <p>I will leave the steps here for the others (just in case)</p>
  <p>install bcryptjs</p>
  <pre><code>npm install --save bcryptjs
  </code></pre>
  <p>import bcrypt in the Vue template and use it</p>
  <pre><code>&lt;template lang=&quot;html&quot;&gt;
    &lt;div class=&quot;main&quot;&gt;
      &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
        &lt;input type=&quot;password&quot; class=&quot;form-control&quot;
               id=&quot;password&quot; placeholder=&quot;Password&quot;
               v-model.lazy=&quot;customerData.password&quot;&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;
              @click.prevent=&quot;addUser&quot;&gt;Add&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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)
          },
        }
      }
  
  &lt;/script&gt;
  </code></pre>