fbpx

PDF Signing in React

by Marija•Posted on

At Agilno, we pride ourselves on delivering innovative and efficient solutions tailored to meet the specific needs of our clients. One of the challenges we’ve encountered is handling PDF signing and form filling within applications. Today, we want to share our experience with using SimplePDF to streamline these tasks directly within your web app, enhancing user experience and maintaining control over your data.

Why Handle PDF Signing and Form Filling In-App?

Handling PDF signing and form filling within your application offers several advantages over redirecting users to third-party sites or apps. Here’s why integrating this functionality directly into your app is a superior choice:

Advantages of In-App PDF Handling:

  • Enhanced User Experience: Users can complete tasks without leaving your application, reducing friction and improving overall satisfaction. A seamless experience keeps users engaged and more likely to complete the necessary actions.
  • Increased Security: By handling documents within your app, you maintain control over data security, reducing risks associated with third-party data breaches. Sensitive information remains within your ecosystem, adhering to your security protocols.
  • Customization and Branding: Integrating PDF handling allows for consistent branding and customization, aligning with your application’s design and user interface. Maintain a professional look and feel without the interruption of third-party interfaces.
  • Data Control and Storage: Direct integration enables using S3 buckets as an efficient data storage solution, ensuring easy access and management of signed documents. Keep a comprehensive record of all documents within your database, simplifying retrieval and auditing processes.

Potential Drawbacks:

  • Initial Setup and Maintenance: Implementing PDF handling features requires initial development time and resources. Ongoing maintenance is necessary to ensure the functionality remains up-to-date and secure.
  • Complexity for Non-Technical Users: Users who are not tech-savvy might face a learning curve when using new in-app features, though this can be mitigated with intuitive design and thorough user guides.

About the NAITUR Project

NAITUR is a dashboard platform that enables psychedelic practitioners and their therapists to document their experiences after using psychedelics. The goal is to provide researchers and therapists with a better understanding of psychedelics  through the collected data. The documentation of the experiences is done by filling out forms and documents on the user side and reviewing/confirming them on the therapist’s side of the app.

SimplePDF Implementation in NAITUR Project

NAITUR platform needed a comprehensive solution for handling PDF documents within their web application. Their requirements included both a user and a therapist side, each with specific functionalities.

Requirements:

Therapist Side: Therapists needed the ability to upload PDF files, store them in the database, review edited files, and further edit and sign them after the users.

User Side: Users needed to open the uploaded PDFs, fill out the forms, sign them, and re-upload the completed documents.

Solution:

To meet NAITUR’s requirements, we utilized SimplePDF along with its S3 bucket integration to create a seamless PDF handling process within their application.

Using SimplePDF, therapists could easily upload PDFs, securely store them in S3 buckets, and retrieve them for review, editing, and signing as needed. SimplePDF allows users to perform these tasks directly within the web app, without leaving the application.

For enabling access of SimplePDF to our S3 bucket, we used the instructions provided by SimplePDF. The only change required was a modification to our bucket’s CORS configuration:

CORS configuration for PDF handling in React using SimplePDF with S3 bucket

Since we used NextJS to develop NAITUR’s Frontend, we embedded SimplePDF by using the EmbedPDF React component:

import { IUserDocument } from '@/app/types/apiTypes';
import { useCallback, useRef } from 'react';
import { EmbedPDF, EmbedEvent } from '@simplepdf/react-embed-pdf';
import { TOAST_MESSAGES } from '@/app/constants';
import { toast } from 'react-toastify';
import { useSelector } from 'react-redux';
import { RootState } from '@/app/store/store';
import { useRouter } from 'next/navigation';

interface IClientDocumentResponsesProps {
  selectedDocument: IUserDocument | null;
  adminUserDocument: IUserDocument | null;
}

const ClientDocumentResponses = ({
  selectedDocument = null,
  adminUserDocument,
}: IClientDocumentResponsesProps) => {
  const simplePDFAnchor = useRef<HTMLAnchorElement>(null);

  const currentUserId = useSelector(
    (state: RootState) => state.user.currentUser?.id
  );
  const selectedDocumentFileUrl =
    selectedDocument?.file_url || selectedDocument?.document.file;

  const router = useRouter();

  const handleEmbedEvent = useCallback(
    async (event: EmbedEvent) => {
      if (event.type === 'SUBMISSION_SENT') {
        toast.success(TOAST_MESSAGES.documentSubmitSuccess);
        router.back();
      }
    },
    [router]
  );

  return (
    <EmbedPDF
      context={{
        documentId: selectedDocument?.document.id,
        userId: currentUserId,
        userDocumentId: adminUserDocument?.id,
      }}
      companyIdentifier={process.env.NEXT_PUBLIC_SIMPLE_PDF_IDENTIFIER}
      onEmbedEvent={handleEmbedEvent}
    >
      <a
        ref={simplePDFAnchor}
        href={selectedDocumentFileUrl as string}
        style={{ display: 'none' }}
        target='_blank'
        rel='noopener noreferrer'
        aria-hidden='true'
      ></a>
    </EmbedPDF>
  );
};

export default ClientDocumentResponses;

Conclusion

Integrating PDF signing and form filling directly into your web application using tools like SimplePDF offers significant benefits, including enhanced user experience, increased security, and better data control. 

A special shoutout to the SimplePDF team who were incredibly responsive to all our questions. Their swift and genuine willingness to make adjustments and fix bugs significantly contributed to the success of the integration.

At Agilno, we are committed to delivering tailored solutions that meet our clients’ unique needs. If you’re looking to streamline your document handling processes, we’re here to help. Contact us today to learn more about how we can enhance your application’s functionality and user experience.

For more technical insights and solutions, stay tuned to our blog or contact us at hello@agilno.com

More Articles