@canva/cli 1.19.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
@@ -23,7 +23,6 @@
     "canva": "./cli.js"
   },
   "files": [
-    "templates",
     "cli.js",
     "LICENSE.md",
     "README.md",
@@ -33,7 +32,7 @@
   "dependencies": {
     "ink": "6.3.1",
     "react": "^19.2.3",
-    "@modelcontextprotocol/sdk": "1.25.2",
+    "@modelcontextprotocol/sdk": "1.27.1",
     "react-docgen-typescript": "2.4.0"
   },
   "keywords": [

package/templates/base/backend/base_backend/create.ts

@@ -1,114 +0,0 @@
-/* eslint-disable no-console */
-import { TokenVerificationError } from "@canva/app-middleware";
-import debug from "debug";
-import express from "express";
-import type { NextFunction, Request, Response } from "express";
-import fs from "fs";
-import http from "http";
-import https from "https";
-
-const serverDebug = debug("server");
-
-interface BaseServer {
-  app: express.Express;
-
-  /**
-   * Starts the server on the address or port provided
-   * @param address port number or string address or if left undefined express defaults to port 3000
-   */
-  start: (address: number | string | undefined) => void;
-}
-
-/**
- * createBaseServer instantiates a customised express server with:
- * - json body handling
- * - health check endpoint
- * - catchall endpoint
- * - error handler catch route
- * - process termination handling
- * - debug logging - prefix starting your server with `DEBUG=server npm run XXX`
- *
- * @returns BaseServer object containing the express app and a start function
- */
-export function createBaseServer(router: express.Router): BaseServer {
-  const SHOULD_ENABLE_HTTPS = process.env?.SHOULD_ENABLE_HTTPS === "true";
-  const HTTPS_CERT_FILE = process.env?.HTTPS_CERT_FILE;
-  const HTTPS_KEY_FILE = process.env?.HTTPS_KEY_FILE;
-
-  const app = express();
-  app.use(express.json());
-
-  // It can help to provide an extra layer of obsecurity to reduce server fingerprinting.
-  app.disable("x-powered-by");
-
-  // Health check endpoint
-  app.get("/healthz", (req, res) => {
-    res.sendStatus(200);
-  });
-
-  // logging middleware
-  app.use((req, _res, next) => {
-    serverDebug(`${new Date().toISOString()}: ${req.method} ${req.url}`);
-    next();
-  });
-
-  // Custom routes router
-  app.use(router);
-
-  // catch all router
-  app.all("*", (req, res) => {
-    res.status(404).send({
-      error: `unhandled '${req.method}' on '${req.url}'`,
-    });
-  });
-
-  // default error handler
-  app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
-    // Handle authentication errors from @canva/app-middleware
-    if (err instanceof TokenVerificationError) {
-      res.status(err.statusCode).json({
-        error: err.code,
-        message: err.message,
-      });
-      return;
-    }
-
-    console.error(err.stack);
-    res.status(500).send({
-      error: "something went wrong",
-    });
-  });
-
-  let server;
-  if (SHOULD_ENABLE_HTTPS) {
-    if (!HTTPS_CERT_FILE || !HTTPS_KEY_FILE) {
-      throw new Error(
-        "Looks like you're running the example with --use-https flag, but SSL certificates haven't been generated. Please remove the .ssl/ folder and re-run the command again.",
-      );
-    }
-
-    server = https.createServer(
-      {
-        key: fs.readFileSync(HTTPS_KEY_FILE),
-        cert: fs.readFileSync(HTTPS_CERT_FILE),
-      },
-      app,
-    );
-  } else {
-    server = http.createServer(app);
-  }
-
-  return {
-    app,
-    start: (address: number | string | undefined) => {
-      console.log(`Listening on '${address}'`);
-      server.listen(address);
-      process.on("SIGTERM", () => {
-        serverDebug("SIGTERM signal received: closing HTTP server");
-        server.close(() => {
-          serverDebug("HTTP server closed");
-        });
-      });
-    },
-  };
-}

