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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.3",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/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/base/eslint.config.mjs

@@ -1,11 +1,9 @@
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import jest from "eslint-plugin-jest";
-import react from "eslint-plugin-react";
-import globals from "globals";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
+import general from "./conf/eslint-general.mjs";
+import i18n from "./conf/eslint-i18n.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -34,276 +32,8 @@ export default [
     "plugin:@typescript-eslint/strict",
     "plugin:@typescript-eslint/stylistic",
     "plugin:react/recommended",
-    "plugin:jest/recommended"
+    "plugin:jest/recommended",
   ),
-  {
-    plugins: {
-      "@typescript-eslint": typescriptEslint,
-      jest,
-      react,
-    },
-    languageOptions: {
-      globals: {
-        ...globals.serviceworker,
-        ...globals.browser,
-      },
-    },
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-    rules: {
-      "@typescript-eslint/no-non-null-assertion": "warn",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/consistent-type-imports": "error",
-      "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/no-empty-interface": "warn",
-      "@typescript-eslint/consistent-type-definitions": "off",
-      "@typescript-eslint/explicit-member-accessibility": [
-        "error",
-        {
-          accessibility: "no-public",
-          overrides: {
-            parameterProperties: "off",
-          },
-        },
-      ],
-      "@typescript-eslint/naming-convention": [
-        "error",
-        {
-          selector: "typeLike",
-          format: ["PascalCase"],
-          leadingUnderscore: "allow",
-        },
-      ],
-      "no-invalid-this": "off",
-      "@typescript-eslint/no-invalid-this": "error",
-      "@typescript-eslint/no-unused-expressions": [
-        "error",
-        {
-          allowShortCircuit: true,
-          allowTernary: true,
-        },
-      ],
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "none",
-          ignoreRestSiblings: true,
-        },
-      ],
-      "@typescript-eslint/no-require-imports": "error",
-      "jest/no-restricted-matchers": [
-        "error",
-        {
-          toContainElement:
-            "toContainElement is not recommended as it encourages testing the internals of the components",
-          toContainHTML:
-            "toContainHTML is not recommended as it encourages testing the internals of the components",
-          toHaveAttribute:
-            "toHaveAttribute is not recommended as it encourages testing the internals of the components",
-          toHaveClass:
-            "toHaveClass is not recommended as it encourages testing the internals of the components",
-          toHaveStyle:
-            "toHaveStyle is not recommended as it encourages testing the internals of the components",
-        },
-      ],
-      "react/jsx-curly-brace-presence": [
-        "error",
-        {
-          props: "never",
-          children: "never",
-        },
-      ],
-      "react/jsx-tag-spacing": [
-        "error",
-        {
-          closingSlash: "never",
-          beforeSelfClosing: "allow",
-          afterOpening: "never",
-          beforeClosing: "allow",
-        },
-      ],
-      "react/self-closing-comp": "error",
-      "react/no-unescaped-entities": "off",
-      "react/jsx-uses-react": "off",
-      "react/react-in-jsx-scope": "off",
-      "default-case": "error",
-      eqeqeq: [
-        "error",
-        "always",
-        {
-          null: "never",
-        },
-      ],
-      "no-caller": "error",
-      "no-console": "error",
-      "no-eval": "error",
-      "no-inner-declarations": "error",
-      "no-new-wrappers": "error",
-      "no-restricted-globals": [
-        "error",
-        {
-          name: "fit",
-          message: "Don't focus tests",
-        },
-        {
-          name: "fdescribe",
-          message: "Don't focus tests",
-        },
-        {
-          name: "length",
-          message:
-            "Undefined length - Did you mean to use window.length instead?",
-        },
-        {
-          name: "name",
-          message: "Undefined name - Did you mean to use window.name instead?",
-        },
-        {
-          name: "status",
-          message:
-            "Undefined status - Did you mean to use window.status instead?",
-        },
-        {
-          name: "spyOn",
-          message: "Don't use spyOn directly, use jest.spyOn",
-        },
-      ],
-      "no-restricted-properties": [
-        "error",
-        {
-          property: "bind",
-          message: "Don't o.f.bind(o, ...), use () => o.f(...)",
-        },
-        {
-          object: "ReactDOM",
-          property: "findDOMNode",
-          message: "Don't use ReactDOM.findDOMNode() as it is deprecated",
-        },
-      ],
-      "no-restricted-syntax": [
-        "error",
-        {
-          selector: "AccessorProperty, TSAbstractAccessorProperty",
-          message:
-            "Accessor property syntax is not allowed, use getter and setters.",
-        },
-        {
-          selector: "PrivateIdentifier",
-          message:
-            "Private identifiers are not allowed, use TypeScript private fields.",
-        },
-        {
-          selector:
-            "JSXOpeningElement[name.name = /^[A-Z]/] > JSXAttribute[name.name = /-/]",
-          message:
-            "Passing hyphenated props to custom components is not type-safe. Prefer a camelCased equivalent if available. (See https://github.com/microsoft/TypeScript/issues/55182)",
-        },
-        {
-          selector:
-            "CallExpression[callee.object.name='window'][callee.property.name='open']",
-          message:
-            "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
-        },
-      ],
-      "no-return-await": "error",
-      "no-throw-literal": "error",
-      "no-undef-init": "error",
-      "no-var": "error",
-      "object-shorthand": "error",
-      "prefer-const": [
-        "error",
-        {
-          destructuring: "all",
-        },
-      ],
-      "prefer-object-spread": "error",
-      "prefer-rest-params": "error",
-      "prefer-spread": "error",
-      radix: "error",
-    },
-  },
-  {
-    files: ["**/*.tsx"],
-    rules: {
-      "react/no-deprecated": "error",
-      "react/forbid-elements": [
-        "error",
-        {
-          forbid: [
-            {
-              element: "video",
-              message:
-                "Don't use HTML video directly. Instead, use the App UI Kit <VideoCard /> as this respects users' auto-playing preferences",
-            },
-            {
-              element: "em",
-              message:
-                "Don't use <em> to italicize text. Canva's UI fonts don't support italic font style.",
-            },
-            {
-              element: "i",
-              message:
-                "Don't use <i> to italicize text. Canva's UI fonts don't support italic font style.",
-            },
-            {
-              element: "iframe",
-              message:
-                "Canva Apps aren't allowed to contain iframes. You should either recreate the UI you want to show in the iframe in the app directly, or link to your page via a `<Link>` tag.  For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "script",
-              message:
-                "Script tags are not allowed in Canva SDK Apps. You should import JavaScript modules instead. For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "a",
-              message:
-                "Don't use <a> tags. Instead, use the <Link> component from the App UI Kit, and remember to open the url via the requestOpenExternalUrl method from @canva/platform.",
-            },
-            {
-              element: "img",
-              message:
-                "Have you considered using <ImageCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "embed",
-              message:
-                "Have you considered using <EmbedCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "audio",
-              message:
-                "Have you considered using <AudioCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "button",
-              message:
-                "Rather than using the native HTML <button> element, use the <Button> component from the App UI Kit for consistency and accessibility.",
-            },
-            {
-              element: "input",
-              message:
-                "Wherever possible, prefer using the form inputs from the App UI Kit for consistency and accessibility (TextInput, Checkbox, FileInput, etc).",
-            },
-            {
-              element: "base",
-              message:
-                "The <base> tag is not supported in Canva Apps. We recommend using hash-based routing. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "link",
-              message:
-                "If you're trying to include a css stylesheet, we recommend importing css using React, or using embedded stylesheets. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-          ],
-        },
-      ],
-    },
-  },
+  ...general,
+  ...i18n,
 ];

package/templates/base/package.json

@@ -6,7 +6,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^3.8.0",
+    "@canva/app-ui-kit": "^4.0.0",
     "@canva/asset": "^1.7.1",
     "@canva/design": "^1.10.0",
     "@canva/error": "^1.1.0",