How can I use the Web Crypto API in my React application?

How can I use the Web Crypto API in my React application?

You can use the Web Crypto API to perform cryptographic operations like hashing, encryption, and decryption in your React app. Would you like a code example?

Yes, please provide a code example for hashing a password.

Sure! Here's a simple example using the SubtleCrypto interface:

const hashPassword = async (password) => {
  const encoder = new TextEncoder();
  const data = encoder.encode(password);
  const hash = await crypto.subtle.digest('SHA-256', data);
  return hash;
};

This function takes a password and returns its SHA-256 hash.

How do I handle the hashed password after that?

You can convert the hashed ArrayBuffer to a hex string for storage or comparison. Here's how:

const bufferToHex = (buffer) => {
  return Array.from(new Uint8Array(buffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
};

Combine this with the hashPassword function to get a hex string.

What about encryption and decryption?

For encryption, you can use the encrypt method of the SubtleCrypto interface. Would you like a specific example?