Embed signing with React (v2)

npm install @sajn/[email protected]

// app/api/sajn/embed-session/route.ts
import { NextResponse } from "next/server";

export async function POST() {
  // Replace with your own auth and your own lookup of the document and party.
  const user = await requireSignedInUser();
  const { documentId, partyId } = await findSigningForUser(user.id);

  const response = await fetch("https://app.sajn.se/api/v1/embed-sessions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SAJN_API_KEY}`,
      "Sajn-Version": "2026-10",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ documentId, partyId, origins: ["https://app.example.com"] }),
    cache: "no-store",
  });
  const session = await response.json();

  if (!response.ok) {
    return NextResponse.json({ message: session.userMessage }, { status: 502 });
  }

  return NextResponse.json({ clientSecret: session.clientSecret });
}

// app/sign/signing-frame.tsx
"use client";

import { useRouter } from "next/navigation";
import { SigningEmbed } from "@sajn/embed-react";

const fetchClientSecret = async () => {
  const response = await fetch("/api/sajn/embed-session", { method: "POST" });
  if (!response.ok) throw new Error("Signing isn't available right now.");
  const { clientSecret } = await response.json();
  return clientSecret;
};

export function SigningFrame() {
  const router = useRouter();

  return (
    <SigningEmbed
      fetchClientSecret={fetchClientSecret}
      style={{ height: "80vh" }}
      onSigned={() => router.push("/signed")}
      onError={({ code, message }) => console.error(code, message)}
    />
  );
}

<SigningEmbed
  fetchClientSecret={fetchClientSecret}
  appearance={{ colorScheme: theme, colors: { primary: "#0f766e" } }}
  locale={language}
  style={{ height: "80vh" }}
/>

import type {
  Appearance,
  EmbedErrorCode,
  EmbedIds,
  EmbedState,
  Locale,
  PartyStatus,
  SigningEmbedError,
  SigningEmbedProps,
} from "@sajn/embed-react";