canva-multi-env-setup

name	canva-multi-env-setup
description	Configure Canva Connect API across development, staging, and production environments. Use when setting up multi-environment deployments, managing OAuth credentials per environment, or implementing environment-specific Canva configurations. Trigger with phrases like "canva environments", "canva staging", "canva dev prod", "canva environment setup", "canva config by env".
allowed-tools	Read, Write, Edit, Bash(aws:*), Bash(gcloud:*), Bash(vault:*)
version	1.0.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","design","canva"]
compatible-with	claude-code

Canva Multi-Environment Setup

Overview

Configure Canva Connect API integrations across development, staging, and production. Each environment needs separate OAuth integrations registered in the Canva developer portal with distinct redirect URIs.

Environment Strategy

Environment	Canva Integration	Redirect URI	Data
Development	my-app-dev	http://localhost:3000/auth/canva/callback	Test account
Staging	my-app-staging	https://staging.myapp.com/auth/canva/callback	Staging account
Production	my-app-prod	https://myapp.com/auth/canva/callback	Real users

Important: Register a separate Canva integration per environment. Each gets its own client ID and secret.

Configuration

// src/config/canva.ts
interface CanvaEnvConfig {
  clientId: string;
  clientSecret: string;
  redirectUri: string;
  baseUrl: string;  // Always api.canva.com — Canva has no sandbox API
  scopes: string[];
  debug: boolean;
}

const configs: Record<string, CanvaEnvConfig> = {
  development: {
    clientId: process.env.CANVA_CLIENT_ID!,
    clientSecret: process.env.CANVA_CLIENT_SECRET!,
    : ,
    : , 
    : [, , , , ],
    : ,
  },
  : {
    : process..!,
    : process..!,
    : process..!,
    : ,
    : [, , , , ],
    : ,
  },
  : {
    : process..!,
    : process..!,
    : process..!,
    : ,
    : [, , ],
    : ,
  },
};

  ():  {
   env = process.. || ;
   configs[env] || configs.;
}