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.
constjwt=require('jsonwebtoken');constAPI_KEY=process.env.DOCUSEAL_API_KEY// Obtain from DocuSeal Consoleconsttoken=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);
useFirebase\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 Consolepayload={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
importjwtimportosapi_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
usingSystem;usingSystem.Security.Cryptography;usingSystem.Text;classProgram{staticvoidMain(){varsecretKey=Encoding.UTF8.GetBytes("Put API token from ENV here");vartoken=GenerateJwt(secretKey);Console.WriteLine(token);}staticstringGenerateJwt(byte[]secretKey){varpayload=@"{
""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""
]
}";varheader=Base64UrlEncode(Encoding.UTF8.GetBytes("{\"alg\":\"HS256\",\"typ\":\"JWT\"}"));varpayloadJson=Base64UrlEncode(Encoding.UTF8.GetBytes(payload));varheaderPayload=$"{header}.{payloadJson}";using(varhmac=newHMACSHA256(secretKey)){varsignatureBytes=hmac.ComputeHash(Encoding.UTF8.GetBytes(headerPayload));varsignature=Base64UrlEncode(signatureBytes);return$"{headerPayload}.{signature}";}}staticstringBase64UrlEncode(byte[]data){varbase64=Convert.ToBase64String(data);returnbase64.TrimEnd('=').Replace('+','-').Replace('/','_');}}
2
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.
import{useState,useEffect}from'react';import{DocusealBuilder}from'@docuseal/react'exportdefaultfunctionHome(){const[token,setToken]=useState(null);useEffect(()=>{fetch('/your_backend/docuseal_builder/init').then(async (resp)=>{// API should respond with JWT generated on your backendconst{jwt}=awaitresp.json()setToken(jwt)})},[]);return (<div>{token?(<DocusealBuildertoken={token}/>):(<p>Loading...</p>)}</div>);}