Nutrient React digital signature library

Nutrient supports creating and validating digital signatures with hand-drawn, scanned, or typed options. Signatures can be stored locally or remotely, and workflows can trigger based on signature actions. The UI is customizable, and client-side signing works without a dedicated server. The library also handles forms, annotations, and other PDF operations.

Signature support

Nutrient offers two types of signatures: electronic signatures and digital signatures.

1. Electronic signatures let users create signatures with ink drawings, bitmap images, or text. The Electronic Signatures component supports draw, image, and type modes, and it stores signatures for reuse.
2. Digital signatures use certificates to prove a document’s origin and detect unauthorized changes. Both signature types can be used together.

Nutrient’s React PDF library

We offer a commercial React.js PDF viewer library that integrates into web applications. It includes 30+ features for viewing, annotating, editing, and signing documents in the browser. The UI can be extended or simplified based on your needs.

• A prebuilt UI
• 15+ annotation tools for document collaboration
• Client-side PDF, MS Office, and image viewing
• Engineering support for integration

Why use Nutrient for React PDF digital signatures?

There are a few ways to add digital signatures to PDFs in a React application:

• Roll your own signing flow with low-level crypto libraries and a basic PDF renderer.
• Call a server-side signing service you build yourself on top of libraries like OpenSSL.
• Embed a complete React PDF signing component that handles viewing, form fields, certificates, and validation end to end.

Nutrient takes the third approach. Instead of wiring up a PDF renderer, form fields, certificate handling, and PKCS#7 signing manually, you embed a React PDF viewer with built-in signing. This provides:

• A React PDF viewer with annotations, forms, and a signing UI.
• Client-side signing using X.509 certificates and PKCS#7, keeping documents in the browser.
• Support for electronic signatures (drawn, typed, and image) and digital signatures (certificate-backed).
• A path to advanced scenarios like CAdES-style signatures and long-term validation as requirements grow.

Requirements

You need:

• Node.js(opens in a new tab) (latest version).
• A package manager compatible with npm. The examples below use Yarn(opens in a new tab) and npm(opens in a new tab) (installed with Node.js by default).

Creating a new React project with Vite

1. Create a new React app using Vite(opens in a new tab):

   yarn create vite nutrient-react-example --template react

   npm create vite@latest nutrient-react-example -- --template react

2. Change to the created project directory cd nutrient-react-example.

Adding Nutrient to your project

1. Add the Nutrient dependency:

   yarn add @nutrient-sdk/viewer

   npm install @nutrient-sdk/viewer

2. Self-hosting assets (recommended) — Copy the Nutrient library assets to your public folder:

cp -R node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib public/

Displaying a PDF

1. Add the PDF document you want to display to the public directory. You can use our demo document as an example.

2. Update src/index.css to ensure the viewer displays correctly. Remove or modify the default Vite styles:

   :root {
     font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
   }
   body {
     margin: 0;
     min-width: 320px;
     min-height: 100vh;
   }
   #root {
     width: 100%;
     height: 100vh;
   }

3. Add a component wrapper for the Nutrient library and save it as components/PdfViewerComponent.jsx:

   import { useEffect, useRef } from 'react';
     export default function PdfViewerComponent(props) {
         const containerRef = useRef(null);
         useEffect(() => {
             const container = containerRef.current;
             let NutrientViewer = null;
             (async () => {
                 NutrientViewer = (await import('@nutrient-sdk/viewer')).default;
                 NutrientViewer.unload(container); // Ensure there's only one Nutrient instance.
                 if (container && NutrientViewer) {
                     await NutrientViewer.load({
                         container,
                         document: props.document,
                         // Required when self-hosting assets.
                         baseUrl: `${window.location.protocol}//${window.location.host}/`,
                     });
                 }
             })();
             return () => {
                 if (NutrientViewer) {
                     NutrientViewer.unload(container);
                 }
             };
         }, [props.document]);
         return (
             <div
                 ref={containerRef}
                 style={{ width: '100%', height: '100vh' }}
             />
         );
     }

   Note: If using the CDN (not self-hosting), you can omit the baseUrl option.

4. Include the newly created component in App.jsx:

   import PdfViewerComponent from "./components/PdfViewerComponent";
   function App() {
     return (
       <div className="App" style={{ width: "100vw" }}>
         <div className="PDF-viewer">
           <PdfViewerComponent document={"document.pdf"} />
         </div>
       </div>
     );
   }
   export default App;

5. Your project structure should now look like this:

   nutrient-react-example
   ├── public
   │   ├── document.pdf
   │   └── nutrient-viewer-lib/   # Only if self-hosting
   ├── src
   │   ├── components
   │   |   └── PdfViewerComponent.jsx
   |   └── App.jsx
   ├── package.json
   └── yarn.lock

6. Start the app and run it in your default browser:

Adding a digital signature to a PDF using Nutrient

Nutrient requires an X.509 certificate(opens in a new tab) and a private key pair for adding a digital signature to a PDF document. To do this, follow the steps in the next section.

