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

package/templates/gen_ai/backend/routers/oauth.ts

@@ -0,0 +1,393 @@
+import * as crypto from "crypto";
+import "dotenv/config";
+import * as express from "express";
+import * as basicAuth from "express-basic-auth";
+import { JSONFileDatabase } from "../database/database";
+import { createBearerMiddleware } from "../../utils/backend/bearer_middleware";
+import * as debug from "debug";
+
+/**
+ * Prefix your start command with `DEBUG=express:route:oauth` to enable debug logging
+ * for this middleware
+ */
+const debugLogger = debug("express:route:oauth");
+
+/**
+ * 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 TOKEN_EXPIRY_S = 4 * 60 * 60; // 4 hours
+const REFRESH_EXPIRY_S = 30 * 24 * 3600; // 30 days
+
+const CLIENT_ID = "client_id";
+const CLIENT_SECRET = "client_secret";
+const REDIRECT_URI = "https://www.canva.com/apps/oauth/authorized";
+
+/**
+ * For simplicity, we simply generate random token values and store them in our database
+ * for production you may want to use JWTs or other stateless methods.
+ */
+interface Token {
+  value: string;
+  expiry: number; // Unix timestamp
+}
+
+export interface User {
+  id: string;
+  authorizationCode?: Token;
+  accessToken?: Token;
+  refreshToken?: Token;
+}
+
+interface RedirectUriRecord {
+  redirectUri: string;
+  authorizationCode: string;
+}
+
+export interface Data {
+  users: User[];
+  redirect_uris: RedirectUriRecord[];
+}
+
+/**
+ * For more information on Authentication, refer to our documentation: {@link https://www.canva.dev/docs/apps/authenticating-users/#types-of-authentication}.
+ */
+export const createAuthRouter = () => {
+  /**
+   * 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: [], redirect_uris: [] });
+
+  const router = express.Router();
+
+  /**
+   * The urlencoded middleware allows us to parse form data from the request body.
+   * This is required for the OAuth 2.0 Token Exchange endpoint.
+   */
+  router.use(express.urlencoded({ extended: true }));
+
+  /**
+   * This is the OAuth 2.0 Authorization endpoint
+   * https://datatracker.ietf.org/doc/html/rfc6749#section-3.1
+   *
+   * This endpoint does not implement PKCE, which you would want to do
+   * for production.
+   */
+  router.get(
+    "/auth/authorize",
+    basicAuth({
+      users: { [USERNAME]: PASSWORD },
+      challenge: true,
+    }),
+    async (req, res) => {
+      const redirectUri = decodeURIComponent(
+        req.query.redirect_uri?.toString() ?? REDIRECT_URI,
+      );
+      const clientId = req.query.client_id?.toString();
+      const responseType = req.query.response_type?.toString();
+      const state = req.query.state?.toString();
+
+      if (!clientId) {
+        return res.status(400).send("Missing required client ID parameter");
+      }
+
+      if (clientId !== CLIENT_ID) {
+        return res.status(400).send("Invalid client ID");
+      }
+
+      if (redirectUri !== REDIRECT_URI) {
+        return res.status(400).send(`Invalid redirect URI ${redirectUri}`);
+      }
+
+      const failureResponse = (error: string) => {
+        const params = new URLSearchParams({
+          error,
+          state: state || "",
+        });
+        res.redirect(302, `${redirectUri}?${params}`);
+      };
+
+      if (responseType !== "code") {
+        return failureResponse("unsupported_response_type");
+      }
+
+      // You should implement PKCE to protect against authorization code interception attacks
+      // https://datatracker.ietf.org/doc/html/rfc7636
+      // this is left off for simplicity in this example
+
+      // Generate a unique authorization code
+      const authorizationCode = crypto.randomUUID();
+
+      // Load the database
+      const data = await db.read();
+
+      // Add the user to the database if they aren't there already
+      if (!data.users.find((user) => user.id === USERNAME)) {
+        data.users.push({
+          id: USERNAME,
+          authorizationCode: {
+            value: authorizationCode,
+            expiry: Date.now() + COOKIE_EXPIRY_MS,
+          },
+        });
+      } else {
+        // If the user is there, update the authorization code
+        // In a production system you would allow at least one authorization code
+        // per user per client, but here we simplify and have one per user.
+        data.users = data.users.map((user) => {
+          if (user.id === USERNAME) {
+            return {
+              ...user,
+              authorizationCode: {
+                value: authorizationCode,
+                expiry: Date.now() + COOKIE_EXPIRY_MS,
+              },
+            };
+          }
+          return user;
+        });
+      }
+      if (
+        !data.redirect_uris.find((record) => record.redirectUri === redirectUri)
+      ) {
+        data.redirect_uris.push({ redirectUri, authorizationCode });
+      } else {
+        data.redirect_uris = data.redirect_uris.map((record) => {
+          if (record.redirectUri === redirectUri) {
+            return { ...record, authorizationCode };
+          }
+          return record;
+        });
+      }
+      await db.write(data);
+
+      res.redirect(
+        302,
+        `${redirectUri}?code=${authorizationCode}&state=${state}`,
+      );
+    },
+  );
+
+  interface AuthorizationExchangeRequest {
+    grant_type: "authorization_code";
+    code: string;
+    redirect_uri?: string;
+  }
+
+  interface RefreshTokenExchangeRequest {
+    grant_type: "refresh_token";
+    refresh_token: string;
+  }
+
+  const failureResponse = (res: express.Response, error: string) => {
+    return res.status(400).send(`{"error": "${error}"}`);
+  };
+
+  const authorizationCodeExchange = async (
+    res: express.Response,
+    body: AuthorizationExchangeRequest,
+  ) => {
+    const refresh_token = crypto.randomUUID();
+    const access_token = crypto.randomUUID();
+
+    const code = body.code?.toString();
+
+    if (!code) {
+      return failureResponse(res, "invalid_request");
+    }
+
+    // Load the database
+    const data = await db.read();
+    const lastRedirectUrl = data.redirect_uris.find(
+      (record) => record.authorizationCode === code,
+    )?.redirectUri;
+
+    // The specification requires that if the redirect uri was present in the authorization request,
+    // it must be included and the same in the token exchange request
+    if (lastRedirectUrl !== body.redirect_uri?.toString()) {
+      return failureResponse(res, "invalid_request");
+    }
+
+    // Find the user who was issued this authorization code
+    const user = data.users.find(
+      (user) => user.authorizationCode?.value === code,
+    );
+
+    if (!user || !user.authorizationCode) {
+      return failureResponse(res, "invalid_grant");
+    }
+
+    if (user.authorizationCode.expiry < Date.now()) {
+      return failureResponse(res, "invalid_grant");
+    }
+
+    // Update the user with the new access token and refresh token
+    // and clear out their authorization code. Authorization codes
+    // are single use, so attempting to use the old one will now fail
+    data.users = data.users.map((user) => {
+      if (user.id === USERNAME) {
+        return {
+          ...user,
+          authorizationCode: undefined,
+          accessToken: {
+            value: access_token,
+            expiry: Date.now() + TOKEN_EXPIRY_S * 1000,
+          },
+          refreshToken: {
+            value: refresh_token,
+            expiry: Date.now() + REFRESH_EXPIRY_S * 1000,
+          },
+        };
+      }
+      return user;
+    });
+    await db.write(data);
+
+    return res.status(200).send(
+      JSON.stringify({
+        access_token,
+        refresh_token,
+        token_type: "bearer",
+        expires_in: TOKEN_EXPIRY_S,
+      }),
+    );
+  };
+
+  const refreshTokenExchange = async (
+    res: express.Response,
+    body: RefreshTokenExchangeRequest,
+  ) => {
+    const refresh_token = crypto.randomUUID();
+    const access_token = crypto.randomUUID();
+
+    const old_refresh_token = body.refresh_token?.toString();
+    if (!old_refresh_token) {
+      return failureResponse(res, "invalid_request");
+    }
+
+    // Find the user who was issued this refresh token
+    const data = await db.read();
+    const user = data.users.find(
+      (user) => user.refreshToken?.value === old_refresh_token,
+    );
+
+    if (!user) {
+      return failureResponse(res, "invalid_grant");
+    }
+
+    // Update the user with the new refresh token
+    // refresh tokens are single use, so attempting
+    // to use the old one will now fail
+    data.users = data.users.map((u) => {
+      if (u.id === user.id) {
+        return {
+          ...u,
+          accessToken: {
+            value: access_token,
+            expiry: Date.now() + TOKEN_EXPIRY_S * 1000,
+          },
+          refreshToken: {
+            value: refresh_token,
+            expiry: Date.now() + REFRESH_EXPIRY_S * 1000,
+          },
+        };
+      }
+      return u;
+    });
+    await db.write(data);
+
+    return res.status(200).send(
+      JSON.stringify({
+        access_token,
+        refresh_token,
+        token_type: "bearer",
+        expires_in: TOKEN_EXPIRY_S,
+      }),
+    );
+  };
+
+  /**
+   * This endpoint is the Oauth 2.0 Token endpoint
+   * https://datatracker.ietf.org/doc/html/rfc6749#section-3.2
+   * It serves both exchanging authorization codes for access tokens (and refresh tokens), and
+   * exchanging refresh tokens for new access tokens (and refresh tokens)
+   */
+  router.post(
+    "/auth/token",
+    basicAuth({
+      users: { [CLIENT_ID]: CLIENT_SECRET },
+      challenge: false,
+    }),
+    async (req, res) => {
+      const body = (await req.body) as
+        | AuthorizationExchangeRequest
+        | RefreshTokenExchangeRequest;
+
+      const grantType = body.grant_type?.toString();
+
+      if (!grantType) {
+        return failureResponse(res, "invalid_request");
+      }
+
+      if (grantType !== "authorization_code" && grantType !== "refresh_token") {
+        return failureResponse(res, "unsupported_grant_type");
+      }
+
+      if (grantType === "refresh_token") {
+        refreshTokenExchange(res, body as RefreshTokenExchangeRequest);
+      }
+
+      return authorizationCodeExchange(
+        res,
+        body as AuthorizationExchangeRequest,
+      );
+    },
+  );
+
+  /**
+   * TODO: Add this middleware to all routes that will receive requests from
+   * your app.
+   */
+  const bearerMiddleware = createBearerMiddleware(
+    async (access_token: string): Promise<string | undefined> => {
+      const data = await db.read();
+      const user = data.users.find(
+        (user) => user.accessToken?.value === access_token,
+      );
+      debugLogger(
+        `User found: ${user?.id}, expires ${user?.accessToken?.expiry} compare ${Date.now()}`,
+      );
+
+      const isAuthenticated =
+        user && user.accessToken && user.accessToken?.expiry > Date.now();
+      if (!isAuthenticated) {
+        return;
+      }
+      return user.id;
+    },
+  );
+
+  /**
+   * All routes that start with /api will be protected by bearer authentication
+   */
+  router.use("/api", bearerMiddleware);
+
+  /**
+   * This endpoint checks if a user is authenticated.
+   */
+  router.post("/api/authentication/status", async (req, res) => {
+    // Check if the user is authenticated
+    const isAuthenticated = !!req.user_id;
+
+    // Return the authentication status
+    res.send({
+      isAuthenticated,
+    });
+  });
+
+  return router;
+};