package/templates/base/backend/database/database.ts

@@ -1,42 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-
-/**
- * This file creates a "database" out of a JSON file. It's only for
- * demonstration purposes. A real app should use a real database.
- */
-const DATABASE_FILE_PATH = path.join(__dirname, "db.json");
-
-interface Database<T> {
-  read(): Promise<T>;
-  write(data: T): Promise<void>;
-}
-
-export class JSONFileDatabase<T> implements Database<T> {
-  constructor(private readonly seedData: T) {}
-
-  // Creates a database file if one doesn't already exist
-  private async init(): Promise<void> {
-    try {
-      // Do nothing, since the database is initialized
-      await fs.stat(DATABASE_FILE_PATH);
-    } catch {
-      const file = JSON.stringify(this.seedData);
-      await fs.writeFile(DATABASE_FILE_PATH, file);
-    }
-  }
-
-  // Loads and parses the database file
-  async read(): Promise<T> {
-    await this.init();
-    const file = await fs.readFile(DATABASE_FILE_PATH, "utf8");
-    return JSON.parse(file);
-  }
-
-  // Overwrites the database file with provided data
-  async write(data: T): Promise<void> {
-    await this.init();
-    const file = JSON.stringify(data);
-    await fs.writeFile(DATABASE_FILE_PATH, file);
-  }
-}

package/templates/base/backend/routers/auth.ts

