@canva/cli 0.0.1-beta.2 → 0.0.1-beta.21

package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -0,0 +1,101 @@
+/* eslint-disable no-console */
+import * as debug from "debug";
+import type { Request, Response, NextFunction } from "express";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import Express from "express-serve-static-core";
+
+/**
+ * Prefix your start command with `DEBUG=express:middleware:bearer` to enable debug logging
+ * for this middleware
+ */
+const debugLogger = debug("express:middleware:bearer");
+
+/**
+ * Augment the Express request context to include the appId/userId/brandId fields decoded
+ * from the JWT.
+ */
+declare module "express-serve-static-core" {
+  export interface Request {
+    user_id: string;
+  }
+}
+
+const sendUnauthorizedResponse = (res: Response, message?: string) =>
+  res.status(401).json({ error: "unauthorized", message });
+
+/**
+ * An Express.js middleware verifying a Bearer token.
+ * This middleware extracts the token from the `Authorization` header.
+ *
+ * @param getTokenFromRequest - A function that extracts a token from the request. If a token isn't found, throw a `JWTAuthorizationError`.
+ * @returns An Express.js middleware for verifying and decoding JWTs.
+ */
+export function createBearerMiddleware(
+  tokenToUser: (access_token: string) => Promise<string | undefined>,
+  getTokenFromRequest: GetTokenFromRequest = getTokenFromHttpHeader,
+): (req: Request, res: Response, next: NextFunction) => void {
+  return async (req, res, next) => {
+    try {
+      debugLogger(`processing token for '${req.url}'`);
+
+      const token = await getTokenFromRequest(req);
+      const user = await tokenToUser(token);
+
+      if (!user) {
+        throw new AuthorizationError("Token is invalid");
+      }
+
+      req.user_id = user;
+
+      next();
+    } catch (e) {
+      if (e instanceof AuthorizationError) {
+        return sendUnauthorizedResponse(res, e.message);
+      }
+
+      next(e);
+    }
+  };
+}
+
+export type GetTokenFromRequest = (req: Request) => Promise<string> | string;
+
+export const getTokenFromHttpHeader: GetTokenFromRequest = (
+  req: Request,
+): string => {
+  // The names of a HTTP header bearing the JWT, and a scheme
+  const headerName = "Authorization";
+  const schemeName = "Bearer";
+
+  const header = req.header(headerName);
+  if (!header) {
+    throw new AuthorizationError(`Missing the "${headerName}" header`);
+  }
+
+  if (!header.match(new RegExp(`^${schemeName}\\s+[^\\s]+$`, "i"))) {
+    console.trace(
+      `jwtMiddleware: failed to match token in "${headerName}" header`,
+    );
+    throw new AuthorizationError(
+      `Missing a "${schemeName}" token in the "${headerName}" header`,
+    );
+  }
+
+  const token = header.replace(new RegExp(`^${schemeName}\\s+`, "i"), "");
+
+  return token;
+};
+
+/**
+ * A class representing JWT validation errors in the JWT middleware.
+ * The error message provided to the constructor will be forwarded to the
+ * API consumer trying to access a JWT-protected endpoint.
+ * @private
+ */
+export class AuthorizationError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    Object.setPrototypeOf(this, AuthorizationError.prototype);
+  }
+}

package/templates/gen_ai/utils/backend/bearer_middleware/index.ts

@@ -0,0 +1 @@
+export { createBearerMiddleware } from "./bearer_middleware";

package/templates/gen_ai/utils/backend/bearer_middleware/tests/bearer_middleware.tests.ts

