How to Embed E-Signatures in a React App

npm i @turbodocx/embed    # front end
npm i @turbodocx/sdk      # server

// server.ts (Node.js + Express). Your API key never reaches the browser.
import express from 'express';
import { readFileSync } from 'fs';
import { TurboSign } from '@turbodocx/sdk';

TurboSign.configure({
  apiKey: process.env.TURBODOCX_API_KEY,
  orgId: process.env.TURBODOCX_ORG_ID,
  senderEmail: process.env.TURBODOCX_SENDER_EMAIL,
});

const app = express();
app.use(express.json());

app.post('/api/signing-session', async (req, res) => {
  const { name, email } = req.body; // the signed-in user in your app

  const { documentId, recipients } = await TurboSign.createEmbeddedSignature({
    file: readFileSync('service-agreement.pdf'),
    documentName: 'Service Agreement',
    recipients: [
      {
        name,
        email,
        auth: { emailOtp: true }, // optional: passcode before signing
        fields: { signature: '{signature1}', date: '{date1}' },
      },
    ],
  });

  res.json({ documentId, embedUrl: recipients[0].embedUrl });
});

// SigningStep.tsx (add 'use client' at the top in a Next.js App Router project)
import { useEffect, useRef, useState } from 'react';
import { TurboSignForm } from '@turbodocx/embed/react';

export function SigningStep({ user }: { user: { name: string; email: string } }) {
  const [embedUrl, setEmbedUrl] = useState<string | null>(null);
  const [done, setDone] = useState(false);
  const started = useRef(false); // each POST creates a document, so request it once

  useEffect(() => {
    if (started.current) return;
    started.current = true;
    fetch('/api/signing-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user),
    })
      .then((r) => r.json())
      .then((data) => setEmbedUrl(data.embedUrl));
  }, [user.email]);

  if (done) return <p>Thanks, you are all signed.</p>;
  if (!embedUrl) return <p>Preparing your agreement...</p>;

  return (
    <TurboSignForm
      embedUrl={embedUrl}
      origin="https://app.turbodocx.com" // required: without it every message is ignored
      height={720}
      title="Sign your service agreement"
      onCompleted={({ documentId, event }) => {
        // "already_signed" means a reopened link: skip one-time side effects
        if (event === 'signing_complete') {
          fetch('/api/signing-complete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ documentId }),
          });
        }
        setDone(true);
      }}
    />
  );
}

<!-- Serve node_modules/@turbodocx/embed/dist/ with your static assets,
     or import '@turbodocx/embed' from your bundled entry file instead. -->
<script type="module" src="/vendor/turbodocx-embed/index.js"></script>

<turbosign-form
  embed-url="EMBED_URL_FROM_YOUR_SERVER"
  origin="https://app.turbodocx.com"
  height="720"
></turbosign-form>

<script>
  document.querySelector('turbosign-form')
    .addEventListener('turbosign:completed', (e) => {
      console.log('Signed:', e.detail.documentId);
    });
</script>

import { handleTurboSignMessage } from '@turbodocx/embed';

const iframe = document.querySelector('iframe#signing') as HTMLIFrameElement;

window.addEventListener('message', (event) => {
  handleTurboSignMessage(event, {
    expectedOrigin: 'https://app.turbodocx.com',
    expectedSource: iframe.contentWindow, // reject forged messages from other frames
    onCompleted: ({ documentId }) => console.log('Signed:', documentId),
  });
});