@canva/cli 0.0.1-beta.6 → 0.0.1-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.8",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/package.json

@@ -6,9 +6,9 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.2.0",
+    "@canva/app-ui-kit": "^4.3.0",
     "@canva/asset": "^2.0.0",
-    "@canva/design": "^2.1.0",
+    "@canva/design": "^2.2.1",
     "@canva/error": "^2.0.0",
     "@canva/platform": "^2.0.0",
     "@canva/user": "^2.0.0",
@@ -22,14 +22,14 @@
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
     "@types/express-serve-static-core": "4.19.6",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
     "@types/node-fetch": "2.6.11",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
     "chalk": "4.1.2",
@@ -45,7 +45,7 @@
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",
     "jwks-rsa": "3.1.0",
-    "mini-css-extract-plugin": "2.9.1",
+    "mini-css-extract-plugin": "2.9.2",
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
@@ -59,7 +59,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.95.0",
+    "webpack": "5.96.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"

package/templates/common/utils/backend/base_backend/create.ts

@@ -0,0 +1,104 @@
+/* eslint-disable no-console */
+import * as express from "express";
+import * as http from "http";
+import * as https from "https";
+import * as fs from "fs";
+import type { Request, Response, NextFunction } from "express";
+import debug from "debug";
+
+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: Response) => {
+    res.sendStatus(200);
+  });
+
+  // logging middleware
+  app.use((req: Request, res: Response, next: NextFunction) => {
+    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, req, res, next) => {
+    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/common/utils/backend/jwt_middleware/index.ts

@@ -0,0 +1 @@
+export { createJwtMiddleware } from "./jwt_middleware";

package/templates/common/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -0,0 +1,229 @@
+/* eslint-disable no-console */
+import * as chalk from "chalk";
+import * as debug from "debug";
+import type { Request, Response, NextFunction } from "express";
+import * as jwt from "jsonwebtoken";
+import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import Express from "express-serve-static-core";
+
+/**
+ * Prefix your start command with `DEBUG=express:middleware:jwt` to enable debug logging
+ * for this middleware
+ */
+const debugLogger = debug("express:middleware:jwt");
+
+const CANVA_BASE_URL = "https://api.canva.com";
+
+/**
+ * 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 {
+    canva: {
+      appId: string;
+      userId: string;
+      brandId: string;
+    };
+  }
+}
+
+type CanvaJwt = Omit<jwt.Jwt, "payload"> & {
+  payload: {
+    aud?: string;
+    userId?: string;
+    brandId?: string;
+  };
+};
+
+const PUBLIC_KEY_DEFAULT_EXPIRY_MS = 60 * 60 * 1_000; // 60 minutes
+const PUBLIC_KEY_DEFAULT_FETCH_TIMEOUT_MS = 30 * 1_000; // 30 seconds
+
+const sendUnauthorizedResponse = (res: Response, message?: string) =>
+  res.status(401).json({ error: "unauthorized", message });
+
+const createJwksUrl = (appId: string) =>
+  `${CANVA_BASE_URL}/rest/v1/apps/${appId}/jwks`;
+
+/**
+ * An Express.js middleware for decoding and verifying a JSON Web Token (JWT).
+ * By default, this middleware extracts the token from the `Authorization` header.
+ *
+ * @remarks
+ * If a JWT is successfully decoded, the following properties are added to the request object:
+ * - `request.canva.appId` - The ID of the app.
+ * - `request.canva.brandId` - The ID of the user's team.
+ * - `request.canva.userId` - The ID of the user.
+ *
+ * @param appId - The ID of the app.
+ * @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 createJwtMiddleware(
+  appId: string,
+  getTokenFromRequest: GetTokenFromRequest = getTokenFromHttpHeader,
+): (req: Request, res: Response, next: NextFunction) => void {
+  const jwksClient = new JwksClient({
+    cache: true,
+    cacheMaxAge: PUBLIC_KEY_DEFAULT_EXPIRY_MS,
+    timeout: PUBLIC_KEY_DEFAULT_FETCH_TIMEOUT_MS,
+    rateLimit: true,
+    jwksUri: createJwksUrl(appId),
+  });
+
+  return async (req, res, next) => {
+    try {
+      debugLogger(`processing JWT for '${req.url}'`);
+
+      const token = await getTokenFromRequest(req);
+      const unverifiedDecodedToken = jwt.decode(token, {
+        complete: true,
+      });
+
+      if (unverifiedDecodedToken?.header?.kid == null) {
+        console.trace(
+          `jwtMiddleware: expected token to contain 'kid' claim header`,
+        );
+        return sendUnauthorizedResponse(res);
+      }
+
+      const key = await jwksClient.getSigningKey(
+        unverifiedDecodedToken.header.kid,
+      );
+      const publicKey = key.getPublicKey();
+      const verifiedToken = jwt.verify(token, publicKey, {
+        audience: appId,
+        complete: true,
+      }) as CanvaJwt;
+      const { payload } = verifiedToken;
+      debugLogger("payload: %O", payload);
+
+      if (
+        payload.userId == null ||
+        payload.brandId == null ||
+        payload.aud == null
+      ) {
+        console.trace(
+          "jwtMiddleware: failed to decode jwt missing fields from payload",
+        );
+        return sendUnauthorizedResponse(res);
+      }
+
+      req.canva = {
+        appId: payload.aud,
+        brandId: payload.brandId,
+        userId: payload.userId,
+      };
+
+      next();
+    } catch (e) {
+      if (e instanceof JWTAuthorizationError) {
+        return sendUnauthorizedResponse(res, e.message);
+      }
+
+      if (e instanceof SigningKeyNotFoundError) {
+        return sendUnauthorizedResponse(
+          res,
+          `Public key not found. ${chalk.bgRedBright(
+            "Ensure you have the correct App_ID set",
+          )}.`,
+        );
+      }
+
+      if (e instanceof jwt.JsonWebTokenError) {
+        return sendUnauthorizedResponse(res, "Token is invalid");
+      }
+
+      if (e instanceof jwt.TokenExpiredError) {
+        return sendUnauthorizedResponse(res, "Token expired");
+      }
+
+      next(e);
+    }
+  };
+}
+
+export type GetTokenFromRequest = (req: Request) => Promise<string> | string;
+
+export const getTokenFromQueryString: GetTokenFromRequest = (
+  req: Request,
+): string => {
+  // The name of a query string parameter bearing the JWT
+  const tokenQueryStringParamName = "canva_user_token";
+
+  const queryParam = req.query[tokenQueryStringParamName];
+  if (!queryParam || typeof queryParam !== "string") {
+    console.trace(
+      `jwtMiddleware: missing "${tokenQueryStringParamName}" query parameter`,
+    );
+    throw new JWTAuthorizationError(
+      `Missing "${tokenQueryStringParamName}" query parameter`,
+    );
+  }
+
+  if (!looksLikeJWT(queryParam)) {
+    console.trace(
+      `jwtMiddleware: invalid "${tokenQueryStringParamName}" query parameter`,
+    );
+    throw new JWTAuthorizationError(
+      `Invalid "${tokenQueryStringParamName}" query parameter`,
+    );
+  }
+
+  return queryParam;
+};
+
+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 JWTAuthorizationError(`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 JWTAuthorizationError(
+      `Missing a "${schemeName}" token in the "${headerName}" header`,
+    );
+  }
+
+  const token = header.replace(new RegExp(`^${schemeName}\\s+`, "i"), "");
+  if (!token || !looksLikeJWT(token)) {
+    throw new JWTAuthorizationError(
+      `Invalid "${schemeName}" token in the "${headerName}" header`,
+    );
+  }
+
+  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 JWTAuthorizationError extends Error {
+  constructor(message: string) {
+    super(message);
+
+    Object.setPrototypeOf(this, JWTAuthorizationError.prototype);
+  }
+}
+
+const looksLikeJWT = (
+  token: string,
+): boolean => // Base64 alphabet includes
+  //   - letters (a-z and A-Z)
+  //   - digits (0-9)
+  //   - two special characters (+/ or -_)
+  //   - padding (=)
+  token.match(/^[a-z0-9+/\-_=.]+$/i) != null;