Add E-Signatures to SvelteKit 5 Applications via REST API & Webhooks (2026)

import { fail } from "@sveltejs/kit";
import { SIGNBEE_API_KEY } from "$env/static/private";
import { PUBLIC_APP_URL } from "$env/static/public";
import crypto from "node:crypto";
import type { Actions, PageServerLoad } from "./$types";

export interface SignbeeSendResponse {
  id: string;
  status: "PENDING" | "SIGNED" | "EXPIRED";
  title: string;
  recipient_email: string;
  verify_url: string;
  expires_at: string;
}

export const load: PageServerLoad = async ({ locals }) => {
  return {
    senderName: locals.user?.name ?? "Alex Rivera",
    senderEmail: locals.user?.email ?? "alex@acmecloud.io",
  };
};

export const actions: Actions = {
  sendContract: async ({ request, fetch, locals }) => {
    const formData = await request.formData();

    const title = String(formData.get("title") ?? "").trim();
    const recipientName = String(formData.get("recipient_name") ?? "").trim();
    const recipientEmail = String(formData.get("recipient_email") ?? "").trim();
    const markdown = String(formData.get("markdown") ?? "").trim();
    const expiresInDays = Number(formData.get("expires_in_days") ?? 14);

    if (!title || !recipientName || !recipientEmail.includes("@") || markdown.length < 40) {
      return fail(400, {
        error: "Please provide a valid title, counterparty email, and complete contract body.",
        values: { title, recipientName, recipientEmail },
      });
    }

    const senderName = locals.user?.name ?? "Alex Rivera";
    const senderEmail = locals.user?.email ?? "alex@acmecloud.io";

    // Generate deterministic idempotency key from recipient + markdown digest
    const idempotencyKey = crypto
      .createHash("sha256")
      .update(`${recipientEmail}:${title}:${markdown}`)
      .digest("hex")
      .slice(0, 24);

    const response = await fetch("https://signb.ee/api/v1/send", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${SIGNBEE_API_KEY}`,
        "Content-Type": "application/json",
        "X-Idempotency-Key": `sveltekit-${idempotencyKey}`,
      },
      body: JSON.stringify({
        title,
        markdown,
        sender_name: senderName,
        sender_email: senderEmail,
        recipient_name: recipientName,
        recipient_email: recipientEmail,
        expires_in_days: expiresInDays,
        webhook_url: `${PUBLIC_APP_URL}/api/webhooks/signbee`,
      }),
    });

    if (!response.ok) {
      const errText = await response.text();
      return fail(response.status, {
        error: `Signbee API error (${response.status}): ${errText}`,
        values: { title, recipientName, recipientEmail },
      });
    }

    const receipt = (await response.json()) as SignbeeSendResponse;

    return {
      success: true,
      envelope: receipt,
    };
  },
};

<script lang="ts">
  import { enhance } from "$app/forms";
  import type { PageData, ActionData } from "./$types";

  let { data, form }: { data: PageData; form: ActionData } = $props();

  // 1. Reactive contract state using Svelte 5 $state() rune
  let recipientName = $state("Elena Rostova");
  let recipientEmail = $state("elena@vanguardlogistics.io");
  let companyName = $state("Vanguard Logistics Ltd");
  let monthlyRetainer = $state(4500);
  let onboardingFee = $state(2000);
  let isSubmitting = $state(false);
  let liveStatus = $state<"IDLE" | "PENDING" | "SIGNED">("IDLE");
  let sha256Hash = $state<string | null>(null);

  // 2. Derived total & CommonMark document via $derived and $derived.by
  let totalFirstMonth = $derived(monthlyRetainer + onboardingFee);
  let contractTitle = $derived(`Master SaaS Subscription Agreement — ${companyName}`);

  let generatedMarkdown = $derived.by(() => {
    const today = new Date().toISOString().split("T")[0];
    return [
      `# ${contractTitle}`,
      "",
      `This Master Subscription Agreement ("Agreement") is entered into on **${today}** between **Acme Cloud Inc.** ("Provider", represented by ${data.senderName}) and **${companyName}** ("Customer", represented by ${recipientName}).`,
      "",
      "### 1. Commercial Schedule & Fees",
      "",
      "| Line Item | Billing Cadence | Amount (USD) |",
      "|---|---|---|",
      `| Enterprise Platform Subscription | Monthly Recurring | $${monthlyRetainer.toLocaleString()} |`,
      `| Dedicated Architecture Onboarding | One-Time Setup | $${onboardingFee.toLocaleString()} |`,
      `| **Total Initial Commitment** | **Due on Execution** | **$${totalFirstMonth.toLocaleString()}** |`,
      "",
      "### 2. Term, Security & Cryptographic Execution",
      "Customer authorizes Provider to provision dedicated tenant infrastructure upon execution. Both parties agree that electronic execution sealed via Signbee SHA-256 cryptographic audit trail constitutes an original binding instrument under ESIGN and eIDAS.",
    ].join("\n");
  });

  // 3. Reactive $effect() rune to poll signing completion once dispatched
  $effect(() => {
    const docId = form?.envelope?.id;
    if (!docId || liveStatus === "SIGNED") return;

    liveStatus = "PENDING";
    const interval = setInterval(async () => {
      const res = await fetch(`/api/contracts/${docId}/status`);
      if (res.ok) {
        const payload = await res.json();
        if (payload.status === "SIGNED") {
          liveStatus = "SIGNED";
          sha256Hash = payload.sha256_hash;
          clearInterval(interval);
        }
      }
    }, 5000);

    return () => clearInterval(interval);
  });