Step 1: Generating a self-signed certificate and private key

Generate a self-signed certificate and private key using OpenSSL(opens in a new tab):

1. Open your terminal in the project directory.
2. Run the following OpenSSL command to generate a self-signed certificate and private key:

openssl req -x509 -sha256 -nodes -newkey rsa:2048 -keyout private-key.pem -out cert.pem

• -x509 — Tells OpenSSL to create a self-signed certificate.
• -sha256 — Specifies the hash function to use for the certificate.
• -nodes — Prevents encryption of the private key. You can remove this option for production keys if encryption is desired.
• -newkey rsa:2048 — Generates a new RSA private key with a key size of 2,048 bits.
• -keyout private-key.pem — Specifies the name of the private key file.
• -out cert.pem — Specifies the name of the certificate file.

Follow the prompts to provide information for the certificate, such as the Common Name (CN), organization, and location. These details will be embedded in the certificate.

Step 2: Verifying your certificate

After generating the certificate and private key, you can verify if the certificate is correctly PEM-encoded using the following command:

openssl x509 -noout -text -in public/cert.pem

This command will display certificate details and shouldn’t produce any errors. It confirms that “cert.pem” is a PEM-encoded X.509 certificate.

Store these files securely. Never commit private keys to version control.

For more information on adding a digital signature to a PDF using Nutrient, refer to our digital signatures guide.

Signing a PDF document using Nutrient

To add a digital signature to your PDF document using Nutrient, follow the steps below.

Step 1: Installing the Forge library

Install the Forge(opens in a new tab) library using npm. Open your terminal, navigate to the project directory, and run the following command:

Step 2: Importing dependencies

Update the imports in your PdfViewerComponent.jsx file to include the Forge library and the useCallback hook:

import { useEffect, useRef, useCallback } from "react";
import forge from "node-forge";

Step 3: Generating the PKCS#7 signature

Nutrient utilizes the cryptographic Distinguished Encoding Rules (DER) PKCS#7(opens in a new tab) format for digital signatures. You’ll need to create a valid PKCS#7 signature containing your certificate and other relevant information.

Define a function, generatePKCS7, to generate the digital signature for your PDF. This function will perform the necessary cryptographic operations:

export default function PdfViewerComponent(props) {
  const containerRef = useRef(null);
  const generatePKCS7 = useCallback(({ fileContents }) => {
    const certificatePromise = fetch("cert.pem").then((response) =>
      response.text(),
    );
    const privateKeyPromise = fetch("private-key.pem").then((response) =>
      response.text(),
    );
    return new Promise((resolve, reject) => {
      Promise.all([certificatePromise, privateKeyPromise])
        .then(([certificatePem, privateKeyPem]) => {
          const certificate = forge.pki.certificateFromPem(certificatePem);
          const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
          const p7 = forge.pkcs7.createSignedData();
          p7.content = new forge.util.ByteBuffer(fileContents);
          p7.addCertificate(certificate);
          p7.addSigner({
            key: privateKey,
            certificate,
            digestAlgorithm: forge.pki.oids.sha256,
            authenticatedAttributes: [
              {
                type: forge.pki.oids.contentType,
                value: forge.pki.oids.data,
              },
              {
                type: forge.pki.oids.messageDigest,
              },
              {
                type: forge.pki.oids.signingTime,
                value: new Date(),
              },
            ],
          });
          p7.sign({ detached: true });
          const result = stringToArrayBuffer(
            forge.asn1.toDer(p7.toAsn1()).getBytes(),
          );
          resolve(result);
        })
        .catch(reject);
    });
  }, []);
  // Rest of the component...
}

This function fetches your certificate and private key, and then it uses Forge to create a PKCS#7 signed data structure.

Step 4: Converting a string to an array buffer

You’ll need a utility function, stringToArrayBuffer, to convert a binary string into an ArrayBuffer. Add this function inside your component:

function stringToArrayBuffer(binaryString) {
  const buffer = new ArrayBuffer(binaryString.length);
  let bufferView = new Uint8Array(buffer);
  for (let i = 0, len = binaryString.length; i < len; i++) {
    bufferView[i] = binaryString.charCodeAt(i);
  }
  return buffer;
}

Step 5: Initializing Nutrient and signing the document

Now you can initialize Nutrient and invoke the signDocument method. This method takes two arguments:

• Argument 1 — An object to fine-tune the signing process by providing data such as certificates and private keys. If you don’t have specific signing requirements, pass null.
• Argument 2 — A callback function that Nutrient calls with an object containing fileContents (an ArrayBuffer of the document’s content). Your callback must return a promise that resolves to the PKCS#7 signature as an ArrayBuffer.

