In the era of modern web development, the news of getting access to private data is becoming common. The term encryption and decryption is something familiar to every backend web developer. These two play a good role in terms of web security. For example, we never store passwords as a string instead we make sure to hash (encrypt) them before storing them into the database. Crypto JS gives us the ability to perform encryption and decryption on the client-side as well. In this brief article, we will see how to encrypt decrypt data with VueJS crypto.

Note: crypto-js can be used with any front-end JS framework, NodeJS, and even with vanilla JavaScript as well.

There can be many use cases to encrypt and decrypt data based on requirements. However, on the client-side, we can use it to store encrypted data into localStorage.

Encryption translates the data into another form so that someone with access to the data will not be able to read it. Unless they have a secret key to decrypt it and read the data.

VueJS Crypto JS encryption decryption

I have created a simple template to explain the process of data encryption with VueJS.

<template>
  <div class="main">
    <input v-model="pvtData" placeholder="Enter a string" /> <br />
    <button @click="encryptData">Encrypt</button>
    <button @click="decryptData">Decrypt</button>
    <button @click="deleteData">Delete</button>

    <p>{{ encData }}</p>
  </div>
</template>

Here inside the template, we have an input to enter private data. We got three buttons to encrypt data, decrypt data, and delete data from storage.

The paragraph at the end will display the encrypted text with vuejs crypto.

Inside we will have 3 properties.

data() {
  return {
    pvtData: "",
    secret: "123#$%",
    encData: "",
  };
},

You already know about pvtData and encData. The property secret will hold a unique string that will be used for AES encryption using crypto js.

Now, let's encrypt our data and store it into localStorage.

encryptData() {
  if (this.pvtData.length) {
    // hash the name with any algorithm
    const data = CryptoJS.AES.encrypt(this.pvtData, this.secret).toString();

    // store into localStorage
    localStorage.setItem("secretData", data);

    // display the encrypted data
    this.getEncryptedData();
  }
},

The process is simple here, hash the private data, and convert it to string then store it into localStorage. Finally, call a method to fetch data from storage and render it into the template.

The getEncryptedData method will have a single line of code.

getEncryptedData() {
  // get the data from localStorage or send placeholder text
  this.encData = localStorage.getItem("secretData") || "No value present";
},

If the localStorage item is undefined then we will set a placeholder.

Next let's move to the decryption process.

decryptData() {
  // get data from localStorage
  const secretData = localStorage.getItem("secretData");

  // decrypt the data and convert to string
  const decryptData = CryptoJS.AES.decrypt(
    secretData,
    this.secret
  ).toString(CryptoJS.enc.Utf8);

  alert("Decrypted private data: " + decryptData);
},

Incase of decryption with vuejs crypto. First, we will get the data from storage and decrypt it with AES. The decrypted data needs to be converted into a string with utf8 character encoding.

Crypto handles the Utf8 conversion. Once we get the string we will create an alert and display the value.

Now the last method here is deleteData. This method is there just to provide a quick playable tool to understand the encryption-decryption and storing process with vuejs crypto.

deleteData() {
  // remove data from localStorage
  localStorage.removeItem("secretData");

  // update text
  this.getEncryptedData();
},

We have 2 lines here, 1st one will delete the key-value pair from localStorage. Next, it will call the method to get the updated value of encData.

You can play with the project Sandbox here.