Canva Profile Viewer

A simple application that allows users to view their Canva profile information and designs using the Canva Connect API. This project is a modified version of the original Canva Connect API Starter Kit, customized to focus on profile viewing and design management functionality.

Features

• OAuth authentication with Canva
• View user profile information
• Browse user's designs with refresh capability
• Create new designs directly from the app
• Direct links to open designs in Canva
• Debug panel for API responses
• Responsive design with Material UI

Disclaimer

This project is not officially affiliated with, authorized, maintained, sponsored, or endorsed by Canva or any of its affiliates or subsidiaries. This is an independent project that uses Canva's Connect API.

Prerequisites

• Node.js v20.14.0 or higher
• npm v9 or v10
• A Canva Developer account
• A registered Canva app with the following permissions:
  • profile:read
  • design:meta:read
  • design:content:read (optional, for more detailed design information)

Note: To make sure you're running the correct version of Node.js, we recommend using a version manager, such as nvm. The .nvmrc file in the root directory of this repo will ensure the correct version is used once you run nvm install.

Setup

1. Create a Canva Integration

1. Open the Developer Portal, and click Create an integration.

2. Under Configuration → Configure your integration:

   • Integration name: Add a name (e.g., "Canva Profile Viewer").
   • Client ID: Make a note of this value; you'll need it in a later step.
   • Generate secret: Click this and save the secret in a secure location, as you'll need it for a later step.

3. Under Scopes → Set the scopes, check the following boxes:

   • profile: Read.
   • design:meta: Read.
   • design:content: Read (optional, for more detailed design information).

4. Under Authentication → Add Authentication, locate URL 1 and enter the following value:

   http://127.0.0.1:3001/oauth/redirect
   

2. Configure the Application

1. Install dependencies:

   npm install
   cd demos/playground

2. Add your integration settings to the demos/playground/.env file:

   BACKEND_PORT=3001
   BACKEND_URL=http://127.0.0.1:3001
   FRONTEND_URL=http://127.0.0.1:3000
   BASE_CANVA_CONNECT_API_URL=https://api.canva.com/rest
   BASE_CANVA_CONNECT_AUTH_URL=https://www.canva.com/api
   CANVA_CLIENT_ID=your-canva-app-id
   CANVA_CLIENT_SECRET=your-canva-app-secret
   DATABASE_ENCRYPTION_KEY=generate-a-random-key-or-use-the-provided-script
   

   • DATABASE_ENCRYPTION_KEY: This will encrypt and decrypt the tokens stored in the JSON database. A key is automatically generated for you after running npm install, and will already be set in .env.
   • CANVA_CLIENT_ID: This is the Client ID from the prerequisites.
   • CANVA_CLIENT_SECRET: This is the client secret you generated in the prerequisites.

Running the Application

1. Navigate to the playground demo directory (if not already there):

   cd demos/playground

2. Start the application:

   npm start

3. View your app: http://127.0.0.1:3000

Warning: Accessing the app via localhost:3000 will throw CORS errors. You must access the app via 127.0.0.1:3000.

Key Components

• Profile Viewer: View your Canva profile information including display name and email
• Designs Viewer: Browse and refresh your Canva designs with direct links to open them
• Design Creator: Create new designs in Canva directly from the application
• API Debug: Test and debug API responses for troubleshooting

Modifications from Original Starter Kit

This repository is a modified version of the Canva Connect API Starter Kit with the following changes:

• Enhanced profile viewing capabilities
• Improved design listing with refresh functionality
• Added direct links to open designs in Canva
• Better error handling and user feedback
• Removed e-commerce demo to focus on core profile and design functionality

OpenAPI Spec

The Canva Connect API doesn't maintain nor publish client SDKs, however, we have made our OpenAPI spec publicly available, so you can use it with your favorite code generation library, such as openapi-generator to generate client SDKs in your language of choice!

To demonstrate this, we're using openapi-ts to generate TypeScript SDKs in client/ts which is used in our demo app.

License

This project is licensed under the terms of the original Canva License for the base code, and ISC License for the modifications.

Acknowledgements

• Original Canva Connect API Starter Kit
• Canva Connect API Documentation