useEffect(() => {
  const container = containerRef.current;
  let NutrientViewer = null;
  (async () => {
    try {
      NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
      NutrientViewer.unload(container); // Ensure there's only one Nutrient instance.
      const instance = await NutrientViewer.load({
        container,
        document: props.document,
        baseUrl: `${window.location.protocol}//${window.location.host}/`,
      });
      console.log("PDF loaded successfully.");
      // Only attempt signing if `enableSigning prop` is `true`.
      if (props.enableSigning) {
        try {
          await instance.signDocument(null, generatePKCS7);
          console.log("Document signed.");
        } catch (signError) {
          console.warn("Could not sign document:", signError.message);
        }
      }
    } catch (error) {
      console.error("Failed to load PDF:", error);
    }
  })();
  return () => {
    if (NutrientViewer) {
      NutrientViewer.unload(container);
    }
  };
}, [generatePKCS7, props.document, props.enableSigning]);

On success, the console logs “PDF loaded successfully.” followed by “Document signed.” Errors are logged if loading or signing fails.

Step 6: Enabling digital signing in App.jsx

Update src/App.jsx to enable signing by passing the enableSigning prop:

import PdfViewerComponent from "./components/PdfViewerComponent";
function App() {
  return (
    <div className="App" style={{ width: "100vw" }}>
      <div className="PDF-viewer">
        <PdfViewerComponent document={"document.pdf"} enableSigning={true} />
      </div>
    </div>
  );
}
export default App;

Complete PdfViewerComponent code

Here’s the complete code for the PdfViewerComponent:

101 collapsed lines
import { useEffect, useRef, useCallback } from "react";
import forge from "node-forge";
export default function PdfViewerComponent(props) {
  const containerRef = useRef(null);
  const generatePKCS7 = useCallback(({ fileContents }) => {
    const certificatePromise = fetch("cert.pem").then((response) =>
      response.text(),
    );
    const privateKeyPromise = fetch("private-key.pem").then((response) =>
      response.text(),
    );
    return new Promise((resolve, reject) => {
      Promise.all([certificatePromise, privateKeyPromise])
        .then(([certificatePem, privateKeyPem]) => {
          const certificate = forge.pki.certificateFromPem(certificatePem);
          const privateKey = forge.pki.privateKeyFromPem(privateKeyPem);
          const p7 = forge.pkcs7.createSignedData();
          p7.content = new forge.util.ByteBuffer(fileContents);
          p7.addCertificate(certificate);
          p7.addSigner({
            key: privateKey,
            certificate,
            digestAlgorithm: forge.pki.oids.sha256,
            authenticatedAttributes: [
              {
                type: forge.pki.oids.contentType,
                value: forge.pki.oids.data,
              },
              {
                type: forge.pki.oids.messageDigest,
              },
              {
                type: forge.pki.oids.signingTime,
                value: new Date(),
              },
            ],
          });
          p7.sign({ detached: true });
          const result = stringToArrayBuffer(
            forge.asn1.toDer(p7.toAsn1()).getBytes(),
          );
          resolve(result);
        })
        .catch(reject);
    });
  }, []);
  function stringToArrayBuffer(binaryString) {
    const buffer = new ArrayBuffer(binaryString.length);
    let bufferView = new Uint8Array(buffer);
    for (let i = 0, len = binaryString.length; i < len; i++) {
      bufferView[i] = binaryString.charCodeAt(i);
    }
    return buffer;
  }
  useEffect(() => {
    const container = containerRef.current;
    let NutrientViewer = null;
    (async () => {
      try {
        NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
        NutrientViewer.unload(container); // Ensure there's only one Nutrient instance.
        const instance = await NutrientViewer.load({
          container,
          document: props.document,
          baseUrl: `${window.location.protocol}//${window.location.host}/`,
        });
        console.log("PDF loaded successfully.");
        // Only attempt signing if `enableSigning` prop is `true`.
        if (props.enableSigning) {
          try {
            await instance.signDocument(null, generatePKCS7);
            console.log("Document signed.");
          } catch (signError) {
            console.warn("Could not sign document:", signError.message);
          }
        }
      } catch (error) {
        console.error("Failed to load PDF:", error);
      }
    })();
    return () => {
      if (NutrientViewer) {
        NutrientViewer.unload(container);
      }
    };
  }, [generatePKCS7, props.document, props.enableSigning]);
  return <div ref={containerRef} style={{ width: "100%", height: "100vh" }} />;
}

Final project structure

Your project structure should now look like this:

nutrient-react-example
├── public
│   ├── cert.pem
│   ├── document.pdf
│   ├── nutrient-viewer-lib/
│   └── private-key.pem
├── src
│   ├── components
│   │   └── PdfViewerComponent.jsx
│   ├── App.jsx
│   └── index.css
├── package.json
└── yarn.lock

After building, the signing process runs automatically when enableSigning={true} and the document reloads with the digital signature.

We recently added support for CAdES(opens in a new tab) signatures, which are advanced digital signatures. To learn more about CAdES signatures, refer to our digital signatures guide.

Conclusion

This tutorial covered adding digital signatures to PDF documents using React and Nutrient Web SDK — from project setup to certificate generation and PKCS#7 signing in the browser. To test this in your own project, request a free trial or visit the demo page.

FAQ

Explore related topics