@@ -0,0 +1,192 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import type { NextFunction, Request, Response } from "express";
+import type {
+  createBearerMiddleware,
+  GetTokenFromRequest,
+} from "../bearer_middleware";
+
+type Middleware = (req: Request, res: Response, next: NextFunction) => void;
+
+describe("createBearerMiddleware", () => {
+  let fakeGetTokenFromRequest: jest.MockedFn<GetTokenFromRequest>;
+  let verify: jest.MockedFn<(token: string) => Promise<string | undefined>>;
+
+  let req: Request;
+  let res: Response;
+  let next: jest.MockedFn<() => void>;
+
+  let AuthorizationError: typeof Error;
+  let createBearerMiddlewareFn: typeof createBearerMiddleware;
+  let bearerMiddleware: Middleware;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.resetModules();
+
+    fakeGetTokenFromRequest = jest.fn();
+    verify = jest.fn();
+
+    const middlewareModule = require("../bearer_middleware");
+    createBearerMiddlewareFn = middlewareModule.createBearerMiddleware;
+    AuthorizationError = middlewareModule.AuthorizationError;
+  });
+
+  describe("When called", () => {
+    beforeEach(() => {
+      req = {
+        header: (_name: string) => undefined,
+      } as Request;
+
+      res = {
+        status: jest.fn().mockReturnThis(),
+        json: jest.fn().mockReturnThis(),
+        send: jest.fn().mockReturnThis(),
+      } as unknown as Response;
+
+      next = jest.fn();
+
+      bearerMiddleware = createBearerMiddlewareFn(
+        verify,
+        fakeGetTokenFromRequest,
+      );
+    });
+
+    describe("When `getTokenFromRequest` throws an exception ('Fake error')", () => {
+      beforeEach(() => {
+        fakeGetTokenFromRequest.mockRejectedValue(
+          new AuthorizationError("Fake error"),
+        );
+      });
+
+      it(`Does not call next() and returns HTTP 401 with error = "unauthorized" and message = "Fake error"`, async () => {
+        expect.assertions(8);
+
+        expect(fakeGetTokenFromRequest).not.toHaveBeenCalled();
+        await bearerMiddleware(req, res, next);
+
+        expect(fakeGetTokenFromRequest).toHaveBeenCalledTimes(1);
+        expect(fakeGetTokenFromRequest).toHaveBeenLastCalledWith(req);
+
+        expect(res.status).toHaveBeenCalledTimes(1);
+        expect(res.status).toHaveBeenLastCalledWith(401);
+
+        expect(res.json).toHaveBeenCalledTimes(1);
+        expect(res.json).toHaveBeenLastCalledWith({
+          error: "unauthorized",
+          message: "Fake error",
+        });
+
+        expect(next).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("When the middleware cannot verify the token", () => {
+      beforeEach(() => {
+        fakeGetTokenFromRequest.mockReturnValue("TOKEN");
+
+        verify.mockImplementation(() => Promise.resolve(undefined));
+      });
+
+      it(`Does not call next() and returns HTTP 401 with error = "unauthorized" and message = "Token is invalid"`, async () => {
+        expect.assertions(5);
+
+        await bearerMiddleware(req, res, next);
+
+        expect(res.status).toHaveBeenCalledTimes(1);
+        expect(res.status).toHaveBeenLastCalledWith(401);
+
+        expect(res.json).toHaveBeenCalledTimes(1);
+        expect(res.json).toHaveBeenLastCalledWith({
+          error: "unauthorized",
+          message: "Token is invalid",
+        });
+
+        expect(next).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
+
+describe("getTokenFromHttpHeader", () => {
+  let getHeader: jest.MockedFn<(name: string) => string | undefined>;
+  let req: Request;
+  let getTokenFromHttpHeader: (req: Request) => string;
+  let AuthorizationError: typeof Error;
+
+  beforeEach(() => {
+    getHeader = jest.fn();
+    req = {
+      header: (name: string) => getHeader(name),
+    } as Request;
+
+    const bearerMiddlewareModule = require("../bearer_middleware");
+    getTokenFromHttpHeader = bearerMiddlewareModule.getTokenFromHttpHeader;
+    AuthorizationError = bearerMiddlewareModule.AuthorizationError;
+  });
+
+  describe("When the 'Authorization' header is missing", () => {
+    beforeEach(() => {
+      getHeader.mockReturnValue(undefined);
+    });
+
+    it(`Throws a AuthorizationError with message = 'Missing the "Authorization" header'`, async () => {
+      expect.assertions(3);
+
+      expect(() => getTokenFromHttpHeader(req)).toThrow(
+        new AuthorizationError('Missing the "Authorization" header'),
+      );
+      expect(getHeader).toHaveBeenCalledTimes(1);
+      expect(getHeader).toHaveBeenLastCalledWith("Authorization");
+    });
+  });
+
+  describe("When the 'Authorization' header doesn't have a Bearer scheme", () => {
+    beforeEach(() => {
+      getHeader.mockReturnValue("Beerer FAKE_TOKEN");
+    });
+
+    it(`Throws a AuthorizationError with message = 'Missing a "Bearer" token in the "Authorization" header''`, async () => {
+      expect.assertions(3);
+
+      expect(() => getTokenFromHttpHeader(req)).toThrow(
+        new AuthorizationError(
+          'Missing a "Bearer" token in the "Authorization" header',
+        ),
+      );
+      expect(getHeader).toHaveBeenCalledTimes(1);
+      expect(getHeader).toHaveBeenLastCalledWith("Authorization");
+    });
+  });
+
+  describe("When the 'Authorization' Bearer scheme header doesn't have a token", () => {
+    beforeEach(() => {
+      getHeader.mockReturnValue("Bearer ");
+    });
+
+    it(`Throws a AuthorizationError with message = 'Missing a "Bearer" token in the "Authorization" header'`, async () => {
+      expect.assertions(3);
+
+      expect(() => getTokenFromHttpHeader(req)).toThrow(
+        new AuthorizationError(
+          'Missing a "Bearer" token in the "Authorization" header',
+        ),
+      );
+      expect(getHeader).toHaveBeenCalledTimes(1);
+      expect(getHeader).toHaveBeenLastCalledWith("Authorization");
+    });
+  });
+
+  describe("When the 'Authorization' Bearer scheme header has a token", () => {
+    beforeEach(() => {
+      getHeader.mockReturnValue("Bearer TOKEN");
+    });
+
+    it(`Returns the token`, async () => {
+      expect.assertions(3);
+
+      expect(getTokenFromHttpHeader(req)).toEqual("TOKEN");
+      expect(getHeader).toHaveBeenCalledTimes(1);
+      expect(getHeader).toHaveBeenLastCalledWith("Authorization");
+    });
+  });
+});

package/templates/gen_ai/{webpack.config.cjs → webpack.config.ts}

@@ -1,30 +1,33 @@
-require("dotenv").config();
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-const { DefinePlugin, optimize } = require("webpack");
-const chalk = require("chalk");
-const { transform } = require("@formatjs/ts-transformer");
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 
-/**
- *
- * @param {Object} [options]
- * @param {string} [options.appEntry=./src/index.tsx]
- * @param {string} [options.backendHost]
- * @param {Object} [options.devConfig]
- * @param {number} [options.devConfig.port]
- * @param {boolean} [options.devConfig.enableHmr]
- * @param {boolean} [options.devConfig.enableHttps]
- * @param {string} [options.devConfig.appOrigin]
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.devConfig.certFile]
- * @param {string} [options.devConfig.keyFile]
- * @returns {Object}
- */
-function buildConfig({
+config();
+
+type DevConfig = {
+  port: number;
+  enableHmr: boolean;
+  enableHttps: boolean;
+  appOrigin?: string;
+  appId?: string; // Deprecated in favour of appOrigin
+  certFile?: string;
+  keyFile?: string;
+};
+
+export function buildConfig({
   devConfig,
   appEntry = path.join(process.cwd(), "src", "index.tsx"),
   backendHost = process.env.CANVA_BACKEND_HOST,
-} = {}) {
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+} = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
   if (!backendHost) {
@@ -173,32 +176,23 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }
 
-/**
- *
- * @param {Object} [options]
- * @param {number} [options.port]
- * @param {boolean} [options.enableHmr]
- * @param {boolean} [options.enableHttps]
- * @param {string} [options.appOrigin]
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.certFile]
- * @param {string} [options.keyFile]
- * @returns {Object|null}
- */
-function buildDevConfig(options) {
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
   if (!options) {
-    return null;
+    return {};
   }
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
 
-  let devServer = {
+  let devServer: DevServerConfiguration = {
     server: enableHttps
       ? {
           type: "https",
@@ -265,6 +259,4 @@ function buildDevConfig(options) {
   };
 }
 
-module.exports = () => buildConfig();
-
-module.exports.buildConfig = buildConfig;
+export default buildConfig;

package/templates/hello_world/eslint.config.mjs

@@ -2,8 +2,8 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-import i18n from "./conf/eslint-i18n.mjs";
+import general from "./conf/eslint_general.mjs";
+import i18n from "./conf/eslint_i18n.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -20,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },

package/templates/hello_world/package.json

@@ -3,8 +3,8 @@
   "name": "empty-template",
   "description": "An empty Canva App",
   "scripts": {
-    "extract": "formatjs extract 'src/**/*.{ts,tsx}' --out-file dist/messages_en.json",
-    "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
+    "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
+    "build": "webpack --config webpack.config.ts --mode production && npm run extract",
     "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
     "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
     "format:file": "prettier $1 --no-config --write",
@@ -12,63 +12,85 @@
     "lint:fix": "eslint . --fix",
     "lint:types": "tsc",
     "start": "ts-node ./scripts/start/start.ts",
-    "test": "jest --no-cache --passWithNoTests",
-    "test:watch": "jest --watchAll"
+    "start:preview": "npm run start -- --preview",
+    "test": "jest --no-cache",
+    "test:watch": "jest --watchAll",
+    "test:update": "npm run test -- -u",
+    "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-ui-kit": "^3.8.0",
-    "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/design": "^2.0.0",
-    "@canva/error": "^2.0.0",
+    "@canva/app-i18n-kit": "^1.0.2",
+    "@canva/app-ui-kit": "^4.8.0",
+    "@canva/asset": "^2.1.0",
+    "@canva/design": "^2.4.0",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-intl": "6.6.8"
+    "react-intl": "6.8.7"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.0",
-    "@formatjs/cli": "6.2.12",
-    "@formatjs/ts-transformer": "3.13.14",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.18.0",
+    "@formatjs/cli": "6.3.15",
+    "@formatjs/ts-transformer": "3.13.27",
     "@ngrok/ngrok": "1.4.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
-    "@types/jest": "29.5.12",
+    "@testing-library/react": "16.1.0",
+    "@types/express": "4.17.21",
+    "@types/express-serve-static-core": "4.19.6",
+    "@types/jest": "29.5.14",
+    "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
-    "@types/node-fetch": "2.6.11",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.2.0",
-    "@typescript-eslint/parser": "8.2.0",
+    "@typescript-eslint/eslint-plugin": "8.20.0",
+    "@typescript-eslint/parser": "8.20.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.0.5",
-    "debug": "4.3.6",
-    "dotenv": "16.4.5",
-    "eslint": "8.57.1",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-react": "7.35.0",
+    "cssnano": "7.0.6",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
+    "eslint": "9.18.0",
+    "eslint-plugin-formatjs": "5.2.8",
+    "eslint-plugin-jest": "28.11.0",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-unicorn": "56.0.1",
+    "express": "4.21.2",
+    "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
-    "mini-css-extract-plugin": "2.9.1",
+    "jest-css-modules-transform": "4.4.2",
+    "jest-environment-jsdom": "29.7.0",
+    "jsonwebtoken": "9.0.2",
+    "jwks-rsa": "3.1.0",
+    "mini-css-extract-plugin": "2.9.2",
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
+    "open": "8.4.2",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
+    "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
-    "ts-loader": "9.5.1",
+    "terser-webpack-plugin": "5.3.11",
+    "tree-kill": "1.2.2",
+    "ts-jest": "29.2.5",
+    "ts-loader": "9.5.2",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.94.0",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.2.0",
     "yargs": "17.7.2"
   }
 }

package/templates/hello_world/scripts/copy_env.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import * as fs from "fs";
+import * as path from "path";
+
+const envPath = path.resolve(__dirname, "..", ".env");
+const templatePath = path.resolve(__dirname, "..", ".env.template");
+
+if (!fs.existsSync(envPath)) {
+  fs.copyFileSync(templatePath, envPath);
+}

package/templates/hello_world/scripts/start/app_runner.ts

@@ -1,12 +1,14 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.cjs";
+import { buildConfig } from "../../webpack.config";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(ctx.openPreview, table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,33 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    table: Table.Table,
+  ) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    if (openPreview) {
+      open(generatePreviewResult.data);
+    }
+  };
 }