canva-install-auth

name	canva-install-auth
description	Set up Canva Connect API OAuth 2.0 PKCE authentication and project scaffolding. Use when creating a new Canva integration, setting up OAuth credentials, or initializing a Canva Connect API project. Trigger with phrases like "install canva", "setup canva", "canva auth", "configure canva API", "canva OAuth".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Bash(npx:*), Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","design","canva"]
compatibility	Designed for Claude Code

Canva Connect API — Install & Auth

Overview

Set up a Canva Connect API integration with OAuth 2.0 Authorization Code flow with PKCE (SHA-256). The Canva Connect API is a REST API at https://api.canva.com/rest/v1/* — there is no SDK package. All calls use fetch or axios with Bearer tokens.

Prerequisites

• Node.js 18+ (for native crypto.subtle and fetch)
• A Canva account at canva.com
• An integration registered at canva.dev

Instructions

Step 1: Register Your Integration

1. Go to Settings > Integrations at canva.com/developers
2. Create a new integration — note your Client ID and Client Secret
3. Add redirect URI(s): e.g. http://localhost:3000/auth/canva/callback
4. Enable required scopes under Permissions

Step 2: Store Credentials

# .env (NEVER commit — add to .gitignore)
CANVA_CLIENT_ID=OCAxxxxxxxxxxxxxxxx
CANVA_CLIENT_SECRET=xxxxxxxxxxxxxxxx
CANVA_REDIRECT_URI=http://localhost:3000/auth/canva/callback

echo '.env' >> .gitignore
echo '.env.local' >> .gitignore

Step 3: Implement OAuth 2.0 PKCE Flow

// src/canva/auth.ts
import crypto from 'crypto';

// 1. Generate PKCE code verifier and challenge
export function generatePKCE(): { verifier: string; challenge: string } {
  const verifier = crypto.randomBytes().(); 
   challenge = crypto
    .()
    .(verifier)
    .();
   { verifier, challenge };
}


  ():  {
   params =  ({
    : ,
    : opts.,
    : opts.,
    : opts..(),
    : opts.,
    : ,
    : opts.,
  });
   ;
}


   (): <{ : ; : ; :  }> {
   basicAuth = .(
    
  ).();

   res =  (, {
    : ,
    : {
      : ,
      : ,
    },
    :  ({
      : ,
      : opts.,
      : opts.,
      : opts.,
    }),
  });

   (!res.) {
     err =  res.();
      ();
  }
   res.();
}


   (): <{ : ; : ; :  }> {
   basicAuth = .(
    
  ).();

   res =  (, {
    : ,
    : {
      : ,
      : ,
    },
    :  ({
      : ,
      : opts.,
    }),
  });

   (!res.)   ();
   res.();
}