In the digital age, ensuring the authenticity and integrity of documents and messages is paramount. Digital signatures provide a robust way to verify the identity of the sender and ensure the data has not been tampered with. This blog will guide you through the process of generating a digital signature in a React JS application.

What is a Digital Signature?

A digital signature is a mathematical scheme for verifying the authenticity of digital messages or documents. It uses cryptographic techniques to ensure that a message has been created by a known sender and that it has not been altered in transit.

Prerequisites

Before we dive into the implementation, ensure you have the following:

1. Basic knowledge of React JS.
2. Node.js and npm installed on your machine.
3. A text editor or an IDE like Visual Studio Code.

Setting Up the React Project

First, let's create a new React application. Open your terminal and run the following command:

npx create-react-app digital-signature-app


cd digital-signature-app

Next, we need to install the react-signature-canvas package, which will help us generate the digital signature. Run the following command to install it:

npm install react-signature-canvas

Creating the Digital Signature Component

Now, let's create a component to handle the digital signature generation. Create a new file named DigitalSignature.js inside the src folder and add the following code:

import React, { useState } from 'react'

import SignatureCanvas from 'react-signature-canvas'

const DigitalSignature = () => {

  const [penColor,setPenColor] = useState('black')

  const [signature,setSignature] = useState()

  const [result, setResult] = useState(null)

  const handlerClear = () =>{

    signature.clear()

    setResult(null)

  }

  const handlerSave = () =>{

    const res = signature.getTrimmedCanvas().toDataURL('image/jpeg')

    setResult(res)

  }

  return (

    <div>

   <select value={penColor} onChange={(e)=>setPenColor(e.target.value)}>

   <option value="red">Red</option>

   <option value="green">Green</option>

   <option value="black">Black</option>

   </select>

   <div style={{height:'20px',width:'20px',borderRadius:'50%',background:${penColor}}}>

   </div>

   <div style={{width: 500, height: 200,border:1px solid ${penColor}}} >

   <SignatureCanvas

   penColor={penColor}

   ref={(ref) => setSignature(ref)}

   canvasProps={{width: 500, height: 200, className: 'sigCanvas'}} 

   backgroundColor="rgba(255,255,255,1)"   

   />

   </div>

   <button onClick={handlerClear}>Clear</button>

   <button onClick={handlerSave}>Save</button>

   {

    result && (

      <div>

      <img src={result}/>

      <a href={result} download>

      Download

      </a>

      </div>

    )

   }

  

    </div>

  )

}

export default DigitalSignature

Using the Component in Your App

To use this component in your application, open the App.js file and import the DigitalSignature component:

import React from 'react';

import DigitalSignature from './DigitalSignature';

import './App.css';

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1>Digital Signature Generator</h1>

        <DigitalSignature />

      </header>

    </div>

  );

}

export default App;

Running the Application

Now, let's run the application to see it in action. In your terminal, execute the following command:

npm start

Open your browser and navigate to http://localhost:3000. You should see the Digital Signature Generator interface.

Conclusion

You've now built a simple digital signature generator in React JS. Digital signatures are essential for maintaining the integrity and authenticity of digital communications, and with this setup, you can integrate them into your applications.