@@ -1,288 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion -- user is guaranteed by verifyToken middleware */
-import { tokenExtractors, user } from "@canva/app-middleware/express";
-import chalk from "chalk";
-import cookieParser from "cookie-parser";
-import crypto from "crypto";
-import "dotenv/config";
-import express from "express";
-import basicAuth from "express-basic-auth";
-import { JSONFileDatabase } from "../database/database";
-
-/**
- * These are the hard-coded credentials for logging in to this template.
- */
-const USERNAME = "username";
-const PASSWORD = "password";
-
-const COOKIE_EXPIRY_MS = 5 * 60 * 1000; // 5 minutes
-
-const CANVA_BASE_URL = "https://www.canva.com";
-
-interface Data {
-  users: string[];
-}
-
-/**
- * For more information on Authentication, refer to our documentation: {@link https://www.canva.dev/docs/apps/authenticating-users/#types-of-authentication}.
- */
-export const createAuthRouter = () => {
-  const APP_ID = getAppId();
-
-  /**
-   * Set up a database with a "users" table. In this example code, the
-   * database is simply a JSON file.
-   */
-  const db = new JSONFileDatabase<Data>({ users: [] });
-
-  const router = express.Router();
-
-  /**
-   * The `cookieParser` middleware allows the routes to read and write cookies.
-   *
-   * By passing a value into the middleware, we enable the "signed cookies" feature of Express.js. The
-   * value should be static and cryptographically generated. If it's dynamic (as shown below), cookies
-   * won't persist between server restarts.
-   *
-   * TODO: Replace `crypto.randomUUID()` with a static value, loaded via an environment variable.
-   */
-  router.use(cookieParser(crypto.randomUUID()));
-
-  /**
-   * This endpoint is hit at the start of the authentication flow. It contains a state which must
-   * be passed back to canva so that Canva can verify the response. It must also set a nonce in the
-   * user's browser cookies and send the nonce back to Canva as a url parameter.
-   *
-   * If Canva can validate the state, it will then redirect back to the chosen redirect url.
-   */
-  router.get("/configuration/start", async (req, res) => {
-    /**
-     * Generate a unique nonce for each request. A nonce is a random, single-use value
-     * that's impossible to guess or enumerate. We recommended using a Version 4 UUID that
-     * is cryptographically secure, such as one generated by the `randomUUID` method.
-     */
-    const nonce = crypto.randomUUID();
-    // Set the expiry time for the nonce. We recommend 5 minutes.
-    const expiry = Date.now() + COOKIE_EXPIRY_MS;
-
-    // Create a JSON string that contains the nonce and an expiry time
-    const nonceWithExpiry = JSON.stringify([nonce, expiry]);
-
-    // Set a cookie that contains the nonce and the expiry time
-    res.cookie("nonce", nonceWithExpiry, {
-      secure: true,
-      httpOnly: true,
-      maxAge: COOKIE_EXPIRY_MS,
-      signed: true,
-    });
-
-    // Create the query parameters that Canva requires
-    const params = new URLSearchParams({
-      nonce,
-      state: req?.query?.state?.toString() || "",
-    });
-
-    // Redirect to Canva with required parameters
-    res.redirect(302, `${CANVA_BASE_URL}/apps/configure/link?${params}`);
-  });
-
-  /**
-   * This endpoint renders a login page. Once the user logs in, they're
-   * redirected back to Canva, which completes the authentication flow.
-   */
-  router.get(
-    "/redirect-url",
-    /**
-     * Use a JSON Web Token (JWT) to verify incoming requests. The JWT is
-     * extracted from the `canva_user_token` parameter.
-     */
-    user.verifyToken({
-      appId: APP_ID,
-      tokenExtractor: tokenExtractors.fromQuery("canva_user_token"),
-    }),
-    /**
-     * Warning: For demonstration purposes, we're using basic authentication and
-     * hard- coding a username and password. This is not a production-ready
-     * solution!
-     */
-    basicAuth({
-      users: { [USERNAME]: PASSWORD },
-      challenge: true,
-    }),
-    async (req, res) => {
-      const failureResponse = () => {
-        const params = new URLSearchParams({
-          success: "false",
-          state: req.query.state?.toString() || "",
-        });
-        res.redirect(302, `${CANVA_BASE_URL}/apps/configured?${params}`);
-      };
-
-      // Get the nonce and expiry time stored in the cookie.
-      const cookieNonceAndExpiry = req.signedCookies.nonce;
-
-      // Get the nonce from the query parameter.
-      const queryNonce = req.query.nonce?.toString();
-
-      // After reading the cookie, clear it. This forces abandoned auth flows to be restarted.
-      res.clearCookie("nonce");
-
-      let cookieNonce = "";
-      let expiry = 0;
-
-      try {
-        [cookieNonce, expiry] = JSON.parse(cookieNonceAndExpiry);
-      } catch {
-        // If the nonce can't be parsed, assume something has been compromised and exit.
-        return failureResponse();
-      }
-
-      // If the nonces are empty, exit the authentication flow.
-      if (
-        isEmpty(cookieNonceAndExpiry) ||
-        isEmpty(queryNonce) ||
-        isEmpty(cookieNonce)
-      ) {
-        return failureResponse();
-      }
-
-      /**
-       * Check that:
-       *
-       * - The nonce in the cookie and query parameter contain the same value
-       * - The nonce has not expired
-       *
-       * **Note:** We could rely on the cookie expiry, but that is vulnerable to tampering
-       * with the browser's time. This allows us to double-check based on server time.
-       */
-      if (expiry < Date.now() || cookieNonce !== queryNonce) {
-        return failureResponse();
-      }
-
-      // Get the userId from user object in the request context
-      const { userId } = req.canva.user!;
-
-      // Load the database
-      const data = await db.read();
-
-      // Add the user to the database
-      if (!data.users.includes(userId)) {
-        data.users.push(userId);
-        await db.write(data);
-      }
-
-      // Create query parameters for redirecting back to Canva
-      const params = new URLSearchParams({
-        success: "true",
-        state: req?.query?.state?.toString() || "",
-      });
-
-      // Redirect the user back to Canva
-      res.redirect(302, `${CANVA_BASE_URL}/apps/configured?${params}`);
-    },
-  );
-
-  /**
-   * TODO: Add this middleware to all routes that will receive requests from
-   * your app.
-   */
-  const jwtMiddleware = user.verifyToken({ appId: APP_ID });
-
-  /**
-   * This endpoint is called when a user disconnects an app from their account.
-   * The app is expected to de-authenticate the user on its backend, so if the
-   * user reconnects the app, they'll need to re-authenticate.
-   *
-   * Note: The name of the endpoint is *not* configurable.
-   *
-   * Note: This endpoint is called by Canva's backend directly and must be
-   * exposed via a public URL. To test this endpoint, add a proxy URL, such as
-   * one generated by nGrok, to the 'Add authentication' section in the
-   * Developer Portal. Localhost addresses will not work to test this endpoint.
-   */
-  router.post("/configuration/delete", jwtMiddleware, async (req, res) => {
-    // Get the userId from user object in the request context
-    const { userId } = req.canva.user!;
-
-    // Load the database
-    const data = await db.read();
-
-    // Remove the user from the database
-    await db.write({
-      users: data.users.filter((user) => user !== userId),
-    });
-
-    // Confirm that the user was removed
-    res.send({
-      type: "SUCCESS",
-    });
-  });
-
-  /**
-   * All routes that start with /api will be protected by JWT authentication
-   */
-  router.use("/api", jwtMiddleware);
-
-  /**
-   * This endpoint checks if a user is authenticated.
-   */
-  router.post("/api/authentication/status", async (req, res) => {
-    // Load the database
-    const data = await db.read();
-
-    // Check if the user is authenticated
-    const isAuthenticated = data.users.includes(req.canva.user!.userId);
-
-    // Return the authentication status
-    res.send({
-      isAuthenticated,
-    });
-  });
-
-  return router;
-};
-
-/**
- * Checks if a given param is nullish or an empty string
- *
- * @param str The string to check
- * @returns true if the string is nullish or empty, false otherwise
- */
-function isEmpty(str?: string): boolean {
-  return str == null || str.length === 0;
-}
-
-/**
- * Retrieves the CANVA_APP_ID from the environment variables.
- * Throws an error if the CANVA_APP_ID environment variable is undefined or set to a default value.
- *
- * @returns {string} The Canva App ID
- * @throws {Error} If CANVA_APP_ID environment variable is undefined or set to a default value
- */
-function getAppId(): string {
-  // TODO: Set the CANVA_APP_ID environment variable in the project's .env file
-  const appId = process.env.CANVA_APP_ID;
-
-  if (!appId) {
-    throw new Error(
-      `The CANVA_APP_ID environment variable is undefined. Set the variable in the project's .env file.`,
-    );
-  }
-
-  if (appId === "YOUR_APP_ID_HERE") {
-    // eslint-disable-next-line no-console
-    console.log(
-      chalk.bgRedBright(
-        "Default 'CANVA_APP_ID' environment variable detected.",
-      ),
-    );
-    // eslint-disable-next-line no-console
-    console.log(
-      "Please update the 'CANVA_APP_ID' environment variable in your project's `.env` file " +
-        `with the App ID obtained from the Canva Developer Portal: ${chalk.greenBright(
-          "https://www.canva.com/developers/apps",
-        )}\n`,
-    );
-  }
-
-  return appId;
-}

