encrypt-react
v1.0.0
Published
A React hook that enables automatic AES encryption and decryption for Axios requests and responses.
Maintainers
Readme
🔐 encrypt-react
A lightweight React hook that encrypts outgoing Axios requests and decrypts incoming responses using AES-256-CBC. Designed to work seamlessly with a secure Express backend using the encrypt-express middleware.
📦 Built for full-stack encrypted communication.
📦 Installation
npm install encrypt-reactRequires React 16.8+ and
axios.
🚀 Quick Start
Step 1: Import and Use the Hook
import React from 'react';
import axios from 'axios';
import { useAxiosEncrypt } from 'encrypt-react';
const SECRET_KEY = 'YOUR_64_CHARACTER_HEX_KEY'; // 32-byte hex key
function App() {
useAxiosEncrypt(SECRET_KEY); // Enables encryption/decryption globally
const sendData = async () => {
const res = await axios.post('/api/test', { message: 'Hello World' });
console.log(res.data);
};
return (
<div>
<button onClick={sendData}>Send Encrypted Data</button>
</div>
);
}
export default App;⚙️ How It Works
- Outgoing requests are encrypted automatically if the body is an object.
- Incoming responses are decrypted if they follow the
{ data: "<encrypted>" }format. - Axios interceptors are attached and detached automatically via
useEffect.
🔐 Encryption Details
- Algorithm: AES-256-CBC (via
crypto-js) - Key: 64-character hex string (32 bytes)
- IV: Random 16-byte IV prepended to the ciphertext
The backend must use the same encryption logic. Check out
encrypt-expressfor a drop-in Express middleware.
🧪 Example Encrypted Payload
{
"data": "3e1f7f9b3e3b7a2a1e...:7a8f21cb7b95d9e1..."
}✅ Requirements
- React 16.8 or newer
axiosinstalled- A 64-character hex key for consistent AES encryption
🤝 Backend Integration
This package is designed to work with the encrypt-express middleware for automatic decryption on the server and encrypted responses back to the client.
🧠 Tips
- Use environment variables to manage your secret key securely.
- Ensure all requests are made over HTTPS to prevent MITM attacks.
- Only encrypt JSON payloads; avoid encrypting
FormDataor binary blobs.
📄 License
MIT License
👨💻 Author
Made with security in mind by @Sonu. Contributions and feedback are welcome!