</script>

<div class="max-w-3xl mx-auto p-6 bg-zinc-900 text-zinc-100 rounded-2xl border border-zinc-800">
  <h2 class="text-xl font-bold mb-4">{contractTitle}</h2>

  <form
    method="POST"
    action="?/sendContract"
    use:enhance={() => {
      isSubmitting = true;
      return async ({ update }) => {
        await update();
        isSubmitting = false;
      };
    }}
    class="space-y-4"
  >
    <input type="hidden" name="title" value={contractTitle} />
    <input type="hidden" name="markdown" value={generatedMarkdown} />

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <label class="block text-xs font-mono text-zinc-400">
        Counterparty Signer Name
        <input
          name="recipient_name"
          bind:value={recipientName}
          class="mt-1 w-full rounded-lg bg-zinc-950 border border-zinc-800 px-3 py-2 text-sm text-zinc-100"
        />
      </label>
      <label class="block text-xs font-mono text-zinc-400">
        Counterparty Email
        <input
          name="recipient_email"
          type="email"
          bind:value={recipientEmail}
          class="mt-1 w-full rounded-lg bg-zinc-950 border border-zinc-800 px-3 py-2 text-sm text-zinc-100"
        />
      </label>
    </div>

    <button
      type="submit"
      disabled={isSubmitting}
      class="px-5 py-2.5 rounded-lg bg-amber-500 text-zinc-950 font-semibold text-sm hover:bg-amber-400 disabled:opacity-50"
    >
      {isSubmitting ? "Compiling A4 PDF & Dispatching..." : `Dispatch Agreement ($${totalFirstMonth.toLocaleString()})`}
    </button>
  </form>

  {#if form?.envelope}
    <div class="mt-6 p-4 rounded-xl bg-zinc-950 border border-emerald-500/30 text-xs font-mono space-y-1">
      <p class="text-emerald-400 font-semibold">Envelope Dispatched: {form.envelope.id}</p>
      <p class="text-zinc-300">Live Status: {liveStatus}</p>
      <p class="text-zinc-400">Public Audit URL: {form.envelope.verify_url}</p>
      {#if sha256Hash}
        <p class="text-amber-400">Sealed SHA-256: {sha256Hash}</p>
      {/if}
    </div>
  {/if}
</div>

import { json, error } from "@sveltejs/kit";
import { SIGNBEE_WEBHOOK_SECRET } from "$env/static/private";
import crypto from "node:crypto";
import type { RequestHandler } from "./$types";

interface SignbeeWebhookEvent {
  event: "document.signed" | "document.viewed" | "document.expired";
  document_id: string;
  title: string;
  recipient_name: string;
  recipient_email: string;
  signed_at: string;
  sha256_hash: string;
  verify_url: string;
  download_url: string;
}

export const POST: RequestHandler = async ({ request }) => {
  const signature = request.headers.get("x-signbee-signature");
  if (!signature) {
    throw error(401, "Missing X-Signbee-Signature header");
  }

  // Always read raw text before JSON parsing so HMAC matches exact wire bytes
  const rawBody = await request.text();

  const expectedHex = crypto
    .createHmac("sha256", SIGNBEE_WEBHOOK_SECRET)
    .update(rawBody, "utf8")
    .digest("hex");

  const sigBuffer = Buffer.from(signature, "utf8");
  const expectedBuffer = Buffer.from(expectedHex, "utf8");

  if (
    sigBuffer.length !== expectedBuffer.length ||
    !crypto.timingSafeEqual(sigBuffer, expectedBuffer)
  ) {
    throw error(401, "Invalid webhook HMAC signature");
  }

  const payload = JSON.parse(rawBody) as SignbeeWebhookEvent;

  if (payload.event === "document.signed") {
    // Update your Drizzle / Prisma PostgreSQL contract record
    console.info(
      `[Signbee Webhook] Document ${payload.document_id} signed by ${payload.recipient_email}. SHA-256: ${payload.sha256_hash}`
    );
  }

  return json({ received: true, document_id: payload.document_id });
};

import { eq } from "drizzle-orm";
import { db } from "$lib/server/db";
import { contractsTable } from "$lib/server/db/schema";

function hexToUint8Array(hex: string): Uint8Array {
  if (hex.length % 2 !== 0) return new Uint8Array(0);
  const bytes = new Uint8Array(hex.length / 2);
  for (let i = 0; i < hex.length; i += 2) {
    bytes[i / 2] = parseInt(hex.slice(i, i + 2), 16);
  }
  return bytes;
}

export async function verifySignbeeWebhookEdge(
  rawBody: string,
  signatureHex: string,
  secret: string
): Promise<boolean> {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["verify"]
  );

  const signatureBytes = hexToUint8Array(signatureHex);
  if (signatureBytes.length === 0) return false;

  return crypto.subtle.verify(
    "HMAC",
    key,
    signatureBytes,
    encoder.encode(rawBody)
  );
}

export async function recordSignedCertificate(event: {
  document_id: string;
  sha256_hash: string;
  verify_url: string;
  signed_at: string;
}) {
  await db
    .update(contractsTable)
    .set({
      status: "SIGNED",
      sha256Hash: event.sha256_hash,
      verifyUrl: event.verify_url,
      signedAt: new Date(event.signed_at),
    })
    .where(eq(contractsTable.signbeeDocumentId, event.document_id));
}