React

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 react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

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

import { ConstaiaUpload } from "@constaia/widget/react";
import { useState } from "react";

export function VerifyDocument() {
  const [verdict, setVerdict] = useState<string | null>(null);

  return (
    <section>
      <h1>Verify your ID</h1>
      <ConstaiaUpload
        endpoint="/api/constaia"
        document="es_dni"
        lang="en"
        onResult={(analysis) => setVerdict(analysis.verdict?.status ?? null)}
        onError={(error) => console.warn(error.code, error.message)}
        onStatus={(status) => status === "idle" && setVerdict(null)}
      />
      {verdict === "valid" && <a href="/signup/details">Continue</a>}
    </section>
  );
}

import { ConstaiaUpload, useConstaiaUpload } from "@constaia/widget/react";

export function VerifyWithControls({ csrfToken }: { csrfToken: string }) {
  const { ref, status, progress, result, error, reset, submit } = useConstaiaUpload({
    endpoint: "/api/constaia",
    document: "es_dni",
    lang: "en",
    autoSubmit: false,
    headers: { "X-CSRF-Token": csrfToken },
  });
  const verdict = result?.verdict?.status;

  return (
    <section>
      <ConstaiaUpload ref={ref} />

      {status === "ready" && (
        <button type="button" onClick={() => submit()}>
          Send document
        </button>
      )}
      {status === "uploading" && <progress value={progress} max={100} />}
      {status === "analyzing" && <p>Analysing…</p>}

      {verdict === "valid" && <a href="/signup/details">Continue</a>}
      {verdict === "review" && <p>We could not read it well. Take another photo in good light, without glare.</p>}
      {(verdict === "invalid" || error) && (
        <button type="button" onClick={reset}>
          Try another document
        </button>
      )}
    </section>
  );
}