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

package/templates/base/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/base/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/common/README.md

@@ -181,70 +181,3 @@ To use ngrok, you'll need to do the following:
    ```
 
 This environment variable is available for the current terminal session, so the command must be re-run for each new session. Alternatively, you can add the variable to your terminal's default parameters.
-
-## Run the development server with ngrok and add authentication to the app
-
-These steps demonstrate how to start the local development server with ngrok.
-
-From your app's root directory
-
-1. Stop any running scripts, and run the following command to launch the backend and frontend development servers. The `--ngrok` parameter exposes the backend server via a publicly accessible URL.
-
-   ```bash
-   npm start --ngrok
-   ```
-
-2. After ngrok is running, copy your ngrok url
-   (e.g. `https://0000-0000.ngrok-free.app`) to the clipboard.
-
-   1. Go to your app in the [Developer Portal](https://www.canva.com/developers/apps).
-   2. Navigate to the "Add authentication" section of your app.
-   3. Check "This app requires authentication"
-   4. In the "Redirect URL" text box, enter your ngrok url followed by `/redirect-url` e.g.
-      `https://0000-0000.ngrok-free.app/redirect-url`
-   5. In the "Authentication base URL" text box, enter your ngrok url followed by `/` e.g.
-      `https://0000-0000.ngrok-free.app/`
-      Note: Your ngrok URL changes each time you restart ngrok. Keep these fields up to
-      date to ensure your example authentication step will run.
-
-3. Make sure the app is authenticating users by making the following changes:
-
-   1. Replace
-
-      `router.post("/resources/find", async (req, res) => {`
-
-      with
-
-      `router.post("/api/resources/find", async (req, res) => {`
-
-      in [./backend/routers/auth.ts](./backend/routers/auth.ts). Adding `/api/` to the route ensures
-      the JWT middleware authenticates requests.
-
-   2. Replace
-
-      ``const url = new URL(`${BACKEND_HOST}/resources/find`);``
-
-      with
-
-      ``const url = new URL(`${BACKEND_HOST}/api/resources/find`);``
-
-      in [./adapter.ts](./adapter.ts)
-
-   3. Comment out these lines in [./app.tsx](./app.tsx)
-
-      ```typescript
-      // Comment this next line out for production apps
-      setAuthState("authenticated");
-      ```
-
-4. Navigate to your app at `https://www.canva.com/developers/apps`, and click **Preview** to preview the app.
-   1. A new screen will appear asking if you want to authenticate.
-      Press **Connect** to start the authentication flow.
-   2. A ngrok screen may appear. If it does, select **Visit Site**
-   3. An authentication popup will appear. For the username, enter `username`, and
-      for the password enter `password`.
-   4. If successful, you will be redirected back to your app.
-5. You can now modify the `/redirect-url` function in `server.ts` to authenticate with your third-party
-   asset manager, and `/api/resources/find` to pull assets from your third-party asset manager.
-
-   See `https://www.canva.dev/docs/apps/authenticating-users/` for more details.

package/templates/dam/backend/server.ts

@@ -2,7 +2,6 @@ import * as express from "express";
 import * as cors from "cors";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createDamRouter } from "./routers/dam";
