Imported from jeremylongshore/tons-of-skills-marketplace (plugins/saas-packs/miro-pack/skills/miro-deploy-integration/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill miro-deploy-integration. Copyright stays with the author (MIT).

Miro Deploy Integration

Overview

Deploy Miro REST API v2 integrations to popular platforms with proper OAuth 2.0 token management, webhook endpoint setup, and health monitoring.

Prerequisites

• Miro app configured with production OAuth credentials
• Access token with required scopes
• Platform CLI installed (vercel, fly, or gcloud)

Vercel Deployment

Environment Variables

# Add Miro secrets to Vercel
vercel env add MIRO_CLIENT_ID production
vercel env add MIRO_CLIENT_SECRET production
vercel env add MIRO_ACCESS_TOKEN production
vercel env add MIRO_WEBHOOK_SECRET production

API Route: Webhook Handler

// api/webhooks/miro.ts (Vercel serverless function)
import crypto from 'crypto';

export const config = { api: { bodyParser: false } };

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();

  const chunks: Buffer[] = [];
  for await (const chunk of req) chunks.push(chunk);
  const rawBody = Buffer.concat(chunks);

  // Verify Miro webhook signature
  const signature = req.headers['x-miro-signature'] as string;
  const expected = crypto.createHmac('sha256', process.env.MIRO_WEBHOOK_SECRET!)
    .update(rawBody).digest('hex');

  if (!signature || !crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))) {
    return res.status(401).json({ error: 'Invalid signature' });
  }

  const event = JSON.parse(rawBody.toString());

  // Handle board subscription events
  switch (event.event) {
    case 'board_subscription_changed':
      console.log(`Board ${event.boardId}: item ${event.item?.type} ${event.type}`);
      break;
  }

  res.status(200).json({ received: true });
}

API Route: OAuth Callback

// api/auth/miro/callback.ts
export default async function handler(req, res) {
  const { code } = req.query;

  const tokenResponse = await fetch('https://api.miro.com/v1/oauth/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      client_id: process.env.MIRO_CLIENT_ID!,
      client_secret: process.env.MIRO_CLIENT_SECRET!,
      code: code as string,
      redirect_uri: `${process.env.VERCEL_URL}/api/auth/miro/callback`,
    }),
  });

  const tokens = await tokenResponse.json();
  // Store tokens securely (database, not env vars)
  // tokens.access_token, tokens.refresh_token, tokens.expires_in (3599s)

  res.redirect('/dashboard?connected=miro');
}

vercel.json

{
  "functions": {
    "api/webhooks/miro.ts": { "maxDuration": 10 },
    "api/auth/miro/callback.ts": { "maxDuration": 10 }
  },
  "headers": [
    {
      "source": "/api/health",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ]
}

Fly.io Deployment

fly.toml

app = "my-miro-integration"
primary_region = "iad"

[env]
  NODE_ENV = "production"
  MIRO_API_BASE = "https://api.miro.com/v2"

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = "suspend"
  auto_start_machines = true
  min_machines_running = 1        # Keep 1 running for webhook delivery

[[http_service.checks]]
  grace_period = "10s"
  interval = "30s"
  method = "GET"
  path = "/health"
  timeout = "5s"

Deploy

# Set secrets
fly secrets set MIRO_CLIENT_ID=your_client_id
fly secrets set MIRO_CLIENT_SECRET=your_client_secret
fly secrets set MIRO_ACCESS_TOKEN=your_token
fly secrets set MIRO_WEBHOOK_SECRET=your_webhook_secret

# Deploy
fly deploy

# Verify health
fly ssh console -C "curl -s http://localhost:3000/health | jq '.miro'"

Google Cloud Run

Deploy Script

#!/bin/bash
set -euo pipefail

PROJECT_ID="${GOOGLE_CLOUD_PROJECT}"
SERVICE_NAME="miro-integration"
REGION="us-central1"

# Store secrets in Secret Manager
echo -n "$MIRO_CLIENT_SECRET" | gcloud secrets create miro-client-secret --data-file=-
echo -n "$MIRO_ACCESS_TOKEN" | gcloud secrets create miro-access-token --data-file=-
echo -n "$MIRO_WEBHOOK_SECRET" | gcloud secrets create miro-webhook-secret --data-file=-

# Build and deploy
gcloud run deploy $SERVICE_NAME \
  --source . \
  --region $REGION \
  --platform managed \
  --allow-unauthenticated \
  --min-instances 1 \
  --set-env-vars "MIRO_CLIENT_ID=$MIRO_CLIENT_ID,MIRO_API_BASE=https://api.miro.com/v2" \
  --set-secrets "MIRO_CLIENT_SECRET=miro-client-secret:latest,MIRO_ACCESS_TOKEN=miro-access-token:latest,MIRO_WEBHOOK_SECRET=miro-webhook-secret:latest"

Health Check Endpoint

// src/health.ts — works on any platform
export async function healthCheck(): Promise<HealthResponse> {
  const checks: Record<string, unknown> = {};

  // Miro API connectivity
  const start = Date.now();
  try {
    const response = await fetch('https://api.miro.com/v2/boards?limit=1', {
      headers: { 'Authorization': `Bearer ${process.env.MIRO_ACCESS_TOKEN}` },
      signal: AbortSignal.timeout(5000),
    });

    checks.miro = {
      status: response.ok ? 'healthy' : 'degraded',
      latencyMs: Date.now() - start,
      rateLimitRemaining: response.headers.get('X-RateLimit-Remaining'),
      httpStatus: response.status,
    };
  } catch (err) {
    checks.miro = { status: 'unhealthy', error: err.message };
  }

  return {
    status: Object.values(checks).every((c: any) => c.status === 'healthy') ? 'healthy' : 'degraded',
    services: checks,
    timestamp: new Date().toISOString(),
  };
}

Webhook URL Registration via API

After deploying, register your webhook endpoint programmatically:

// Register board subscription webhook
// POST https://api.miro.com/v2-experimental/webhooks/board_subscriptions
const subscription = await fetch(
  'https://api.miro.com/v2-experimental/webhooks/board_subscriptions',
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.MIRO_ACCESS_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      boardId: 'your-board-id',
      callbackUrl: 'https://your-app.com/api/webhooks/miro',
      status: 'enabled',
    }),
  }
);

Instructions

Use the ordered procedures and code samples in this guide as a sequence: begin with the prerequisites, apply the configuration or operational step for the target environment, then perform the documented validation or cleanup before proceeding. Keep credentials in the documented secret store; never hard-code them in source.

Output

Following this guide produces the Miro integration outcome for its topic—configuration, validation evidence, operational recovery, or a documented migration result. Record command output and relevant identifiers so a failed step is traceable.

Examples

Start with the smallest applicable command or code example in the relevant section, using a dedicated test board and non-production credentials. Confirm the expected response or validation result before applying the pattern to production.

Error Handling

Resources

• Miro OAuth 2.0
• Miro Webhooks Setup
• Vercel Serverless Functions
• Fly.io Secrets
• Cloud Run Secrets

Next Steps

For webhook handling patterns, see miro-webhooks-events.