Skip to content

πŸ” [WASM + JS] A fully client-side demo to explore Vaultic Crypto Engine's features β€” RSA, ECDSA, ECDH, AES-GCM β€” all in WebAssembly, running securely in your browser.

License

Notifications You must be signed in to change notification settings

vaultic-org/vaultic-crypto-engine-demo

Repository files navigation

Vaultic Crypto Engine Demo

License: MIT Made with React Made with TypeScript Made with Vite Netlify Status

Interactive demo application for the vaultic crypto-engine, showcasing browser-based cryptographic operations using WebAssembly.

πŸ”— Live Demo: crypto.vaultic.app

πŸš€ What it does

  • 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

πŸ’» System Requirements

  • Node.js 18.x or higher
  • pnpm 8.x or higher

πŸ“¦ Installation

git clone https://github.com/vaultic-org/vaultic-crypto-engine-demo
cd vaultic-crypto-engine-demo
pnpm install
pnpm run dev

πŸ”§ Tech Stack

  • React 19
  • TypeScript
  • Vite
  • TanStack Router
  • Tailwind CSS
  • WebAssembly

πŸ“š Usage Examples

Generate RSA Key Pair

import { generate_rsa_keypair_pem } from '@vaultic/crypto-engine';

const { public_pem, private_pem } = await generate_rsa_keypair_pem();

Encrypt a Message (Hybrid Encryption Automatically Applied)

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);

Decrypt a 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);

Protect a Key Pair with Password

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);

Protect a Message with Password

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
);

πŸ” Project Structure

/src
  /components - UI components
  /core - Core functionality
    /types - TypeScript interfaces
    /store - State management
  /hooks - Custom React hooks
  /pages - Application pages
  /routes - Router configuration

πŸ› Troubleshooting

  • If you encounter WebAssembly loading issues, ensure your browser supports WebAssembly
  • For encryption/decryption failures, check the console for detailed logs

🀝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'feat(feature): Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

πŸ“œ License

MIT β€” Β© Vaultic Org

About

πŸ” [WASM + JS] A fully client-side demo to explore Vaultic Crypto Engine's features β€” RSA, ECDSA, ECDH, AES-GCM β€” all in WebAssembly, running securely in your browser.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published