How can I use the Web Crypto API in Vue 3?

How can I use the Web Crypto API in Vue 3?

You can use the Web Crypto API in Vue 3 by accessing it through the global window.crypto object. This allows you to perform cryptographic operations like hashing, encryption, and decryption.

Can you show me an example of hashing a password?

Sure! You can use the subtle property of the crypto object. Here's a simple example:

const password = 'mySecurePassword';
const encoder = new TextEncoder();
const data = encoder.encode(password);

window.crypto.subtle.digest('SHA-256', data)
  .then(hash => {
    console.log(new Uint8Array(hash));
  });

What about encrypting data?

For encryption, you can use the encrypt method. Here's a basic example using AES-GCM:

const key = await window.crypto.subtle.generateKey({
  name: 'AES-GCM',
  length: 256
}, true, ['encrypt', 'decrypt']);

const iv = window.crypto.getRandomValues(new Uint8Array(12));
const encrypted = await window.crypto.subtle.encrypt({
  name: 'AES-GCM',
  iv: iv
}, key, data);