Veriza SDK

A PKI-powered digital signing SDK that enables secure PDF document signing using digital certificates (.pfx/.p12). Built for seamless integration into any web application.

Features

• 🔐 PKI Digital Signatures - Sign PDFs with X.509 certificates
• 📄 PDF Signing - Single and bulk document signing
• ✅ Certificate Validation - Validate .pfx/.p12 certificates before signing
• ⚛️ React Components - Pre-built UI for quick integration
• 🎨 Styled with Tailwind - Modern, customizable design
• 📦 Framework Agnostic - Core SDK works with any JavaScript framework

Installation

npm install veriza

That's it! All dependencies are bundled. Just make sure you have react and react-dom in your project (which you already do if you're building a React app).

Quick Start

Option 1: React Components (Recommended)

The easiest way to add digital signing to your React app:

import { PublicSignClient } from 'veriza/react';
import 'veriza/styles.css';

function SigningPage() {
  return (
    <div className="container mx-auto p-4">
      <h1>Sign Your Document</h1>
      <PublicSignClient />
    </div>
  );
}

That's it! The PublicSignClient component provides a complete signing workflow:

1. Upload PDF document
2. Place signature on the document
3. Upload and validate certificate (.pfx/.p12)
4. Sign and download

Option 2: Certificate Authentication Only

If you only need certificate validation:

import { CertificateAuth } from 'veriza/react';
import 'veriza/styles.css';

function CertificatePage() {
  const handleAuthenticated = (certInfo, certFile, password) => {
    // User has successfully validated their certificate
    console.log('Signer:', certInfo.commonName);
    console.log('Organization:', certInfo.organization);
    console.log('Valid until:', certInfo.validTo);
    
    // Now you can use certFile and password for signing
  };

  return (
    <CertificateAuth onAuthenticated={handleAuthenticated} />
  );
}

Usage with Other Frameworks

For Vue, Svelte, Angular, or vanilla JavaScript, use the core SDK:

Validate a Certificate

import { parsePfxCertificate } from 'veriza';

async function validateCertificate(file: File, password: string) {
  const buffer = await file.arrayBuffer();
  
  try {
    const certInfo = await parsePfxCertificate(buffer, password);
    
    console.log('Certificate Details:');
    console.log('- Name:', certInfo.commonName);
    console.log('- Organization:', certInfo.organization);
    console.log('- Email:', certInfo.email);
    console.log('- Issuer:', certInfo.issuer);
    console.log('- Valid From:', certInfo.validFrom);
    console.log('- Valid To:', certInfo.validTo);
    console.log('- Is Valid:', certInfo.isValid);
    
    return certInfo;
  } catch (error) {
    console.error('Invalid certificate or password');
    throw error;
  }
}

Sign a PDF

import { signPdfApi, downloadSignedPdf } from 'veriza';

async function signDocument(
  pdfFile: File,
  certificateFile: File,
  certificatePassword: string
) {
  try {
    const signedBlob = await signPdfApi({
      pdf: pdfFile,
      pfx: certificateFile,
      payload: {
        SignerID: 'user-123',           // Your user identifier
        docID: 'doc-456',               // Your document identifier
        password: certificatePassword,
        page: 1,                         // Page number for signature
        offsetX: 100,                    // X position (from left)
        offsetY: 100,                    // Y position (from bottom)
        width: 200,                      // Signature width
        height: 80,                      // Signature height
        is_SignatureVisible: true,       // Show visual signature
        is_SigningInfoShown: true,       // Show signer info
      },
      onUploadProgress: (percent) => {
        console.log(`Upload progress: ${percent}%`);
      },
    });

    // Download the signed PDF
    downloadSignedPdf(signedBlob, pdfFile.name);
    
  } catch (error) {
    console.error('Signing failed:', error.message);
  }
}

Bulk Sign Multiple PDFs

import { bulkSignPdfApi, downloadBulkSignedZip } from 'veriza';

async function signMultipleDocuments(
  pdfFiles: File[],
  certificateFile: File,
  certificatePassword: string
) {
  const signedZip = await bulkSignPdfApi({
    pdfs: pdfFiles,
    pfx: certificateFile,
    payload: {
      SignerID: 'user-123',
      docID: 'batch-001',
      password: certificatePassword,
      page: 1,
      offsetX: 100,
      offsetY: 100,
      width: 200,
      height: 80,
      is_SignatureVisible: true,
      is_SigningInfoShown: true,
    },
    onProgress: (completed, total) => {
      console.log(`Signed ${completed} of ${total} documents`);
    },
  });

  // Download all signed PDFs as a ZIP
  downloadBulkSignedZip(signedZip, 'signed-documents.zip');
}

Next.js Integration

For Next.js apps, use dynamic imports to prevent SSR issues:

import dynamic from 'next/dynamic';

const PublicSignClient = dynamic(
  () => import('veriza/react').then((mod) => mod.PublicSignClient),
  { ssr: false, loading: () => <p>Loading...</p> }
);

const CertificateAuth = dynamic(
  () => import('veriza/react').then((mod) => mod.CertificateAuth),
  { ssr: false }
);

export default function SignPage() {
  return <PublicSignClient />;
}

API Reference

Functions

| Function | Description | |----------|-------------| | parsePfxCertificate(buffer, password) | Validate and parse a .pfx/.p12 certificate | | signPdfApi(options) | Sign a single PDF document | | bulkSignPdfApi(options) | Sign multiple PDF documents | | downloadSignedPdf(blob, filename) | Download a signed PDF | | downloadBulkSignedZip(blob, filename) | Download bulk signed PDFs as ZIP |

React Components

| Component | Description | |-----------|-------------| | PublicSignClient | Complete signing workflow UI | | CertificateAuth | Certificate upload and validation UI |

Types

import type { 
  ICertificateInfo,    // Certificate details after parsing
  PdfSignPayload,      // Signing parameters
  SignApiOptions,      // Options for signPdfApi
  BulkSignApiOptions,  // Options for bulkSignPdfApi
} from 'veriza';

// ICertificateInfo structure
interface ICertificateInfo {
  commonName: string;      // Signer's name
  organization?: string;   // Organization
  email?: string;          // Email address
  issuer: string;          // Certificate issuer
  validFrom: string;       // Start date (ISO string)
  validTo: string;         // Expiry date (ISO string)
  serialNumber: string;    // Certificate serial
  isValid: boolean;        // Currently valid?
}

Styling

The SDK uses Tailwind CSS. Import the pre-built styles:

import 'veriza/styles.css';

Requirements

| Package | Version | |---------|---------| | Core SDK | Any JavaScript environment | | React Components | React 17+ |

License

ISC