Cómo añadir firmas electrónicas a tu aplicación Wasp

Wasp es un framework full-stack para React, Node.js y Prisma que te permite definir autenticación, acciones del servidor y entidades de la base de datos en un archivo de configuración declarativo. Su plantilla de Open SaaS incluye autenticación, pagos y una base de datos listos para usar, y es uno de los boilerplates de SaaS más populares en GitHub con más de 10.000 estrellas. Si estás creando un producto SaaS con Wasp, añadir firmas electrónicas es un paso natural para cualquier sector legal, de recursos humanos, consultoría o inmobiliario.

Firma.dev se integra directamente con las acciones del servidor de Wasp y los modelos de Prisma. Defines una acción de Wasp, llamas a la API de Firma.dev desde tu código del lado del servidor y realizas un seguimiento de todo en tu base de datos existente. Sin infraestructura externa ni nuevos servicios que gestionar.

Cómo funciona (versión corta)

La arquitectura de Wasp hace que esto sea limpio. Declaras una acción del servidor en tu archivo de configuración .wasp, la implementas en TypeScript y la llamas desde cualquier componente de React. La acción se ejecuta en el lado del servidor (por lo que tu clave API nunca llega al navegador), crea una solicitud de firma a través de la API de Firma.dev y almacena el resultado en tu base de datos de Prisma. El firmante recibe el documento por correo electrónico o mediante un iframe integrado en tu aplicación.

Cuando se firma el documento, Firma.dev envía un webhook a una ruta de la API de Wasp que actualiza el estado de la solicitud de firma en tu base de datos. Tu frontend detecta el cambio automáticamente a través de las consultas reactivas de Wasp.

Si ya estás utilizando Open SaaS, ya tienes listos la autenticación, la base de datos y las acciones del servidor. La integración de Firma.dev añade unas 100 líneas de código repartidas en dos archivos.

Bajo el capó

Para los desarrolladores que quieren entender la arquitectura antes de sumergirse en la documentación:

La integración consta de cuatro partes. Primero, una entidad de Prisma SigningRequest que realiza un seguimiento de cada solicitud de firma con su ID de Firma.dev, plantilla, correo electrónico del firmante y estado. Segundo, una acción de Wasp sendSigningRequest que lee tu clave API de .env.server, llama al endpoint create-and-send de Firma.dev y escribe el resultado en tu base de datos. Wasp gestiona la RPC cliente-servidor automáticamente, por lo que tu componente de React simplemente llama a la acción como una función asíncrona normal.

Tercero, un controlador de webhooks declarado como una ruta api de Wasp (con auth: false ya que los webhooks no llevan tokens de sesión) que escucha eventos como signing_request.completed y actualiza tus registros de Prisma. Cuarto, un componente de firma integrado opcional: un iframe que apunta a https://app.firma.dev/signing/{id} que permite a los firmantes completar los documentos sin salir de tu aplicación.

Todo funciona con la seguridad de tipos de Wasp. Defines los tipos de entrada y salida de tu acción, y Wasp infiere automáticamente los tipos en el frontend.

También puedes conectar el servidor MCP de documentos de Firma.dev a Cursor o Claude mientras construyes, para que tu asistente de IA pueda consultar toda la documentación de la API a medida que genera el código de integración.

Qué obtienes

Una vez conectada, tu aplicación Wasp puede enviar documentos para su firma desde cualquier plantilla de Firma.dev, realizar un seguimiento de las actualizaciones de estado en tiempo real a través de webhooks y Prisma, integrar la firma directamente en tu interfaz de usuario y activar flujos de trabajo posteriores cuando se completen los documentos.

Cada firma es legalmente vinculante bajo la Ley ESIGN, UETA y eIDAS (SES y AdES). Todos los datos de los documentos se almacenan en la UE en la infraestructura de AWS en París y Estocolmo.

Si estás creando un SaaS multiinquilino, los Espacios de trabajo para clientes de Firma.dev ofrecen a cada uno de tus clientes su propio entorno de firma aislado con plantillas y seguimiento de uso independientes. Esto combina perfectamente con los patrones de multiinquilino de Wasp.

Precios que funcionan para creadores de SaaS

Open SaaS existe porque pagar entre $300 y $2.000 por el código de un boilerplate parecía irrazonable. La misma lógica se aplica a las firmas electrónicas. La mayoría de los proveedores cobran entre $25 y $50 por usuario al mes, lo que se acumula rápidamente cuando la firma es solo una función más de tu producto.

Firma.dev cobra 0,049 € (aproximadamente 5 centavos de dólar) por sobre. Sin cuotas mensuales, sin cargos por usuario, sin contratos. Publicas la función y solo pagas cuando se envían los sobres. Para un SaaS en fase inicial en Open SaaS, esto significa que puedes lanzarlo con firmas electrónicas desde el primer día sin añadir una partida de $300 al mes a tu tasa de consumo.

Primeros pasos

La guía completa de integración de Wasp en docs.firma.dev detalla cada paso: definir la entidad de Prisma, crear la acción del servidor, configurar los webhooks e integrar la experiencia de firma. Si ya has creado una acción de Wasp antes, tendrás las solicitudes de firma funcionando en menos de una hora.

Comienza a usar Firma.dev gratis, sin necesidad de tarjeta de crédito.