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

package/templates/gen_ai/src/context/app_context.tsx

@@ -3,6 +3,8 @@ import { useIntl } from "react-intl";
 import type { ImageType, LoggedInState } from "src/api";
 import { checkAuthenticationStatus, getRemainingCredits } from "src/api";
 import { ContextMessages as Messages } from "./context.messages";
+import type { Oauth } from "@canva/user";
+import { auth } from "@canva/user";
 
 export interface AppContextType {
   loggedInState: LoggedInState;
@@ -25,6 +27,7 @@ export interface AppContextType {
   setPromptInputError: (value: string) => void;
   generatedImages: ImageType[];
   setGeneratedImages: (value: ImageType[]) => void;
+  oauth: Oauth;
 }
 
 export const AppContext = createContext<AppContextType>({
@@ -48,6 +51,7 @@ export const AppContext = createContext<AppContextType>({
   setPromptInputError: () => {},
   generatedImages: [] as ImageType[],
   setGeneratedImages: () => {},
+  oauth: {} as Oauth,
 });
 
 /**
@@ -77,6 +81,7 @@ export const ContextProvider = ({
   const [generatedImages, setGeneratedImages] = useState<ImageType[]>([]);
   const [creditsError, setCreditsError] = useState<string>("");
   const intl = useIntl();
+  const oauth = auth.initOauth();
 
   // Fetches initial data on component mount
   useEffect(() => {
@@ -86,7 +91,7 @@ export const ContextProvider = ({
 
         // Fetch remaining credits
         try {
-          const { credits } = await getRemainingCredits();
+          const { credits } = await getRemainingCredits(oauth);
           setRemainingCredits(credits);
         } catch (error) {
           setAppError(
@@ -98,7 +103,7 @@ export const ContextProvider = ({
 
         // Fetch login status
         try {
-          checkAuthenticationStatus();
+          checkAuthenticationStatus(oauth);
         } catch (error) {
           setAppError(
             intl.formatMessage(Messages.appErrorGetLoggedInStatusFailed),
@@ -168,6 +173,7 @@ export const ContextProvider = ({
     setPromptInputError,
     generatedImages,
     setGeneratedImages,
+    oauth,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

package/templates/gen_ai/src/services/auth.tsx

@@ -1,25 +1,20 @@
-import { auth } from "@canva/user";
 import { useAppContext } from "src/context";
 
 export const useAuth = () => {
-  const { setLoggedInState } = useAppContext();
+  const { setLoggedInState, oauth } = useAppContext();
 
   const requestAuthentication = async () => {
     try {
-      const response = await auth.requestAuthentication();
+      const response = await oauth.requestAuthorization();
       switch (response.status) {
-        case "COMPLETED":
-          setLoggedInState("authenticated");
-          break;
-        case "ABORTED":
+        case "aborted":
           setLoggedInState("not_authenticated");
           break;
-        case "DENIED":
-          setLoggedInState("not_authenticated");
+        case "completed":
+          setLoggedInState("authenticated");
           break;
         default:
           setLoggedInState("not_authenticated");
-          break;
       }
     } catch (e) {
       // eslint-disable-next-line no-console

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/hello_world/package.json

@@ -16,9 +16,10 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@canva/app-ui-kit": "^3.8.0",
+    "@canva/app-ui-kit": "^4.0.0",
     "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/design": "^2.0.0",
+    "@canva/design": "^2.1.0",
+    "@canva/platform": "^2.0.0",
     "@canva/error": "^2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",

package/templates/hello_world/src/app.tsx

@@ -1,11 +1,13 @@
 import { Button, Rows, Text } from "@canva/app-ui-kit";
-import { addElementAtPoint } from "@canva/design";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as styles from "styles/components.css";
+import { useAddElement } from "utils/use_add_element";
 
 export const App = () => {
+  const addElement = useAddElement();
+
   const onClick = () => {
-    addElementAtPoint({
+    addElement({
       type: "text",
       children: ["Hello world!"],
     });

package/templates/hello_world/utils/use_add_element.ts

@@ -0,0 +1,48 @@
+import type {
+  EmbedElement,
+  ImageElement,
+  RichtextElement,
+  TableElement,
+  TextElement,
+  VideoElement,
+} from "@canva/design";
+import { addElementAtCursor, addElementAtPoint } from "@canva/design";
+import { useFeatureSupport } from "./use_feature_support";
+import { features } from "@canva/platform";
+import { useEffect, useState } from "react";
+
+type AddElementParams =
+  | ImageElement
+  | VideoElement
+  | EmbedElement
+  | TextElement
+  | RichtextElement
+  | TableElement;
+
+export const useAddElement = () => {
+  const isSupported = useFeatureSupport();
+
+  // Store a wrapped addElement function that checks feature support
+  const [addElement, setAddElement] = useState(() => {
+    return (element: AddElementParams) => {
+      if (features.isSupported(addElementAtPoint)) {
+        return addElementAtPoint(element);
+      } else if (features.isSupported(addElementAtCursor)) {
+        return addElementAtCursor(element);
+      }
+    };
+  });
+
+  useEffect(() => {
+    const addElement = (element: AddElementParams) => {
+      if (isSupported(addElementAtPoint)) {
+        return addElementAtPoint(element);
+      } else if (isSupported(addElementAtCursor)) {
+        return addElementAtCursor(element);
+      }
+    };
+    setAddElement(() => addElement);
+  }, [isSupported]);
+
+  return addElement;
+};

package/templates/hello_world/utils/use_feature_support.ts

@@ -0,0 +1,28 @@
+import { features } from "@canva/platform";
+import type { Feature } from "@canva/platform";
+import { useState, useEffect } from "react";
+
+/**
+ * This hook allows re-rendering of a React component whenever
+ * the state of feature support changes in Canva.
+ *
+ * @returns isSupported - callback to inspect a Canva SDK method.
+ **/
+export function useFeatureSupport() {
+  // Store a wrapped function that checks feature support
+  const [isSupported, setIsSupported] = useState(() => {
+    return (...args: Feature[]) => features.isSupported(...args);
+  });
+
+  useEffect(() => {
+    // create new function ref when feature support changes to trigger
+    // re-render
+    return features.registerOnSupportChange(() => {
+      setIsSupported(() => {
+        return (...args: Feature[]) => features.isSupported(...args);
+      });
+    });
+  }, []);
+
+  return isSupported;
+}

package/templates/dam/backend/database/database.ts

@@ -1,42 +0,0 @@
-import * as fs from "fs/promises";
-import * as 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);
-  }
-}