@canva/cli 0.0.1-beta.1 → 0.0.1-beta.10

package/templates/gen_ai/src/components/index.ts

@@ -2,7 +2,6 @@ export * from "./app_error";
 export * from "./footer";
 export * from "./image_grid";
 export * from "./loading_results";
-export * from "./logged_in_status";
 export * from "./prompt_input";
 export * from "./report_box";
 export * from "./remaining_credits";

package/templates/gen_ai/src/components/prompt_input.tsx

@@ -19,6 +19,8 @@ const MIN_INPUT_ROWS = 3;
 /**
  * Array of example prompts that could be used to generate interesting pictures with an AI.
  * Consider fetching these prompts from a server or API call for dynamic and varied content.
+ * These would need to be localised, but that is left out here as the method would depend on
+ * the specific implementation or API used.
  */
 const examplePrompts: string[] = [
   "Cats ruling a parallel universe",

package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+import type { RenderResult } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { RemainingCredits } from "../remaining_credits";
+import { requestOpenExternalUrl } from "@canva/platform";
+
+function renderInTestProvider(node: React.ReactNode): RenderResult {
+  return render(
+    // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
+    <TestAppI18nProvider>
+      <TestAppUiProvider>{node}</TestAppUiProvider>,
+    </TestAppI18nProvider>,
+  );
+}
+
+// This test demonstrates how to test code that uses functions from the Canva Apps SDK
+// For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
+describe("Remaining Credit Tests", () => {
+  const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should call requestOpenExternalUrl when the link is clicked", () => {
+    // assert that the mock is in the expected clean state
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+
+    const result = renderInTestProvider(<RemainingCredits />);
+
+    // get a reference to the link to purchase more credits
+    const purchaseMoreLink = result.getByRole("button");
+
+    // programmatically simulate clicking the button
+    fireEvent.click(purchaseMoreLink);
+
+    // we expect that requestOpenExternalUrl has been called
+    expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
+  });
+});

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

@@ -1,12 +1,10 @@
 import { createContext, useEffect, useState } from "react";
 import { useIntl } from "react-intl";
