Added support for TIFF in upload, Update examples, fix preview instru…

…ctions (#24)

2024-04-02

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2024-04-02
+
+### 🧰 Added
+- `@canva/asset`
+  - Added support for TIFF in `upload`
+
+### 🔧 Changed
+- Minor fix in [README.md](./README.md) Step 2: Preview the app to reflect the latest instructions.
+- `examples`
+  - Updated the [/examples/design_token](/examples/design_token) example to include more checks against important JWT claims.
+  - Downgraded ExpressJS module used in [/examples/design_token](/examples/design_token) from v5 to v4 to be consistent with other examples.
+
 ## 2024-03-21
 
 ### 🧰 Added

README.md

@@ -43,11 +43,11 @@ The local development server only exposes a JavaScript bundle, so you can't prev
 
 To preview an app:
 
-1. Create an app via the [Developer Portal](https://www.canva.com/developers).
+1. Create an app via the [Developer Portal](https://www.canva.com/developers/apps).
 2. Select **App source > Development URL**.
 3. In the **Development URL** field, enter the URL of the development server.
 4. Click **Preview**. This opens the Canva editor (and the app) in a new tab.
-5. Click **Use**. (This screen only appears when when using an app for the first time.)
+5. Click **Open**. (This screen only appears when using an app for the first time.)
 
 The app will appear in the side panel.
 

examples/design_token/backend/decode_jwt.ts

@@ -5,11 +5,24 @@ const CACHE_EXPIRY_MS = 60 * 60 * 1_000; // 60 minutes
 const TIMEOUT_MS = 30 * 1_000; // 30 seconds
 const CANVA_BASE_URI = "https://api.canva.com";
 
+/**
+ * The JWT payload we'll decode contains:
+ * designId - The ID of the Canva Design where this token was issued.
+ * aud (audience) - We use the App ID to identify the targeted audience for this payload.
+ * exp (expiry) - The expiry timestamp for this JWT, in seconds.
+ * iat (issuedAt) - The timestamp at which this JWT was issued, in seconds.
+ * nbf (notBefore) - The JWT should only be valid after this timestamp, in seconds.
+ *
+ * See the JWT specification for more details on each claim and what it represents.
+ * https://datatracker.ietf.org/doc/html/rfc7519#section-4.1
+ */
 type DesignToken = Omit<jwt.Jwt, "payload"> & {
   payload: {
     designId: string;
-    appId: string;
-    userId: string;
+    aud: string;
+    exp: number;
+    iat: number;
+    nbf: number;
   };
 };
 
@@ -42,9 +55,50 @@ export const decodeAndVerifyDesignToken = async (
   });
   const key = await jwksClient.getSigningKey(unverifiedDecodedToken.header.kid);
   const publicKey = key.getPublicKey();
-  const verifiedToken = jwt.verify(designToken, publicKey, {
+  const { payload } = jwt.verify(designToken, publicKey, {
     audience: appId,
     complete: true,
   }) as DesignToken;
-  return verifiedToken.payload;
+
+  if (payload.designId == null || payload.aud == null) {
+    throw new jwt.JsonWebTokenError("Invalid JWT payload");
+  }
+
+  /**
+   * Convert current timestamp to seconds, as determined by the NumericDate object in the JWT specifications
+   * See https://datatracker.ietf.org/doc/html/rfc7519#section-2
+   */
+  const now = convertMillisecondsToSeconds(Date.now());
+
+  /**
+   * Dates provided in a JWT payload are in seconds, as per the NumericDate object in the JWT specification.
+   * See https://datatracker.ietf.org/doc/html/rfc7519#section-2
+   * We convert them to milliseconds before creating JS Date objects.
+   */
+  if (payload.exp < now) {
+    throw new jwt.TokenExpiredError(
+      "The provided DesignToken has expired.",
+      new Date(convertSecondsToMilliseconds(payload.exp))
+    );
+  }
+
+  if (payload.iat > now) {
+    throw new jwt.NotBeforeError(
+      "Invalid issue date for DesignToken",
+      new Date(convertSecondsToMilliseconds(payload.iat))
+    );
+  }
+
+  if (payload.nbf > now) {
+    throw new jwt.NotBeforeError(
+      "Cannot verify DesignToken prior to the NotBefore date",
+      new Date(convertSecondsToMilliseconds(payload.nbf))
+    );
+  }
+
+  return payload;
 };
+
+const convertSecondsToMilliseconds = (seconds: number) => seconds * 1000;
+const convertMillisecondsToSeconds = (milliseconds: number) =>
+  milliseconds / 1000;

examples/design_token/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "cors": "^2.8.5",
-    "express": "^5.0.0-beta.2",
+    "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",
     "jwks-rsa": "^3.1.0"
   }

package.json

@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "@canva/app-ui-kit": "^3.4.0",
-    "@canva/asset": "^1.4.0",
+    "@canva/asset": "^1.5.0",
     "@canva/design": "^1.6.0",
     "@canva/error": "^1.1.0",
     "@canva/platform": "^1.0.1",