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

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
 

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();