-import type { ImageType, LoggedInState } from "src/api";
-import { checkAuthenticationStatus, getRemainingCredits } from "src/api";
+import type { ImageType } from "src/api";
+import { getRemainingCredits } from "src/api";
 import { ContextMessages as Messages } from "./context.messages";
 
 export interface AppContextType {
-  loggedInState: LoggedInState;
-  setLoggedInState: (value: LoggedInState) => void;
   appError: string;
   setAppError: (value: string) => void;
   creditsError: string;
@@ -28,8 +26,6 @@ export interface AppContextType {
 }
 
 export const AppContext = createContext<AppContextType>({
-  loggedInState: "not_authenticated",
-  setLoggedInState: () => {},
   appError: "",
   setAppError: () => {},
   creditsError: "",
@@ -65,8 +61,6 @@ export const ContextProvider = ({
 }: {
   children: React.ReactNode;
 }): JSX.Element => {
-  const [loggedInState, setLoggedInState] =
-    useState<LoggedInState>("not_authenticated");
   const [appError, setAppError] = useState<string>("");
   const [loadingApp, setLoadingApp] = useState<boolean>(true); // set to true to prevent ui flash on load
   const [isLoadingImages, setIsLoadingImages] = useState<boolean>(false);
@@ -95,17 +89,6 @@ export const ContextProvider = ({
           // eslint-disable-next-line no-console
           console.error("Error fetching remaining credits:", error);
         }
-
-        // Fetch login status
-        try {
-          checkAuthenticationStatus();
-        } catch (error) {
-          setAppError(
-            intl.formatMessage(Messages.appErrorGetLoggedInStatusFailed),
-          );
-          // eslint-disable-next-line no-console
-          console.error("Error fetching login status:", error);
-        }
       } catch (error) {
         setAppError(intl.formatMessage(Messages.appErrorGeneral));
         // eslint-disable-next-line no-console
@@ -125,13 +108,10 @@ export const ContextProvider = ({
       return;
     }
 
-    const errorMessage =
-      loggedInState === "authenticated"
-        ? intl.formatMessage(Messages.alertNotEnoughCreditsLoggedIn)
-        : intl.formatMessage(Messages.alertNotEnoughCreditsLoggedOut);
+    const errorMessage = intl.formatMessage(Messages.alertNotEnoughCredits);
 
     setCreditsError(errorMessage);
-  }, [loadingApp, remainingCredits, loggedInState]);
+  }, [loadingApp, remainingCredits]);
 
   const setPromptInputHandler = (value: string) => {
     if (
@@ -148,8 +128,6 @@ export const ContextProvider = ({
   };
 
   const value: AppContextType = {
-    loggedInState,
-    setLoggedInState,
     appError,
     setAppError,
     creditsError,

package/templates/gen_ai/src/context/context.messages.ts

@@ -12,11 +12,6 @@ export const ContextMessages = defineMessages({
     description:
       "A message to indicate that there was a failure to get the number of credits the user has",
   },
-  appErrorGetLoggedInStatusFailed: {
-    defaultMessage: "Retrieving logged in status has failed.",
-    description:
-      "A message to indicate that due to an unexpected problem, the app was unable to determine if the user is logged in",
-  },
 
   /** Messages related to prompts and user input validation. */
   promptMissingErrorMessage: {
@@ -26,16 +21,10 @@ export const ContextMessages = defineMessages({
   },
 
   /** Messages related to credits, including their availability and purchasing options. */
-  alertNotEnoughCreditsLoggedIn: {
+  alertNotEnoughCredits: {
     defaultMessage:
       "You don’t have enough credits left to generate an image. Please purchase more.",
     description:
       "A message to indicate that the user doesn't have enough credits to generate an image, and will need to buy more to continue",
   },
-  alertNotEnoughCreditsLoggedOut: {
-    defaultMessage:
-      "You don’t have enough credits left to generate an image. Please sign up or log in to purchase more.",
-    description:
-      "A message to indicate that the user doesn't have enough credits to generate an image, and will need to sign up or log in to buy more",
-  },
 });

package/templates/gen_ai/src/home.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import { Rows } from "@canva/app-ui-kit";
+import { Footer } from "./components";
+import * as styles from "styles/components.css";
+
+export const Home = () => (
+  <div className={styles.scrollContainer}>
+    <Rows spacing="3u">
+      <Outlet />
+      <Footer />
+    </Rows>
+  </div>
+);

package/templates/gen_ai/src/index.tsx

@@ -1,27 +1,11 @@
 import { createRoot } from "react-dom/client";
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ErrorBoundary } from "react-error-boundary";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import { routes } from "./routes";
-import { ErrorPage } from "./pages";
-import { ContextProvider } from "./context";
 import "@canva/app-ui-kit/styles.css";
-import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { App } from "./app";
 
 const root = createRoot(document.getElementById("root") as Element);
 
 function render() {
-  root.render(
-    <AppI18nProvider>
-      <AppUiProvider>
-        <ErrorBoundary fallback={<ErrorPage />}>
-          <ContextProvider>
-            <RouterProvider router={createHashRouter(routes)} />
-          </ContextProvider>
-        </ErrorBoundary>
-      </AppUiProvider>
-    </AppI18nProvider>,
-  );
+  root.render(<App />);
 }
 
 render();

package/templates/gen_ai/src/routes/routes.tsx

@@ -1,4 +1,4 @@
-import { App } from "src/app";
+import { Home } from "src/home";
 import { ErrorPage, GeneratePage, ResultsPage } from "src/pages";
 
 export enum Paths {
@@ -9,7 +9,7 @@ export enum Paths {
 export const routes = [
   {
     path: Paths.HOME,
-    element: <App />,
+    element: <Home />,
     errorElement: <ErrorPage />,
     children: [
       {

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

@@ -4,6 +4,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin, optimize } = require("webpack");
 const chalk = require("chalk");
 const { transform } = require("@formatjs/ts-transformer");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 /**
  *
@@ -173,7 +174,8 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+      mode === "development" && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }