|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Digital Signature Workflows in React PDF Viewer | Syncfusion |
| 4 | +description: Learn how to add signature fields and apply digital (PKI) signatures in the Syncfusion React PDF Viewer. |
| 5 | +platform: document-processing |
| 6 | +control: PdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Digital Signature Workflows |
| 11 | + |
| 12 | +This guide shows how to design signature fields, collect handwritten/typed e‑signatures in the browser, and apply **digital certificate (PKI) signatures** to PDF forms using the Syncfusion React PDF Viewer and the JavaScript PDF Library. Digital signatures provide **authenticity** and **tamper detection**, making them suitable for legally binding scenarios. |
| 13 | + |
| 14 | +## Overview |
| 15 | + |
| 16 | +A **digital signature** is a cryptographic proof attached to a PDF that verifies the signer’s identity and flags any post‑sign changes. It differs from a simple electronic signature (handwritten image/typed name) by providing **tamper‑evidence** and compliance with standards like CMS/PKCS#7. The Syncfusion **JavaScript PDF Library** exposes APIs to create and validate digital signatures programmatically, while the **React PDF Viewer** lets you design signature fields and capture handwritten/typed signatures in the browser. |
| 17 | + |
| 18 | +## Quick Start |
| 19 | + |
| 20 | +Follow these steps to add a **visible digital signature** to an existing PDF and finalize it. |
| 21 | + |
| 22 | +1. **Render the React PDF Viewer with form services** |
| 23 | + |
| 24 | +{% tabs %} |
| 25 | +{% highlight js tabtitle="Standalone" %} |
| 26 | +{% raw %} |
| 27 | +import * as ReactDOM from 'react-dom/client'; |
| 28 | +import * as React from 'react'; |
| 29 | +import { |
| 30 | + PdfViewerComponent, Inject, Toolbar, Magnification, Navigation, |
| 31 | + LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, |
| 32 | + Annotation, FormFields, FormDesigner |
| 33 | +} from '@syncfusion/ej2-react-pdfviewer'; |
| 34 | + |
| 35 | +function App() { |
| 36 | + return ( |
| 37 | + <div className='control-section'> |
| 38 | + <PdfViewerComponent |
| 39 | + id="container" |
| 40 | + documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf" |
| 41 | + resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" |
| 42 | + style={{ height: '640px' }}> |
| 43 | + <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} /> |
| 44 | + </PdfViewerComponent> |
| 45 | + </div> |
| 46 | + ); |
| 47 | +} |
| 48 | + |
| 49 | +ReactDOM.createRoot(document.getElementById('sample')!).render(<App />); |
| 50 | +{% endraw %} |
| 51 | +{% endhighlight %} |
| 52 | +{% endtabs %} |
| 53 | + |
| 54 | +The Viewer requires **FormFields** and **FormDesigner** services for form interaction and design, and `resourceUrl` for proper asset loading in modern setups. |
| 55 | + |
| 56 | +2. **Place a signature field (UI or API)** |
| 57 | + - **UI:** Open **Form Designer** → choose **Signature Field** → click to place → configure properties like required, tooltip, and thickness. |
| 58 | +  |
| 59 | + - **API:** Use `addFormField('SignatureField', options)` to create a signature field programmatically. |
| 60 | + |
| 61 | +{% tabs %} |
| 62 | +{% highlight js tabtitle="Standalone" %} |
| 63 | +{% raw %} |
| 64 | +const viewerRef = React.useRef<PdfViewerComponent>(null); |
| 65 | + |
| 66 | +const onDocumentLoad = () => { |
| 67 | + viewerRef.current?.formDesignerModule.addFormField('SignatureField', { |
| 68 | + name: 'ApproverSignature', |
| 69 | + pageNumber: 1, |
| 70 | + bounds: { X: 72, Y: 640, Width: 220, Height: 48 }, |
| 71 | + isRequired: true, |
| 72 | + tooltip: 'Sign here' |
| 73 | + }); |
| 74 | +}; |
| 75 | +{% endraw %} |
| 76 | +{% endhighlight %} |
| 77 | +{% endtabs %} |
| 78 | + |
| 79 | +3. **Apply a PKI digital signature (JavaScript PDF Library)** |
| 80 | + |
| 81 | +The library provides `PdfSignatureField` and `PdfSignature.create(...)` for PKI signing with algorithms such as **SHA‑256**. |
| 82 | + |
| 83 | +```ts |
| 84 | +import { |
| 85 | + PdfDocument, PdfSignatureField, PdfSignature, |
| 86 | + CryptographicStandard, DigestAlgorithm |
| 87 | +} from '@syncfusion/ej2-pdf'; |
| 88 | + |
| 89 | +// Load existing PDF bytes (base64/ArrayBuffer) |
| 90 | +const document = new PdfDocument(data); |
| 91 | +const page = document.getPage(0); |
| 92 | + |
| 93 | +// Create a visible signature field if needed |
| 94 | +const field = new PdfSignatureField(page, 'ApproverSignature', { |
| 95 | + x: 72, y: 640, width: 220, height: 48 |
| 96 | +}); |
| 97 | + |
| 98 | +// Create a CMS signature using a PFX (certificate + private key) |
| 99 | +const signature = PdfSignature.create( |
| 100 | + { cryptographicStandard: CryptographicStandard.cms, digestAlgorithm: DigestAlgorithm.sha256 }, |
| 101 | + certData, |
| 102 | + password |
| 103 | +); |
| 104 | + |
| 105 | +field.setSignature(signature); |
| 106 | +document.form.add(field); |
| 107 | + |
| 108 | +const signedBytes = await document.save('signed.pdf'); |
| 109 | +document.destroy(); |
| 110 | +``` |
| 111 | + |
| 112 | +4. **Finalize by flattening** |
| 113 | +Set `PdfDocument.flatten = true` to make annotations and form fields permanent. (The Viewer UI itself does not flatten; use the PDF Library in your pipeline.) |
| 114 | + |
| 115 | +```ts |
| 116 | +import { PdfDocument } from '@syncfusion/ej2-pdf'; |
| 117 | + |
| 118 | +const doc = new PdfDocument(signedBytes); |
| 119 | +doc.flatten = true; // flattens annotations and form fields |
| 120 | +const finalBytes = await doc.save('final.pdf'); |
| 121 | +doc.destroy(); |
| 122 | +``` |
| 123 | + |
| 124 | +N> For sequential or multi‑user flows and digital signature appearances, see these live demos: [eSigning PDF Form](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/esigning-pdf-forms), [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/visible-digital-signature) in the React Sample Browser. |
| 125 | + |
| 126 | +## How‑to guides |
| 127 | + |
| 128 | +### Add a signature field (UI) |
| 129 | +Use the Form Designer toolbar to place a **Signature Field** where signing is required. Configure indicator text, required state, and tooltip in the properties pane. |
| 130 | + |
| 131 | +  |
| 132 | + |
| 133 | +### Add a signature field (API) |
| 134 | + |
| 135 | +Adds a signature field programmatically at the given bounds. |
| 136 | + |
| 137 | +{% tabs %} |
| 138 | +{% highlight js tabtitle="Standalone" %} |
| 139 | +{% raw %} |
| 140 | +viewerRef.current?.formDesignerModule.addFormField('SignatureField', { |
| 141 | + name: 'CustomerSign', |
| 142 | + pageNumber: 1, |
| 143 | + bounds: { X: 56, Y: 700, Width: 200, Height: 44 }, |
| 144 | + isRequired: true |
| 145 | +}); |
| 146 | +{% endraw %} |
| 147 | +{% endhighlight %} |
| 148 | +{% endtabs %} |
| 149 | + |
| 150 | +### Capture handwritten/typed signature in the browser |
| 151 | + |
| 152 | +When users click a signature field at runtime, the Viewer’s dialog lets them **draw**, **type**, or **upload** a handwritten signature image—no plugin required—making it ideal for quick approvals. |
| 153 | + |
| 154 | +  |
| 155 | + |
| 156 | +N> For a ready‑to‑try flow that routes two users to sign their own fields and then finalize, open [eSigning PDF Form](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/esigning-pdf-forms) in the sample browser. |
| 157 | + |
| 158 | +### Apply a PKI digital signature |
| 159 | + |
| 160 | +Use the **JavaScript PDF Library** to apply a cryptographic signature on a field, with or without a visible appearance. See the **Digital Signature** documentation for additional options (external signing callbacks, digest algorithms, etc.). |
| 161 | + |
| 162 | +N> To preview visual differences, check the [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/visible-digital-signature) in our Sample Browser. Digital Signature samples in the React sample browser. |
| 163 | + |
| 164 | +### Finalize a signed document (flatten/lock) |
| 165 | + |
| 166 | +After collecting all signatures and passing validations, **flatten** the PDF (and optionally restrict permissions) to prevent further edits. Use `PdfDocument.flatten` when saving the file. |
| 167 | + |
| 168 | +## Signature Workflow Best Practices (Explanation) |
| 169 | + |
| 170 | +Designing a well‑structured signature workflow ensures clarity, security, and efficiency when working with PDF documents. Signature workflows typically involve multiple participants—reviewers and approvers each interacting with the document at different stages. |
| 171 | + |
| 172 | +### Why structured signature workflows matter |
| 173 | + |
| 174 | +A clear signature workflow prevents improper edits, guarantees document authenticity, and reduces bottlenecks during review cycles. When multiple stakeholders sign or comment on a document, maintaining order is crucial for compliance, traceability, and preventing accidental overwrites. |
| 175 | + |
| 176 | +### Choosing the appropriate signature type |
| 177 | + |
| 178 | +Different business scenarios require different signature types. Consider the purpose, regulatory requirements, and level of trust demanded by the workflow. |
| 179 | + |
| 180 | +- **Handwritten/typed (electronic) signature** – Best for informal approvals, acknowledgments, and internal flows. (Captured via the Viewer’s signature dialog.) |
| 181 | + |
| 182 | +  |
| 183 | + |
| 184 | +- **Digital certificate signature (PKI)** – Required for legally binding contracts and tamper detection with a verifiable signer identity. (Created with the JavaScript PDF Library.) |
| 185 | + |
| 186 | +N> You can explore and try out live demos for [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/visible-digital-signature) in our Sample Browser. |
| 187 | + |
| 188 | +### Pre‑signing validation checklist |
| 189 | + |
| 190 | +To prevent rework, validate the PDF before enabling signatures: |
| 191 | +- Confirm all **required form fields** are completed (names, dates, totals). (See [Form Validation](../forms/form-validation).) |
| 192 | +- Re‑validate key values (financial totals, tax calculations, contract amounts). |
| 193 | +- Lock or restrict editing during review to prevent unauthorized changes. |
| 194 | +- Use [annotations](../annotation/overview) and [comments](../annotation/comments) for clarifications before signing. |
| 195 | + |
| 196 | +### Role‑based authorization flow |
| 197 | + |
| 198 | +- **Reviewer** – Reviews the document and adds [comments/markups](../annotation/comments). Avoid placing signatures until issues are resolved. |
| 199 | +  |
| 200 | +- **Approver** – Ensures feedback is addressed and signs when finalized. |
| 201 | +  |
| 202 | +- **Final Approver** – Verifies requirements, then [flattens](../document-handling/preprocess-pdf#flatten-form-fields--annotations) or [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and may restrict further edits. |
| 203 | + |
| 204 | +N> **Implementation tip:** Use the PDF Library’s `flatten` when saving to make annotations and form fields permanent after the last signature. |
| 205 | + |
| 206 | +### Multi‑signer patterns and iterative approvals |
| 207 | +- Route the document through a defined **sequence of signers**. |
| 208 | +- Use [comments and replies](../annotation/comments#add-comments-and-replies) for feedback without altering document content. |
| 209 | +- For external participants, share only annotation data (XFDF/JSON) when appropriate instead of the full PDF. |
| 210 | +- After all signatures, **flatten** to lock the file. |
| 211 | + |
| 212 | +N> Refer to [eSigning PDF Forms](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/esigning-pdf-forms) sample that shows two signers filling only their designated fields and finalizing the document. |
| 213 | + |
| 214 | +### Security, deployment, and audit considerations |
| 215 | + |
| 216 | +- **Restrict access:** Enforce authentication and role‑based permissions. |
| 217 | +- **Secure endpoints:** Protect PDF endpoints with token‑based access and authorization checks. |
| 218 | +- **Audit and traceability:** Log signature placements, edits, and finalization events for compliance and audits. |
| 219 | +- **Data protection:** Avoid storing sensitive PDFs on client devices; prefer secure server storage and transmission. |
| 220 | +- **Finalize:** After collecting all signatures, flatten or lock to prevent edits. |
| 221 | + |
| 222 | +## See also |
| 223 | +- [Create and Modify Annotation](../annotation/create-modify-annotation) |
| 224 | +- [Customize Annotation](../annotation/customize-annotation) |
| 225 | +- [Digital Signature - JavaScript PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) |
| 226 | +- [Handwritten Signature](../annotation/signature-annotation) |
| 227 | +- [Form Fields API](../form-fields-api) |
| 228 | +- [Add Digital Signature](./add-digital-signature-react) |
| 229 | +- [Customize Signature Appearance](./customize-signature-appearance) |
| 230 | +- [Signature workflows](./signature-workflow) |
0 commit comments