Angular

npm i express multer @constaia/sdk

CONSTAIA_API_KEY=ck_test_...
CONSTAIA_WEBHOOK_SECRET=whsec_...

import express from "express";
import multer from "multer";
import {
  APITimeoutError,
  AuthenticationError,
  Constaia,
  ConstaiaError,
  InsufficientCreditsError,
  InvalidRequestError,
  PermissionError,
  RateLimitError,
  WebhookVerificationError,
} from "@constaia/sdk";
import { requireUser } from "./auth.mjs";
import { markEventProcessed, saveVerification, updateVerification } from "./verifications.mjs";

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", requireUser, upload.single("file"), async (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: { code: "file_required", 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 },
      language: languageFrom(req.body.options),
      metadata: { user_id: String(res.locals.user.id) },
    });
    await saveVerification(res.locals.user.id, analysis);
    res.status(analysis.status === "completed" ? 200 : 202).json(analysis);
  } catch (err) {
    sendError(res, err);
  }
});

app.post("/api/webhooks/constaia", express.raw({ type: "application/json" }), async (req, res) => {
  let event;
  try {
    event = await constaia.webhooks.verify(req.body, req.headers, process.env.CONSTAIA_WEBHOOK_SECRET);
  } catch (err) {
    return res.status(err instanceof WebhookVerificationError ? 400 : 500).send("invalid webhook");
  }
  try {
    if (await markEventProcessed(req.get("webhook-id"))) {
      if (["analysis.completed", "analysis.review_required", "analysis.failed"].includes(event.type)) {
        await updateVerification(event.data);
      }
    }
    res.sendStatus(204);
  } catch (err) {
    console.error(err);
    res.sendStatus(500);
  }
});

app.use((err, _req, res, next) => {
  if (err instanceof multer.MulterError && err.code === "LIMIT_FILE_SIZE") {
    return res.status(413).json({ error: { code: "file_too_large", message: "The file is larger than 20 MB." } });
  }
  next(err);
});

function sendError(res, err) {
  if (err instanceof ConstaiaError) console.error("constaia", err.status, err.code, err.requestId, err.message);
  else console.error(err);

  const reply = (status, code, message) => res.status(status).json({ error: { code, message } });
  if (err instanceof InvalidRequestError) return reply(err.status ?? 400, err.code ?? "invalid_request", err.message);
  if (err instanceof RateLimitError) {
    if (err.retryAfter) res.set("Retry-After", String(err.retryAfter));
    return reply(429, "rate_limited", "Too many requests. Try again in a few seconds.");
  }
  if (err instanceof InsufficientCreditsError) return reply(503, "verification_unavailable", "Verification is not available right now.");
  if (err instanceof AuthenticationError || err instanceof PermissionError) return reply(500, "server_misconfigured", "Server configuration error.");
  if (err instanceof APITimeoutError) return reply(504, "timeout", "Verification took too long. Please try again.");
  if (err instanceof ConstaiaError) return reply(502, "upstream_error", "The document could not be verified. Please try again.");
  return reply(500, "internal_error", "Unexpected error.");
}

function languageFrom(raw) {
  try {
    const value = JSON.parse(raw ?? "{}").language;
    return ["es", "en", "pt", "fr"].includes(value) ? value : "en";
  } catch {
    return "en";
  }
}

app.listen(3000, () => console.log("API on http://localhost:3000"));

node --env-file=.env server.mjs

{
  "/api": { "target": "http://localhost:3000", "secure": false }
}

npm i @constaia/widget
ng serve --proxy-config proxy.conf.json

import "@constaia/widget";
import {
  AfterViewInit,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  OnDestroy,
  signal,
  ViewChild,
} from "@angular/core";
import { RouterLink } from "@angular/router";
import type { Analysis, ConstaiaUploadElement, WidgetErrorDetail } from "@constaia/widget";

@Component({
  selector: "app-verify",
  standalone: true,
  imports: [RouterLink],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <h1>Verify your ID</h1>
    <constaia-upload #uploader endpoint="/api/constaia" document="es_dni" lang="en"></constaia-upload>

    @if (verdict() === "valid") {
      <a routerLink="/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" (click)="retry()">Try another document</button>
    }
  `,
})
export class VerifyComponent implements AfterViewInit, OnDestroy {
  @ViewChild("uploader") uploader!: ElementRef<ConstaiaUploadElement>;
  readonly verdict = signal<string | null>(null);

  private readonly onResult = (e: Event) =>
    this.verdict.set((e as CustomEvent<Analysis>).detail.verdict?.status ?? null);

  private readonly onError = (e: Event) => {
    const { code, message } = (e as CustomEvent<WidgetErrorDetail>).detail;
    console.warn(code, message);
  };

  ngAfterViewInit() {
    const el = this.uploader.nativeElement;
    el.addEventListener("constaia:result", this.onResult);
    el.addEventListener("constaia:error", this.onError);
  }

  ngOnDestroy() {
    const el = this.uploader.nativeElement;
    el.removeEventListener("constaia:result", this.onResult);
    el.removeEventListener("constaia:error", this.onError);
  }

  retry() {
    this.uploader.nativeElement.reset();
    this.verdict.set(null);
  }
}

import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Component, inject, signal } from "@angular/core";
import type { Analysis } from "@constaia/widget";

@Component({
  selector: "app-verify-http",
  standalone: true,
  template: `
    <input
      type="file"
      accept="image/jpeg,image/png,image/webp,image/heic,application/pdf"
      [disabled]="sending()"
      (change)="onFile($event)"
    />
    @if (sending()) {
      <p>Verifying…</p>
    }
    @if (verdict()) {
      <p>Result: {{ verdict() }}</p>
    }
    @for (message of messages(); track message) {
      <p>{{ message }}</p>
    }
  `,
})
export class VerifyHttpComponent {
  private readonly http = inject(HttpClient);
  readonly sending = signal(false);
  readonly verdict = signal<string | null>(null);
  readonly messages = signal<string[]>([]);

  onFile(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (!file) return;

    const body = new FormData();
    body.append("file", file);
    this.sending.set(true);

    this.http.post<Analysis>("/api/constaia", body).subscribe({
      next: (analysis) => {
        this.verdict.set(analysis.verdict?.status ?? "pending");
        this.messages.set(
          (analysis.verdict?.reasons ?? []).filter((r) => r.severity !== "info").map((r) => r.message),
        );
        this.sending.set(false);
      },
      error: (err: HttpErrorResponse) => {
        this.verdict.set(null);
        this.messages.set([err.error?.error?.message ?? "The document could not be verified."]);
        this.sending.set(false);
      },
    });
  }
}