Rork - Firma

Firma te permite añadir firmas electrónicas legalmente vinculantes a cualquier aplicación móvil creada con Rork. Como Rork genera apps de React Native (Expo), puedes llamar a la API de Firma desde un backend ligero y renderizar la experiencia de firma en un WebView dentro de tu app móvil. Esta guía cubre la ruta de integración recomendada: una función de backend serverless que llama a la API REST de Firma, con un WebView de React Native para la firma incrustada.

Requisitos previos

Una cuenta de Firma con una clave API
Una app móvil generada con Rork (React Native / Expo)
Al menos una plantilla de Firma con campos de firma configurados
Un backend para llamadas API seguras. Las opciones incluyen Rork Backend, Supabase Edge Functions, Vercel Serverless Functions o cualquier servidor Node.js/Python

Firma usa la clave API en bruto como valor del encabezado Authorization; no la antepongas con Bearer. Esto difiere de muchas otras APIs.

Paso 1: Configura tu backend

Las apps de Rork se ejecutan en el cliente, así que necesitas una capa del lado del servidor para mantener tu clave API en secreto. Este ejemplo usa una Supabase Edge Function, pero la misma lógica aplica a cualquier backend. Crea la Edge Function:

supabase functions new send-signing-request

Guarda tu clave API de Firma como un secreto:

supabase secrets set FIRMA_API_KEY=your_api_key_here

Nunca llames a la API de Firma directamente desde tu app de React Native. La clave API quedaría expuesta en el paquete de la app y podría ser extraída por cualquiera que descargue tu app.

Luego reemplaza el index.ts generado con lo siguiente:

// supabase/functions/send-signing-request/index.ts
const FIRMA_API = "https://api.firma.dev/functions/v1/signing-request-api";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (req) => {
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }

  try {
    const { template_id, signer_email, signer_first_name, signer_last_name } =
      await req.json();

    const apiKey = Deno.env.get("FIRMA_API_KEY");
    if (!apiKey) {
      return new Response(
        JSON.stringify({ error: "FIRMA_API_KEY not configured" }),
        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    const response = await fetch(
      `${FIRMA_API}/signing-requests/create-and-send`,
      {
        method: "POST",
        headers: {
          Authorization: apiKey,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: "Contract for " + signer_first_name + " " + signer_last_name,
          template_id,
          recipients: [
            {
              first_name: signer_first_name,
              last_name: signer_last_name,
              email: signer_email,
              designation: "Signer",
              order: 1,
            },
          ],
        }),
      }
    );

    const data = await response.json();

    if (!response.ok) {
      return new Response(
        JSON.stringify({ error: data }),
        { status: response.status, headers: { ...corsHeaders, "Content-Type": "application/json" } }
      );
    }

    return new Response(
      JSON.stringify({
        signing_request_id: data.id,
        first_signer: data.first_signer,
        status: "sent",
      }),
      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  } catch (err) {
    return new Response(
      JSON.stringify({ error: err.message }),
      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
    );
  }
});

El endpoint create-and-send crea la solicitud de firma y la envía a los destinatarios de forma atómica. Si necesitas revisar o modificar la solicitud antes de enviarla, usa POST /signing-requests para crear un borrador y luego POST /signing-requests/{id}/send por separado.

Despliega la función:

supabase functions deploy send-signing-request --no-verify-jwt

Paso 2: Llama al backend desde React Native

Desde tu app de Rork, haz un POST a tu Edge Function cuando el usuario inicie el flujo de firma:

const BACKEND_URL = "https://<your-project-ref>.supabase.co/functions/v1";

async function sendSigningRequest(templateId: string) {
  const response = await fetch(`${BACKEND_URL}/send-signing-request`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      template_id: templateId,
      signer_email: "alice@example.com",
      signer_first_name: "Alice",
      signer_last_name: "Johnson",
    }),
  });

  const data = await response.json();
  console.log(data);
  // data.signing_request_id - the signing request ID
  // data.first_signer.id - the signing_request_user_id for embedded signing
  // data.first_signer.signing_link - direct link to the signing page
  return data;
}

