React GSP Security

A high-security encryption/decryption React package with reusable components and hooks for modern web applications.

Features

• 🔐 High-Security Encryption: AES-GCM with PBKDF2 key derivation
• 🪝 React Hooks: Easy-to-use hooks for encryption operations
• 🧩 Reusable Components: Pre-built secure components
• 💾 Secure Storage: Encrypted localStorage with automatic encryption/decryption
• 🔑 Password Generation: Cryptographically secure password generation
• 📱 TypeScript: Full TypeScript support with type definitions
• 🧪 Well Tested: Comprehensive test coverage
• 📦 Zero Dependencies: Only requires React as peer dependency

Installation

npm install react-gsp-security

Quick Start

Basic Encryption/Decryption

import React, { useState } from 'react';
import { useCrypto } from 'react-gsp-security';

function MyComponent() {
  const [plainText, setPlainText] = useState('');
  const [password, setPassword] = useState('');
  const [encryptedData, setEncryptedData] = useState(null);
  
  const { encrypt, decrypt, isLoading, error } = useCrypto();

  const handleEncrypt = async () => {
    const result = await encrypt(plainText, password);
    if (result) {
      setEncryptedData(result);
    }
  };

  const handleDecrypt = async () => {
    if (encryptedData) {
      const result = await decrypt({
        ...encryptedData,
        password
      });
      console.log('Decrypted:', result);
    }
  };

  return (
    <div>
      <input 
        value={plainText} 
        onChange={(e) => setPlainText(e.target.value)}
        placeholder="Enter text to encrypt"
      />
      <input 
        type="password"
        value={password} 
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Enter password"
      />
      <button onClick={handleEncrypt} disabled={isLoading}>
        Encrypt
      </button>
      <button onClick={handleDecrypt} disabled={isLoading}>
        Decrypt
      </button>
      {error && <p>Error: {error}</p>}
    </div>
  );
}

Secure Storage

import React from 'react';
import { useSecureStorage } from 'react-gsp-security';

function UserProfile() {
  const { value, setValue, isLoading } = useSecureStorage('userProfile', {
    storageKey: 'myapp',
    password: 'user-specific-password'
  });

  const saveProfile = async () => {
    await setValue({
      name: 'John Doe',
      email: '[email protected]',
      preferences: { theme: 'dark' }
    });
  };

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <p>Name: {value?.name}</p>
          <p>Email: {value?.email}</p>
          <button onClick={saveProfile}>Save Profile</button>
        </div>
      )}
    </div>
  );
}

Secure Text Input Component

import React, { useState } from 'react';
import { SecureTextInput } from 'react-gsp-security';

function SecureForm() {
  const [encryptedValue, setEncryptedValue] = useState('');
  
  return (
    <SecureTextInput
      password="my-encryption-key"
      placeholder="Enter sensitive data..."
      onChange={(encrypted, plain) => {
        setEncryptedValue(encrypted || '');
        console.log('Plain text:', plain);
      }}
      className="w-full p-2 border rounded"
    />
  );
}

Demo Component

import React from 'react';
import { EncryptionDemo } from 'react-gsp-security';

function App() {
  return (
    <div className="container mx-auto p-4">
      <EncryptionDemo className="max-w-2xl mx-auto" />
    </div>
  );
}

API Reference

Hooks

useCrypto()

Hook for encryption and decryption operations.

Returns:

• encrypt(data: string, password: string): Encrypts data
• decrypt(params: DecryptionParams): Decrypts data
• isLoading: boolean: Loading state
• error: string | null: Error message
• clearError(): Clears current error

useSecureStorage<T>(key: string, options: SecureStorageOptions)

Hook for secure localStorage operations with automatic encryption.

Parameters:

• key: Storage key
• options: Storage configuration

Returns:

• value: T | null: Current stored value
• setValue(value: T): Sets encrypted value
• removeValue(): Removes value
• isLoading: boolean: Loading state
• error: string | null: Error message

Components

SecureTextInput

Text input component with automatic encryption.

Props:

• password: string: Encryption password
• onChange?: (encrypted: string | null, plain: string) => void: Change handler
• autoEncrypt?: boolean: Enable automatic encryption (default: true)
• All standard input props

EncryptionDemo

Demo component showcasing encryption/decryption functionality.

Props:

• className?: string: Additional CSS classes

Utilities

encryptData(data: string, password: string, iterations?: number)

Encrypts data using AES-GCM with PBKDF2 key derivation.

decryptData(params: DecryptionParams)

Decrypts previously encrypted data.

generateSecurePassword(length?: number)

Generates a cryptographically secure password.

SecureStorage

Class for managing encrypted localStorage operations.

Security Features

• AES-GCM Encryption: Industry-standard authenticated encryption
• PBKDF2 Key Derivation: 100,000+ iterations for key stretching
• Random Salt & IV: Unique salt and initialization vector for each encryption
• Web Crypto API: Uses browser's native cryptographic functions
• No Key Storage: Keys are derived from passwords, never stored

Browser Compatibility

Requires modern browsers with Web Crypto API support:

• Chrome 37+
• Firefox 34+
• Safari 7+
• Edge 12+

Development

# Install dependencies
npm install

# Run tests
npm test

# Build library
npm run build:lib

# Run development server with demo
npm run dev

Testing

The package includes comprehensive tests for all functionality:

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Security Considerations

• Always use strong, unique passwords for encryption
• Never hardcode passwords in your application
• Consider using environment variables or user-provided passwords
• Be aware that client-side encryption can be inspected by users
• For maximum security, combine with server-side encryption

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.