package/templates/gen_ai/backend/server.ts

@@ -2,7 +2,7 @@ import * as express from "express";
 import * as cors from "cors";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createImageRouter } from "./routers/image";
-import { createAuthRouter } from "./routers/auth";
+import { createAuthRouter } from "./routers/oauth";
 
 async function main() {
   const router = express.Router();

package/templates/gen_ai/package.json

@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/app-ui-kit": "^3.8.0",
-    "@canva/asset": "^1.7.1",
-    "@canva/design": "^1.10.0",
-    "@canva/platform": "^1.1.0",
-    "@canva/user": "^1.0.0",
+    "@canva/app-ui-kit": "^4.0.0",
+    "@canva/asset": "^2.0.0",
+    "@canva/design": "^2.1.0",
+    "@canva/platform": "^2.0.0",
+    "@canva/user": "^2.0.0",
     "cookie-parser": "1.4.6",
     "cors": "2.8.5",
     "html-react-parser": "5.1.12",

package/templates/gen_ai/src/api/api.ts

@@ -1,4 +1,4 @@
-import { auth } from "@canva/user";
+import type { Oauth } from "@canva/user";
 import { POLLING_INTERVAL_IN_SECONDS } from "src/config";
 
 /**
@@ -66,18 +66,21 @@ const endpoints = {
  * @param {number} options.numberOfImages - The number of images to generate.
  * @returns {Promise<QueueImageGenerationResponse>} A promise that resolves to the created job ID.
  */
-export const queueImageGeneration = async ({
-  prompt,
-  numberOfImages,
-}: {
-  prompt: string;
-  numberOfImages: number;
-}): Promise<QueueImageGenerationResponse> => {
+export const queueImageGeneration = async (
+  {
+    prompt,
+    numberOfImages,
+  }: {
+    prompt: string;
+    numberOfImages: number;
+  },
+  oauth: Oauth,
+): Promise<QueueImageGenerationResponse> => {
   const url = new URL(endpoints.queueImageGeneration, BACKEND_HOST);
   url.searchParams.append("count", numberOfImages.toString());
   url.searchParams.append("prompt", prompt);
 
-  const result: QueueImageGenerationResponse = await sendRequest(url);
+  const result: QueueImageGenerationResponse = await sendRequest(url, oauth);
 
   return result;
 };
@@ -87,11 +90,14 @@ export const queueImageGeneration = async ({
  * @param {string} jobId - The ID of the job to retrieve status for.
  * @returns {Promise<ImageGenerationResult>} A promise that resolves to the image generation result.
  */
-export const getImageGenerationJobStatus = async ({
-  jobId,
-}: {
-  jobId: string;
-}): Promise<ImageGenerationResult> => {
+export const getImageGenerationJobStatus = async (
+  {
+    jobId,
+  }: {
+    jobId: string;
+  },
+  oauth: Oauth,
+): Promise<ImageGenerationResult> => {
   const url = new URL(endpoints.getImageGenerationJobStatus, BACKEND_HOST);
   url.searchParams.append("jobId", jobId);
 
@@ -103,6 +109,7 @@ export const getImageGenerationJobStatus = async ({
     try {
       const response = (await sendRequest(
         url,
+        oauth,
       )) as ImageGenerationJobStatusResponse;
       if (response.status === "completed") {
         return { images: response.images, credits: response.credits };
@@ -131,12 +138,13 @@ export const getImageGenerationJobStatus = async ({
  */
 export const cancelImageGenerationJob = async (
   jobId: string,
+  oauth: Oauth,
 ): Promise<void> => {
   const url = new URL(endpoints.cancelImageGenerationJob, BACKEND_HOST);
   url.searchParams.append("jobId", jobId);
 
   try {
-    await sendRequest(url, {
+    await sendRequest(url, oauth, {
       method: "POST",
     });
   } catch {
@@ -148,23 +156,26 @@ export const cancelImageGenerationJob = async (
  * Retrieves the remaining credits.
  * @returns {Promise<RemainingCreditsResult>} - A promise that resolves to the remaining credits.
  */
-export const getRemainingCredits =
-  async (): Promise<RemainingCreditsResult> => {
-    const url = new URL(endpoints.getRemainingCredits, BACKEND_HOST);
+export const getRemainingCredits = async (
+  oauth: Oauth,
+): Promise<RemainingCreditsResult> => {
+  const url = new URL(endpoints.getRemainingCredits, BACKEND_HOST);
 
-    const result: RemainingCreditsResult = await sendRequest(url);
+  const result: RemainingCreditsResult = await sendRequest(url, oauth);
 
-    return result;
-  };
+  return result;
+};
 
 /**
  * Purchases credits for the user.
  * @returns {Promise<RemainingCreditsResult>} - A promise that resolves to the remaining credits after purchasing.
  */
-export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
+export const purchaseCredits = async (
+  oauth: Oauth,
+): Promise<RemainingCreditsResult> => {
   const url = new URL(endpoints.purchaseCredits, BACKEND_HOST);
 
-  const result: RemainingCreditsResult = await sendRequest(url, {
+  const result: RemainingCreditsResult = await sendRequest(url, oauth, {
     method: "POST",
   });
 
@@ -177,10 +188,12 @@ export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
  *
  * Note: You must register the provided endpoint via the Developer Portal.
  */
-export const checkAuthenticationStatus = async (): Promise<LoggedInState> => {
+export const checkAuthenticationStatus = async (
+  oauth: Oauth,
+): Promise<LoggedInState> => {
   try {
     const url = new URL(endpoints.getLoggedInStatus, BACKEND_HOST);
-    const result: { isAuthenticated: string } = await sendRequest(url, {
+    const result: { isAuthenticated: string } = await sendRequest(url, oauth, {
       method: "POST",
     });
 
@@ -202,8 +215,12 @@ export const checkAuthenticationStatus = async (): Promise<LoggedInState> => {
  * @param {RequestInit} [options] - Optional fetch options to be passed to the fetch function.
  * @returns {Promise<Object>} - A promise that resolves to the response body.
  */
-const sendRequest = async <T>(url: URL, options?: RequestInit): Promise<T> => {
-  const token = await auth.getCanvaUserToken();
+const sendRequest = async <T>(
+  url: URL,
+  oauth: Oauth,
+  options?: RequestInit,
+): Promise<T> => {
+  const token = (await oauth.getAccessToken())?.token;
   const res = await fetch(url, {
     headers: {
       ...options?.headers,

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

@@ -27,6 +27,7 @@ export const Footer = () => {
     setIsLoadingImages,
     remainingCredits,
     setRemainingCredits,
+    oauth,
   } = useAppContext();
   const intl = useIntl();
 
@@ -74,10 +75,13 @@ export const Footer = () => {
 
     setIsLoadingImages(true);
     try {
-      const { jobId } = await queueImageGeneration({
-        prompt: promptInput,
-        numberOfImages: NUMBER_OF_IMAGES_TO_GENERATE,
-      });
+      const { jobId } = await queueImageGeneration(
+        {
+          prompt: promptInput,
+          numberOfImages: NUMBER_OF_IMAGES_TO_GENERATE,
+        },
+        oauth,
+      );
 
       setJobId(jobId);
     } catch {
@@ -91,7 +95,7 @@ export const Footer = () => {
   };
 
   const onPurchaseMoreCredits = async () => {
-    const { credits } = await purchaseCredits();
+    const { credits } = await purchaseCredits(oauth);
 
     setRemainingCredits(credits);
   };

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

@@ -1,7 +1,7 @@
 import { Grid, ImageCard, Rows, Text } from "@canva/app-ui-kit";
 import type { QueuedImage } from "@canva/asset";
 import { upload } from "@canva/asset";
-import { addNativeElement, ui } from "@canva/design";
+import { addElementAtPoint, ui } from "@canva/design";
 import type { ImageType } from "src/api";
 import { useAppContext } from "src/context";
 import * as styles from "styles/utils.css";
@@ -12,12 +12,13 @@ const THUMBNAIL_HEIGHT = 150;
 const uploadImage = async (image: ImageType): Promise<QueuedImage> => {
   // Upload the image using @canva/asset.
   const queuedImage = await upload({
-    type: "IMAGE",
+    type: "image",
     mimeType: "image/jpeg",
     thumbnailUrl: image.thumbnail.url,
     url: image.fullsize.url,
     width: image.fullsize.width,
     height: image.fullsize.height,
+    aiDisclosure: "app_generated",
   });
 
   return queuedImage;
@@ -34,8 +35,8 @@ export const ImageGrid = () => {
     try {
       parentNode?.classList.add(styles.hidden);
 
-      await ui.startDrag(event, {
-        type: "IMAGE",
+      await ui.startDragToPoint(event, {
+        type: "image",
         resolveImageRef: () => uploadImage(image),
         previewUrl: image.thumbnail.url,
         previewSize: {
@@ -55,8 +56,9 @@ export const ImageGrid = () => {
   const onImageClick = async (image: ImageType) => {
     const queuedImage = await uploadImage(image);
 
-    await addNativeElement({
-      type: "IMAGE",
+    await addElementAtPoint({
+      type: "image",
+      altText: { text: image.label, decorative: false },
       ref: queuedImage.ref,
     });
   };

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

@@ -70,6 +70,7 @@ export const LoadingResults = ({
     promptInput,
     setGeneratedImages,
     setRemainingCredits,
+    oauth,
   } = useAppContext();
 
   useEffect(() => {
@@ -82,9 +83,12 @@ export const LoadingResults = ({
     const pollJobStatus = async () => {
       if (jobId) {
         try {
-          const { images, credits } = await getImageGenerationJobStatus({
-            jobId,
-          });
+          const { images, credits } = await getImageGenerationJobStatus(
+            {
+              jobId,
+            },
+            oauth,
+          );
           setGeneratedImages(images);
           setRemainingCredits(credits);
           // Clear the jobId after fetching images
@@ -117,7 +121,7 @@ export const LoadingResults = ({
   ]);
 
   const onCancelClick = async () => {
-    await cancelImageGenerationJob(jobId);
+    await cancelImageGenerationJob(jobId, oauth);
     setIsLoadingImages(false);
     navigate(Paths.HOME);
   };