Interactive demo application for the vaultic crypto-engine, showcasing browser-based cryptographic operations using WebAssembly.
π Live Demo: crypto.vaultic.app
- Generates RSA 2048-bit key pairs (client-side, in-browser)
- Encrypts and decrypts messages locally via WebAssembly
- Auto-switches between direct RSA and hybrid RSA+AES encryption based on data size
- Supports key pair and message protection with password-based encryption
- Logs all steps and failures for educational/debugging purposes
- Provides a user-friendly interface to test cryptographic operations
- Node.js 18.x or higher
- pnpm 8.x or higher
git clone https://github.com/vaultic-org/vaultic-crypto-engine-demo
cd vaultic-crypto-engine-demo
pnpm install
pnpm run dev
- React 19
- TypeScript
- Vite
- TanStack Router
- Tailwind CSS
- WebAssembly
import { generate_rsa_keypair_pem } from '@vaultic/crypto-engine';
const { public_pem, private_pem } = await generate_rsa_keypair_pem();
import { rsa_encrypt_base64 } from '@vaultic/crypto-engine';
// Works with any message size - hybrid encryption is automatic
const ciphertext = await rsa_encrypt_base64(publicKeyPem, message);
import { rsa_decrypt_base64 } from '@vaultic/crypto-engine';
// Automatically detects and handles both direct RSA and hybrid encryption
const plaintext = await rsa_decrypt_base64(privateKeyPem, encryptedMessage);
import { protect_keypair, unprotect_keypair } from '@vaultic/crypto-engine';
// Encrypt keys with a password
const passphrase = "secure-password";
const protectedKeys = await protect_keypair(privatePem, publicPem, passphrase);
// Decrypt later with the same password
const recoveredKeys = await unprotect_keypair(protectedKeys, passphrase);
import { protect_message, unprotect_message } from '@vaultic/crypto-engine';
// Encrypt message with password
const secretMessage = "Confidential information";
const protectedMessage = await protect_message(secretMessage, passphrase);
// Decrypt with the same password
const decryptedMessage = await unprotect_message(
protectedMessage.ciphertext,
passphrase,
protectedMessage.salt,
protectedMessage.nonce
);
/src
/components - UI components
/core - Core functionality
/types - TypeScript interfaces
/store - State management
/hooks - Custom React hooks
/pages - Application pages
/routes - Router configuration
- If you encounter WebAssembly loading issues, ensure your browser supports WebAssembly
- For encryption/decryption failures, check the console for detailed logs
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'feat(feature): Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
MIT β Β© Vaultic Org