-import { createAuthRouter } from "./routers/auth";
 
 async function main() {
   // TODO: Set the CANVA_APP_ID environment variable in the project's .env file
@@ -46,12 +45,6 @@ async function main() {
    */
   router.use(cors());
 
-  /**
-   * Add routes for authorisation.
-   */
-  const authRouter = createAuthRouter();
-  router.use(authRouter);
-
   /**
    * Add routes for digital asset management.
    */

package/templates/dam/package.json

@@ -16,13 +16,13 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
+    "@canva/app-components": "^1.0.0-beta.28",
     "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/app-components": "^1.0.0-beta.22",
-    "@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",
     "react": "18.3.1",

package/templates/dam/src/app.tsx

@@ -1,147 +1,14 @@
-import { useEffect, useState } from "react";
 import { SearchableListView } from "@canva/app-components";
-import { Alert, Box, Button, LoadingIndicator, Rows } from "@canva/app-ui-kit";
-import type { Authentication } from "@canva/user";
-import { auth } from "@canva/user";
+import { Box } from "@canva/app-ui-kit";
 import { findResources } from "./adapter";
 import { config } from "./config";
 import * as styles from "./index.css";
 import "@canva/app-ui-kit/styles.css";
 
-type AuthenticationState =
-  | "authenticated"
-  | "not_authenticated"
-  | "checking"
-  | "cancelled"
-  | "error";
-
-/**
- * This endpoint is defined in the ./backend/server.ts file. You need to
- * register the endpoint in the Developer Portal before sending requests.
- *
- * BACKEND_HOST is configured in the root .env file, for more information,
- * refer to the README.md.
- */
-const AUTHENTICATION_CHECK_URL = `${BACKEND_HOST}/api/authentication/status`;
-
-const checkAuthenticationStatus = async (
-  auth: Authentication,
-): Promise<AuthenticationState> => {
-  /**
-   * Send a request to an endpoint that checks if the user is authenticated.
-   * This is example code, intended to convey the basic idea. When implementing this in your app, you might want more advanced checks.
-   *
-   * Note: You must register the provided endpoint via the Developer Portal.
-   */
-  try {
-    const token = await auth.getCanvaUserToken();
-    const res = await fetch(AUTHENTICATION_CHECK_URL, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      method: "POST",
-    });
-    const body = await res.json();
-
-    if (body?.isAuthenticated) {
-      return "authenticated";
-    } else {
-      return "not_authenticated";
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return "error";
-  }
-};
-
 export function App() {
-  // Keep track of the user's authentication status.
-  const [authState, setAuthState] = useState<AuthenticationState>("checking");
-
-  useEffect(() => {
-    setAuthState("checking");
-    checkAuthenticationStatus(auth).then((status) => {
-      setAuthState(status);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (authState === "not_authenticated") {
-      startAuthenticationFlow();
-    }
-  }, [authState]);
-
-  const startAuthenticationFlow = async () => {
-    try {
-      const response = await auth.requestAuthentication();
-      switch (response.status) {
-        case "COMPLETED":
-          setAuthState("authenticated");
-          break;
-        case "ABORTED":
-          // eslint-disable-next-line no-console
-          console.warn("Authentication aborted by user.");
-          setAuthState("cancelled");
-          break;
-        case "DENIED":
-          // eslint-disable-next-line no-console
-          console.warn("Authentication denied by user", response.details);
-          setAuthState("cancelled");
-          break;
-        default:
-          // eslint-disable-next-line no-console
-          console.log("Unknown auth state");
-          break;
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      setAuthState("error");
-    }
-  };
-
-  if (authState === "error") {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Warning: authentication not enabled on this app. Please enable auth with the instructions in README",
-    );
-    // Comment this next line out for production apps
-    setAuthState("authenticated");
-  }
-
-  // If user has denied or aborted auth flow
-  if (authState === "cancelled") {
-    return (
-      <Box paddingEnd="2u" height="full" className={styles.centerInPage}>
-        <Rows spacing="2u" align="center">
-          <Alert tone="critical">
-            Something went wrong while authenticating
-          </Alert>
-          <Button
-            variant="primary"
-            onClick={startAuthenticationFlow}
-            stretch={true}
-          >
-            Start authentication flow
-          </Button>
-        </Rows>
-      </Box>
-    );
-  }
-
-  return authState === "authenticated" ? (
+  return (
     <Box className={styles.rootWrapper}>
       <SearchableListView config={config} findResources={findResources} />
     </Box>
-  ) : (
-    <Box
-      width="full"
-      height="full"
-      paddingTop="1u"
-      className={styles.centerInPage}
-    >
-      <LoadingIndicator size="large" />
-    </Box>
   );
 }

package/templates/gen_ai/README.md

@@ -1,3 +1,42 @@
+## Run the development server with ngrok to use authentication with the app
+
+These steps demonstrate how to start the local development server with ngrok and https.
+
+From your app's root directory
+
+1. Stop any running scripts, and run the following command to launch the backend and frontend development servers. The `--ngrok` parameter exposes the backend server via a publicly accessible URL.
+
+   ```bash
+   npm start --ngrok
+   ```
+
+2. After ngrok is running, copy your ngrok url
+   (e.g. `https://0000-0000.ngrok-free.app`) to the clipboard.
+
+   1. Go to your app in the [Developer Portal](https://www.canva.com/developers/apps).
+   2. Navigate to the "Authentication" section of your app.
+   3. Click the "Add provider" button under the "OAuth 2.0" tab
+   4. Configure the provider as follows:
+      - Provider: local (or name of your choice)
+      - Client ID: `client_id` (exactly this string, in a real app you'd have some opaque identifier)
+      - Client Secret: `client_secret` (same here)
+      - Authorization server URL: Your ngrok url followed by `/auth/authorize` e.g. `https://0000-0000.ngrok-free.app/auth/authorize`
+      - Token exchange URL: Your ngrok url followed by `/auth/token` e.g. `https://0000-0000.ngrok-free.app/auth/token`
+      - Revocation exchange URL: (leave blank)
+      - Proof of Key for Code Exchange (PKCE): off
+        Note: Your ngrok URL changes each time you restart ngrok. Keep these fields up to
+        date to ensure your example authentication step will run.
+
+3. Navigate to your app at `https://www.canva.com/developers/apps` and make sure that under Configuration, App source is pointing to your localhost url.
+
+4. Navigate to your app at `https://www.canva.com/developers/apps`, and click **Preview** to preview the app.
+   1. A new screen will appear asking if you want to authenticate.
+      Press **Connect** to start the authentication flow.
+   2. A ngrok screen may appear. If it does, select **Visit Site**
+   3. An authentication popup will appear. For the username, enter `username`, and
+      for the password enter `password`.
+   4. If successful, you will be redirected back to your app.
+
 ## Generative AI Template
 
 This template captures best practices for improving user experience in your application.
@@ -20,7 +59,7 @@ In this template, we've included a basic obscenity filter to stop users from cre
 
 ### Backend
 
-This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls.
+This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls. This backend implements an [OAuth 2](https://datatracker.ietf.org/doc/html/rfc6749) Authorization Server to authorize and authenticate users. To use this, you will need to set up authentication above.
 
 ### Thumbnails