// src/canva/webhooks.ts
import { createRemoteJWKSet, jwtVerify, JWTPayload } from 'jose';

// Canva publishes public keys at this endpoint
// GET https://api.canva.com/rest/v1/connect/keys
const CANVA_JWKS = createRemoteJWKSet(
  new URL('https://api.canva.com/rest/v1/connect/keys')
);

interface CanvaWebhookPayload extends JWTPayload {
  notification_type: string;
  notification: Record<string, any>;
  timestamp: string;
  user_id: string;
  team_id: string;
}

export async function verifyCanvaWebhook(
  rawBody: string
): Promise<CanvaWebhookPayload | null> {
  try {
    const { payload } = await jwtVerify(rawBody, CANVA_JWKS, {
      issuer: 'canva',
    });
    return payload as CanvaWebhookPayload;
  } catch (error) {
    console.error('Webhook verification failed:', error);
    return null;
  }
}

import express from 'express';
import { verifyCanvaWebhook } from './canva/webhooks';

const app = express();

// IMPORTANT: Accept raw text body for JWT verification
app.post('/webhooks/canva',
  express.text({ type: '*/*' }),
  async (req, res) => {
    const payload = await verifyCanvaWebhook(req.body);

    if (!payload) {
      return res.status(401).json({ error: 'Invalid signature' });
    }

    // Must return 200 to acknowledge — other codes = error
    res.status(200).json({ received: true });

    // Process async to avoid timeout
    handleCanvaEvent(payload).catch(console.error);
  }
);

// Canva webhook notification types
type CanvaNotificationType =
  | 'comment'                    // New comment on a design
  | 'design_access_requested'   // Someone requests design access
  | 'design_approval_requested' // Approval workflow triggered
  | 'design_approval_response'  // Approval accepted/rejected
  | 'design_mention'            // User @mentioned in a design
  | 'folder_access_requested'   // Folder access request
  | 'design_shared'             // Design shared with user
  | 'folder_shared'             // Folder shared with user
  | 'suggestion'                // Design suggestion made
  | 'team_invite'               // Team invitation
  | 'design_approval_reviewer_invalidated'; // Reviewer removed

const handlers: Record<string, (notification: any) => Promise<void>> = {
  comment: async (data) => {
    console.log(`Comment on design ${data.design_id}: ${data.message}`);
    // Sync comment to your ticketing system, Slack, etc.
  },

  design_access_requested: async (data) => {
    console.log(`Access requested for design ${data.design_id} by user ${data.requesting_user_id}`);
    // Auto-approve or notify admin
  },

  design_shared: async (data) => {
    console.log(`Design ${data.design_id} shared with permissions: ${data.permissions}`);
    // Update your access control records
  },

  folder_access_requested: async (data) => {
    console.log(`Folder access requested: ${data.folder_id}`);
  },
};

async function handleCanvaEvent(payload: CanvaWebhookPayload): Promise<void> {
  const handler = handlers[payload.notification_type];

  if (!handler) {
    console.log(`Unhandled notification type: ${payload.notification_type}`);
    return;
  }

  try {
    await handler(payload.notification);
    console.log(`Processed ${payload.notification_type} at ${payload.timestamp}`);
  } catch (error) {
    console.error(`Failed to process ${payload.notification_type}:`, error);
  }
}

import { Redis } from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

async function processIdempotent(
  notificationId: string,
  handler: () => Promise<void>
): Promise<void> {
  const key = `canva:webhook:${notificationId}`;
  const alreadyProcessed = await redis.set(key, '1', 'EX', 604800, 'NX'); // 7 days, NX = only if not exists

  if (!alreadyProcessed) {
    console.log(`Duplicate webhook skipped: ${notificationId}`);
    return;
  }

  await handler();
}

# 1. Expose local server via ngrok
ngrok http 3000

# 2. Set the ngrok HTTPS URL in your Canva integration settings
# e.g., https://abc123.ngrok-free.app/webhooks/canva

# 3. Trigger events by commenting on a design shared with the authorized user