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 la autenticación, las acciones del servidor y las entidades de la base de datos en un archivo de configuración declarativo. Su plantilla Open SaaS incluye autenticación, pagos y una base de datos lista para usar, y es una de las plantillas de SaaS más populares de GitHub con más de 10.000 estrellas. Si estás creando un producto SaaS en 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 el seguimiento de todo en tu base de datos actual. Sin infraestructura externa, sin nuevos servicios que gestionar.

Cómo funciona (la versión resumida)

La arquitectura de Wasp hace que esto sea muy limpio. Declaras una acción de 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 servidor (por lo que tu clave de API nunca llega al navegador), crea una solicitud de firma a través de la API de Firma.dev y guarda el resultado en tu base de datos de Prisma. El firmante recibe el documento por correo electrónico o a través de 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 la autenticación, la base de datos y las acciones de servidor listas para funcionar. La integración de Firma.dev añade quizás unas 100 líneas de código repartidas en dos archivos.

Bajo el capó

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

La integración consta de cuatro partes. Primero, una entidad de Prisma de SigningRequest que realiza el 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 de 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 de 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} para que los firmantes completen 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 Docs MCP de Firma.dev a Cursor o Claude mientras estás programando, de modo que tu asistente de IA pueda consultar toda la documentación de la API mientras genera el código de integración.

Qué obtienes

Una vez conectado, tu aplicación de Wasp puede enviar documentos para firmar desde cualquier plantilla de Firma.dev, rastrear 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 conforme a 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 multi-inquilino, los Customer Workspaces de Firma.dev le dan a cada uno de tus clientes su propio entorno de firma aislado con plantillas independientes y seguimiento de consumo. Esto combina muy bien con los patrones de implementación multi-inquilino de Wasp.

Precios adaptados para creadores de SaaS

Open SaaS existe porque pagar entre $300 y $2.000 por el código de una plantilla 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 firmar es solo una función más de tu producto.

Firma.dev cobra 0,029 € (aproximadamente 3 centavos de USD) 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 lanzar tu producto con firmas electrónicas desde el primer día sin añadir un gasto mensual de $300 a tu presupuesto.

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, conectar los webhooks e integrar la interfaz 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 utilizar Firma.dev gratis, sin tarjeta de crédito obligatoria.