📦 crypto-utils-react

A lightweight AES-GCM encryption and decryption utility for React and modern JavaScript applications. Built using the Web Crypto API, it provides secure and efficient methods to encrypt and decrypt sensitive frontend data such as login credentials, tokens, or form payloads before sending them to your backend.

🔐 Algorithm Used — AES-GCM

This library uses the AES-GCM (Advanced Encryption Standard - Galois/Counter Mode) algorithm, which offers:

• ✅ Strong 256-bit symmetric encryption
• ✅ Built-in data integrity check (authentication tag)
• ✅ Support for modern browsers and secure contexts (HTTPS)

AES-GCM is a recommended algorithm by major security standards (NIST, OWASP) for frontend data encryption.

🚀 Installation

Install via npm:

npm install crypto-utils-react

Or with yarn:

yarn add crypto-utils-react

⚙️ Usage

1️⃣ Import functions

import { encrypt, decrypt } from "crypto-utils-react";

2️⃣ Encrypt & Decrypt Data (Frontend)

Example: Encrypting login credentials before sending to backend

import { encrypt, decrypt } from "crypto-utils-react";

const formData = {
  username: "test123",
  password: "Test@123",
  captcha: "ABT7Z",
};

const secretKey = "48jk3jh34093483784634908";

async function handleLogin() {
  const encryptedData = await encrypt((formData), secretKey);
  console.log("🔒 Encrypted Payload:", encryptedData);
  const decrypted = await decrypt(encryptedData, secretKey);
  console.log("🔒 decrypted Data:", encrypted);
}

🧠 Example Algorithm Flow

| Step | Process | Description | | ---- | ------------------------- | --------------------------------------------------------------------------------- | | 1 | PBKDF2 Key Derivation | Secret key is combined with a random salt to generate a strong derived key. | | 2 | AES-GCM Encryption | JSON payload is encrypted using AES-GCM with a random IV (initialization vector). | | 3 | Concatenation | Salt + IV + CipherText + AuthTag are merged into one byte array. | | 4 | Base64 Encoding | Final output is converted to Base64 string for easy transport over HTTP. |

🧩 Example Output

{
  "username": "test123",
  "password": "Test@123",
  "captcha": "ABT7Z"
}

After encryption →

AQIDCQsGHE8bUzZbSwYpBQIC... (Base64 string)

🧾 Notes

• Works in modern browsers supporting window.crypto.subtle
• Secure contexts required (https:// or localhost)
• Not designed for Node.js environments without Web Crypto polyfill
• Keep your secretKey safe and private — do not hardcode it

🛡️ License

MIT License © 2025 — Open-source & free to use in any React or JavaScript project.