Implementing AES-GCM Encryption in JavaScript

I’m excited to walk you through implementing AES-GCM (Advanced Encryption Standard with Galois Counter Mode) encryption in your web applications. This powerful algorithm provides both confidentiality and authenticity, making it a top choice for secure data transmission and storage.

AES-GCM combines the strengths of symmetric key encryption with built-in message authentication, offering superior performance compared to other modes like CBC or RSA-OAEP . In this guide, we’ll break down a clean implementation using modern JavaScript and the Web Cryptography API.

🔐 Why Use AES-GCM?

AES-GCM is not just fast—it also ensures that your data remains private and tamper-proof. It uses Counter Mode (CTR) for encryption and GMAC for authentication, all in one operation . This makes it ideal for real-time communication, secure messaging, and encrypted storage systems.

Now let’s dive into the code.

🛠️ Step 1: Generate an AES-GCM Key

Before encrypting any data, we need a strong cryptographic key:

async function generateKey() {
  return await crypto.subtle.generateKey(
    {
      name: "AES-GCM",
      length: 256,
    },
    true,
    ["encrypt", "decrypt"],
  );
}

🔍 Explanation:

crypto.subtle.generateKey: Generates a new cryptographic key.
name: "AES-GCM": Specifies the use of AES in Galois/Counter Mode .
length: 256: Uses a 256-bit key size, which is considered highly secure.
true: Allows the key to be exported if needed later.
["encrypt", "decrypt"]: Grants permission to use the key for both encryption and decryption.

🔒 Step 2: Encrypt Your Data

Once you have a key, you can securely encrypt sensitive information:

async function encrypt(key, data) {
  const encoder = new TextEncoder();
  const encodedData = encoder.encode(data);

  const iv = crypto.getRandomValues(new Uint8Array(12));
  const ciphertext = await crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv,
    },
    key,
    encodedData,
  );

  return { ciphertext, iv };
}

🔍 Explanation:

TextEncoder: Converts the input string into a binary format (Uint8Array) suitable for encryption.
iv (Initialization Vector): A 12-byte random value used to ensure uniqueness across encryptions with the same key .
crypto.getRandomValues: Creates a cryptographically secure IV.
crypto.subtle.encrypt: Performs the actual encryption using AES-GCM .
Returns both ciphertext and iv, which are needed for decryption.

✅ Tip: The IV doesn’t need to be secret but should be unique for each encryption operation. It’s often sent alongside the ciphertext.

🔓 Step 3: Decrypt and Verify Integrity

Decrypting with AES-GCM also verifies the authenticity of the data:

async function decrypt(key, ciphertext, iv) {
  const decryptedBuffer = await crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv,
    },
    key,
    ciphertext,
  );

  return new TextDecoder().decode(decryptedBuffer);
}

🔍 Explanation:

crypto.subtle.decrypt: Handles both decryption and integrity verification.
If the data has been altered or the key is incorrect, this will throw an error.
TextDecoder: Converts the decrypted binary back into a readable string.

⚠️ Note: Unlike the original version, we don’t compare the decrypted text with the original manually—AES-GCM already guarantees authenticity.

🧪 Example Usage

Here’s how to tie everything together:

(async () => {
  const key = await generateKey();
  const data = "This is a secret message";

  const { ciphertext, iv } = await encrypt(key, data);
  const decrypted = await decrypt(key, ciphertext, iv);

  console.log("Decrypted message:", decrypted);
})();

This script:

Generates a key
Encrypts a message
Decrypts and verifies the result

If everything works correctly, the output should be:

Decrypted message: This is a secret message

📌 Best Practices & Security Tips

Never hardcode keys: Store them securely using environment variables or secure vault services.
Use unique IVs: Reusing IVs with the same key can compromise security.
Keep private keys offline: Only expose them when absolutely necessary.
Authenticate before decrypting: AES-GCM does this automatically, so make sure errors are handled gracefully.
Avoid transmitting IV separately without context: Usually, the IV is prepended to the ciphertext for simplicity and clarity .

📚 Further Reading

To expand your knowledge of cryptographic implementations in JavaScript:

✅ Conclusion

AES-GCM is a state-of-the-art encryption method that offers high performance and strong security. By leveraging the Web Cryptography API in JavaScript, you can implement robust encryption and authentication directly in the browser or Node.js environments.

With proper handling of keys and initialization vectors, you can build secure applications that protect user data effectively.