How to Encrypt Passwords in Vue with RSA and JSEncrypt

Scenario

Vue front‑end stores password in a cookie; to avoid plaintext exposure the password must be encrypted before storage.

RSA encryption overview

RSA is an asymmetric algorithm using a public‑key/private‑key pair. The public key can be shared; the private key remains secret. Encryption with the public key can be decrypted only with the matching private key.

Encryption process

A generates a public‑key and a private‑key; the private key is kept secret.

A shares the public‑key with B.

B encrypts the message with A’s public‑key.

A decrypts the ciphertext with the private‑key.

Implementation with JSEncrypt

Add the dependency in package.json:

{
  "dependencies": {
    "jsencrypt": "3.0.0-rc.1"
  }
}

Install the package: npm install Create utils/jsencrypt.js with the following functions:

import JSEncrypt from 'jsencrypt/bin/jsencrypt'

const publicKey = ''   // paste generated public key here
const privateKey = ''  // paste generated private key here

export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey)
  return encryptor.encrypt(txt)
}

export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey)
  return encryptor.decrypt(txt)
}

Generate a key pair with an online generator (e.g., http://web.chacuo.net/netrsakeypair) and paste the keys into the placeholders.

In the login component import the utilities:

import { encrypt, decrypt } from '@/utils/jsencrypt'

When the user selects “remember password”, encrypt the password and store it in a cookie:

if (this.loginForm.rememberMe) {
  Cookies.set("username", this.loginForm.username, { expires: 30 })
  Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
  Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
}

When reading the cookie, decrypt the stored password:

getCookie() {
  const username = Cookies.get("username")
  const password = Cookies.get("password")
  const rememberMe = Cookies.get('rememberMe')
  this.loginForm = {
    username: username === undefined ? this.loginForm.username : username,
    password: password === undefined ? this.loginForm.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  }
}

These steps ensure the password is never stored in plaintext in the browser cookie and can be retrieved securely.