Complete document creation and signing process for React SaaS

Generate JWT on your back-end to authorize users
Mount form builder component with JSX

Generate JWT on your back-end to authorize users

Prerequisites:

Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.

JWT (JSON Web Token) serves as a secure means to authorize your individual SaaS users with the DocuSeal document form builder. The token is generated with JWT payload parameters to grant access only for your specific SaaS user and only for a specific document:

user_email: Email address of the DocuSeal admin user that provided the API_KEY for JWT signing.
integration_email: Email address of your SaaS user that opens the document form builder.
external_id: Unique string to tag the opened document within the DocuSeal platform and to be able to reopen the form using this unique key.
documents_urls[]: An array with public and downloadable document URLs to be opened in the form builder. Pass empty array to allow users to upload their files.
template_id: ID of the existing template to open in the form builder - leave empty if `documents_urls[]` is specified. Templates can be created via the HTML API or PDF export API.

Ensure you never expose API_KEY on your client side, only generated and signed JWT should be passed to your front-end app.

JS PHP Ruby Python C#

Copy

const jwt = require('jsonwebtoken');

const API_KEY = process.env.DOCUSEAL_API_KEY // Obtain from DocuSeal Console

const token = jwt.sign({
  user_email: 'admin@company.com',
  integration_email: 'saas-user@company.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, API_KEY);

use Firebase\JWT\JWT;

$apiToken = getenv('DOCUSEAL_API_KEY'); // Obtain from DocuSeal Console

$payload = [
  'user_email' => 'admin@company.com',
  'integration_email' => 'saas-user@company.com',
  'external_id' => 'TestForm123',
  'name' => 'Integration W-9 Test Form',
  'document_urls' => ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
];

$token = JWT::encode($payload, $apiToken, 'HS256'); // Encode the payload into a JWT

require 'jwt'

api_key = ENV['DOCUSEAL_API_KEY'] # Obtain from DocuSeal Console

payload = {
  user_email: 'admin@company.com',
  integration_email: 'saas-user@company.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf']
}

token = JWT.encode(payload, api_key) # Encode the payload into a JWT

import jwt
import os

api_key = os.getenv('DOCUSEAL_API_KEY') # Obtain from DocuSeal Console

payload = {
  'user_email': 'admin@company.com',
  'integration_email': 'saas-user@company.com',
  'external_id': 'TestForm123',
  'name': 'Integration W-9 Test Form',
  'document_urls': ['https://www.irs.gov/pub/irs-pdf/fw9.pdf']
}

token = jwt.encode(payload, api_key, algorithm='HS256') # Encode the payload into a JWT

using System;
using System.Security.Cryptography;
using System.Text;

class Program
{
  static void Main()
  {
    var secretKey = Encoding.UTF8.GetBytes("Put API token from ENV here");

    var token = GenerateJwt(secretKey);

    Console.WriteLine(token);
  }

  static string GenerateJwt(byte[] secretKey)
  {
    var payload = @"{
        ""user_email"": ""admin@company.com"",
        ""integration_email"": ""saas-user@company.com"",
        ""external_id"": ""TestForm123"",
        ""name"": ""Integration W-9 Test Form"",
        ""document_urls"": [
            ""https://www.irs.gov/pub/irs-pdf/fw9.pdf""
        ]
    }";
    var header = Base64UrlEncode(Encoding.UTF8.GetBytes("{\"alg\":\"HS256\",\"typ\":\"JWT\"}"));

    var payloadJson = Base64UrlEncode(Encoding.UTF8.GetBytes(payload));

    var headerPayload = $"{header}.{payloadJson}";

    using (var hmac = new HMACSHA256(secretKey))
    {
      var signatureBytes = hmac.ComputeHash(Encoding.UTF8.GetBytes(headerPayload));
      var signature = Base64UrlEncode(signatureBytes);

      return $"{headerPayload}.{signature}";
    }
  }

  static string Base64UrlEncode(byte[] data)
  {
    var base64 = Convert.ToBase64String(data);
    return base64.TrimEnd('=').Replace('+', '-').Replace('/', '_');
  }
}

Mount form builder component with JSX

Open your terminal or command prompt and navigate to your project directory. Then, run the following command to install the @docuseal/react package

Once the installation is complete, you'll need to import the component in the relevant file where you intend to use DocuSeal. With the component imported, you can now use <DocusealBuilder /> within your React JSX template wherever you want to integrate the DocuSeal document form builder functionality.

Trigger the API call to your backend endpoint to retrieve a JSON Web Token (JWT) generated on the previous step. The useEffect hook handles this API request upon component mount, fetching the JWT asynchronously.

Learn more:

Embed API Reference

React package on GitHub

PHP Example Project

Embedded Demo App

Copy

import { useState, useEffect } from 'react';
import { DocusealBuilder } from '@docuseal/react'

export default function Home() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    fetch('/your_backend/docuseal_builder/init').then(async (resp) => {
      // API should respond with JWT generated on your backend
      const { jwt } = await resp.json()

      setToken(jwt)
    })
  }, []);

  return (
    <div>
      {token ? (
        <DocusealBuilder token={token} />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}