Paso 3: Firma incrustada en un WebView

Para apps móviles, la experiencia de firma se renderiza dentro de un WebView en lugar de un iframe. Instala react-native-webview:

npx expo install react-native-webview

Luego crea un componente de pantalla de firma. La respuesta de create-and-send incluye un first_signer.id (el signing_request_user_id) y un first_signer.signing_link ya listo. Usa cualquiera de los dos para construir la URL de firma:

import React from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";

interface EmbeddedSigningProps {
  signingRequestUserId: string;
}

export function EmbeddedSigning({ signingRequestUserId }: EmbeddedSigningProps) {
  return (
    <View style={styles.container}>
      <WebView
        source={{
          uri: `https://app.firma.dev/signing/${signingRequestUserId}`,
        }}
        style={styles.webview}
        startInLoadingState
        renderLoading={() => (
          <ActivityIndicator
            style={styles.loading}
            size="large"
            color="#0066FF"
          />
        )}
        javaScriptEnabled
        domStorageEnabled
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  webview: { flex: 1 },
  loading: {
    position: "absolute",
    top: "50%",
    left: "50%",
  },
});

Pasa first_signer.id de la respuesta del Paso 2 como la prop signingRequestUserId. Consulta la guía de firma incrustada para la configuración completa, incluidas las mejores prácticas de seguridad.

Integración de webhooks

Para rastrear cuándo se firman los documentos, añade una Edge Function de webhook y regístrala en el panel de Firma.

// supabase/functions/firma-webhook/index.ts
Deno.serve(async (req) => {
  const payload = await req.json();
  const { type, data } = payload;

  if (type === "signing_request.completed") {
    const signingRequestId = data.signing_request.id;

    // Update your database, send a push notification, or trigger
    // the next step in your workflow
    console.log(`Signing request ${signingRequestId} completed`);
  }

  if (type === "signing_request.recipient.signed") {
    const recipientEmail = data.recipient?.email;
    console.log(`${recipientEmail} signed the document`);
  }

  return new Response(JSON.stringify({ received: true }), {
    headers: { "Content-Type": "application/json" },
  });
});

Despliega y registra el webhook:

Despliega la función: supabase functions deploy firma-webhook --no-verify-jwt
En el panel de Firma, en Configuración → Webhooks, añade un webhook que apunte a https://<your-project-ref>.supabase.co/functions/v1/firma-webhook
Selecciona los eventos que quieres recibir. Consulta la guía de webhooks para todos los tipos de eventos y la verificación de firmas

Para uso en producción, verifica siempre la firma del webhook usando tu secreto de firma de webhook de Firma. Consulta la guía de webhooks para los detalles de implementación.

Extra: conexión MCP para desarrollo asistido por IA

Firma ofrece un servidor MCP de documentación que se puede conectar a herramientas de codificación con IA. Una vez conectados, los asistentes de IA buscan en la documentación de Firma mientras generan código para usar endpoints, nombres de campos y patrones correctos. Esto es una ayuda en tiempo de desarrollo y no afecta a tu app desplegada.

Próximos pasos

Autenticación de la API - claves API y alcance por espacio de trabajo
Guía de webhooks - tipos de eventos, payloads y verificación de firmas
Firma incrustada - experiencia de firma dentro de la app
Creación de espacios de trabajo - configuraciones multi-tenant para apps SaaS
Guía de configuración completa - recorrido de integración completo con Firma
Referencia de la API - documentación completa de endpoints

​Requisitos previos

​Paso 1: Configura tu backend

​Paso 2: Llama al backend desde React Native

​Paso 3: Firma incrustada en un WebView

​Integración de webhooks

​Extra: conexión MCP para desarrollo asistido por IA

​Próximos pasos

Requisitos previos

Paso 1: Configura tu backend

Paso 2: Llama al backend desde React Native

Paso 3: Firma incrustada en un WebView

Integración de webhooks

Extra: conexión MCP para desarrollo asistido por IA

Próximos pasos