package/templates/base/declarations/declarations.d.ts

@@ -1,29 +0,0 @@
-declare module "*.css" {
-  const styles: { [className: string]: string };
-  export = styles;
-}
-
-declare module "*.jpg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.jpeg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.png" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.svg" {
-  const content: React.FunctionComponent<{
-    size?: "tiny" | "small" | "medium" | "large";
-    className?: string;
-  }>;
-  export default content;
-}
-
-declare const BACKEND_HOST: string;

package/templates/base/eslint.config.mjs

@@ -1,14 +0,0 @@
-import canvaPlugin from "@canva/app-eslint-plugin";
-
-export default [
-  {
-    ignores: [
-      "**/node_modules/",
-      "**/dist",
-      "**/*.d.ts",
-      "**/*.d.tsx",
-      "**/*.config.*",
-    ],
-  },
-  ...canvaPlugin.configs.apps,
-];

package/templates/base/package.json

@@ -1,91 +0,0 @@
-{
-  "private": true,
-  "name": "base",
-  "version": "1.0.0",
-  "description": "All other templates should use this as the base. create-app/create-app-steps looks at the canvaCliMetadata when patching the package json outputs",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "author": "Canva Pty Ltd.",
-  "dependencies": {
-    "@canva/app-hooks": "^0.0.0-beta.4",
-    "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.5.0",
-    "@canva/asset": "^2.3.0",
-    "@canva/design": "^2.8.0",
-    "@canva/error": "^2.2.0",
-    "@canva/platform": "^2.2.1",
-    "@canva/user": "^2.1.2",
-    "cookie-parser": "1.4.7",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-intl": "^7.1.11"
-  },
-  "devDependencies": {
-    "@canva/cli": ">= 0.0.1-beta.13",
-    "@ngrok/ngrok": "1.5.2",
-    "@svgr/webpack": "8.1.0",
-    "@types/debug": "4.1.12",
-    "@types/express": "4.17.21",
-    "@types/jest": "29.5.14",
-    "@types/jsonwebtoken": "9.0.10",
-    "@types/node": "20.19.2",
-    "@types/node-fetch": "2.6.13",
-    "@types/node-forge": "1.3.14",
-    "@types/nodemon": "1.19.6",
-    "@types/prompts": "2.4.9",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.1",
-    "@types/webpack-env": "1.18.8",
-    "chalk": "4.1.2",
-    "cli-table3": "0.6.5",
-    "css-loader": "7.1.2",
-    "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.1.1",
-    "debug": "4.4.1",
-    "dotenv": "16.6.0",
-    "exponential-backoff": "3.1.2",
-    "express": "4.22.1",
-    "express-basic-auth": "1.2.1",
-    "jest": "29.7.0",
-    "jsonwebtoken": "9.0.3",
-    "jwks-rsa": "3.2.0",
-    "mini-css-extract-plugin": "2.9.4",
-    "node-fetch": "3.3.2",
-    "node-forge": "1.3.2",
-    "nodemon": "3.0.1",
-    "open": "8.4.2",
-    "postcss-loader": "8.1.1",
-    "prettier": "3.6.2",
-    "prompts": "2.4.2",
-    "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.14",
-    "tree-kill": "1.2.2",
-    "ts-jest": "29.4.1",
-    "ts-loader": "9.5.4",
-    "ts-node": "10.9.2",
-    "typescript": "5.9.2",
-    "url-loader": "4.1.1",
-    "webpack": "5.99.9",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.2",
-    "yargs": "17.7.2"
-  },
-  "keywords": [
-    "canva-apps-sdk"
-  ],
-  "engines": {
-    "node": ">=20.10.0",
-    "npm": "^10 || ^11"
-  },
-  "canvaCliMetadata": {
-    "metaFields": [
-      "name",
-      "version"
-    ],
-    "inheritable": [
-      "author",
-      "license",
-      "engines",
-      "keywords"
-    ]
-  }
-}

package/templates/base/scripts/copy_env.ts

@@ -1,13 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable no-console */
-import fs from "fs";
-import path from "path";
-
-const envPath = path.resolve(__dirname, "..", ".env");
-const templatePath = path.resolve(__dirname, "..", ".env.template");
-
-if (!fs.existsSync(templatePath)) {
-  console.warn(".env.template file does not exist, skipping copy of .env file");
-} else if (!fs.existsSync(envPath)) {
-  fs.copyFileSync(templatePath, envPath);
-}