Svelte

npm i @constaia/widget

import express from "express";
import multer from "multer";
import { Constaia, ConstaiaError, InvalidRequestError } from "@constaia/sdk";

const constaia = new Constaia({ apiKey: process.env.CONSTAIA_API_KEY });
const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 20 * 1024 * 1024 } });
const app = express();

app.post("/api/constaia", upload.single("file"), async (req, res) => {
  if (!req.file) return res.status(400).json({ error: { message: "The file is missing." } });
  try {
    const analysis = await constaia.analyze(req.file.buffer, {
      filename: req.file.originalname,
      expect: "es_dni",
      checks: { notExpired: true, minAgeYears: 18 },
    });
    res.status(analysis.status === "completed" ? 200 : 202).json(analysis);
  } catch (err) {
    if (err instanceof InvalidRequestError) return res.status(err.status ?? 400).json({ error: { message: err.message } });
    console.error(err instanceof ConstaiaError ? err.requestId : "", err);
    res.status(502).json({ error: { message: "The document could not be verified. Please try again." } });
  }
});

app.listen(3000);

import { svelte } from "@sveltejs/vite-plugin-svelte";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [svelte()],
  server: {
    proxy: { "/api": "http://localhost:3000" },
  },
});

<script lang="ts">
  import "@constaia/widget";
  import type { Analysis, ConstaiaUploadElement, WidgetErrorDetail, WidgetStatus } from "@constaia/widget";

  let { csrfToken }: { csrfToken?: string } = $props();

  let uploader: ConstaiaUploadElement | undefined = $state();
  let verdict = $state<string | null>(null);
  let status = $state<WidgetStatus>("idle");

  $effect(() => {
    const el = uploader;
    if (!el) return;
    if (csrfToken) el.headers = { "X-CSRF-Token": csrfToken };

    const onResult = (e: Event) => {
      verdict = (e as CustomEvent<Analysis>).detail.verdict?.status ?? null;
    };
    const onError = (e: Event) => {
      const { code, message } = (e as CustomEvent<WidgetErrorDetail>).detail;
      console.warn(code, message);
    };
    const onStatus = (e: Event) => {
      status = (e as CustomEvent<{ status: WidgetStatus }>).detail.status;
    };

    el.addEventListener("constaia:result", onResult);
    el.addEventListener("constaia:error", onError);
    el.addEventListener("constaia:status", onStatus);
    return () => {
      el.removeEventListener("constaia:result", onResult);
      el.removeEventListener("constaia:error", onError);
      el.removeEventListener("constaia:status", onStatus);
    };
  });

  function retry() {
    uploader?.reset();
    verdict = null;
  }
</script>

<h1>Verify your ID</h1>
<constaia-upload bind:this={uploader} endpoint="/api/constaia" document="es_dni" lang="en"></constaia-upload>

{#if status === "analyzing"}
  <p>Analysing…</p>
{/if}

{#if verdict === "valid"}
  <a href="/signup/details">Continue</a>
{:else if verdict === "review"}
  <p>We could not read it well. Take another photo in good light, without glare.</p>
{:else if verdict === "invalid"}
  <button type="button" onclick={retry}>Try another document</button>
{/if}