@smoothglue/sync-whiteboard 1.0.1 → 1.0.2

package/dist/assets.js

@@ -25,7 +25,7 @@ logger_1.default.info({ assetStorageUrl: ASSET_STORAGE_URL }, `[ASSETS] Using As
  * @returns The asset ID upon successful storage.
  * @throws Throws an error if the request to the backend fails.
  */
-async function storeAsset(id, fileStream, contentType = "application/octet-stream", originalFilename) {
+async function storeAsset(id, fileStream, contentType = "application/octet-stream", originalFilename, authHeader) {
     const url = `${ASSET_STORAGE_URL}/${id}`;
     logger_1.default.debug({ assetId: id, filename: originalFilename, targetUrl: url }, `[ASSETS] Storing asset`);
     // Ensure we have a readable stream
@@ -37,19 +37,22 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
     try {
         // Convert Node.js stream to Web Standard stream for fetch body
         webStream = stream_1.Readable.toWeb(fileStream);
-        // --- ADDED: Sanitize the filename for use in the Content-Disposition header ---
+        // Sanitize the filename for use in the Content-Disposition header
         // This removes non-ASCII characters that can crash the fetch call.
         const sanitizedFilename = originalFilename.replace(/[^\x00-\x7F]/g, "");
-        // Make the PUT request to the actual asset storage backend
+        const headers = {
+            "Content-Type": contentType,
+            "X-Original-Filename": encodeURIComponent(originalFilename), // Pass the original filename (properly encoded) for the backend to use
+            "Content-Disposition": `attachment; filename="${sanitizedFilename}"`, // Use the sanitized filename in the Content-Disposition header to avoid errors
+        };
+        // forward auth headers if included from client
+        if (authHeader) {
+            headers.Authorization = authHeader;
+        }
+        // Make the PUT request to the asset storage backend
         const response = await fetch(url, {
             method: "PUT",
-            headers: {
-                "Content-Type": contentType,
-                // Pass the original filename (properly encoded) for the backend to use
-                "X-Original-Filename": encodeURIComponent(originalFilename),
-                // Use the sanitized filename in the Content-Disposition header to avoid errors
-                "Content-Disposition": `attachment; filename="${sanitizedFilename}"`,
-            },
+            headers: headers,
             body: webStream, // Cast is necessary due to type mismatches
             // @ts-ignore - duplex: 'half' is required for streaming request bodies with Node fetch
             duplex: "half",
@@ -58,7 +61,7 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
         // Handle backend errors
         if (!response.ok) {
             const errorBody = await response.text();
-            const err = new Error(`Backend failed to store asset ${id}. Status: ${response.status}. Body: ${errorBody}`);
+            const err = new Error(`Backend failed to store asset ${id}. Status: ${response.status}. Body: ${errorBody}. Headers ${headers}`);
             logger_1.default.error({
                 err,
                 assetId: id,
@@ -68,9 +71,7 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
             }, `[ASSETS] Error response from backend storing asset`);
             // Ensure streams are closed on error
             if (webStream) {
-                await webStream
-                    .cancel()
-                    .catch((cancelErr) => logger_1.default.error({
+                await webStream.cancel().catch((cancelErr) => logger_1.default.error({
                     err: cancelErr,
                     assetId: id,
                     stage: "cancel_upload_after_failed_fetch",
@@ -88,9 +89,7 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
             fileStream.destroy(error instanceof Error ? error : new Error(String(error)));
         }
         if (webStream) {
-            await webStream
-                .cancel()
-                .catch((cancelErr) => logger_1.default.error({
+            await webStream.cancel().catch((cancelErr) => logger_1.default.error({
                 err: cancelErr,
                 assetId: id,
                 stage: "cancel_upload_during_error_handling",
@@ -105,13 +104,18 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
  * @returns An object containing the asset's data as a Readable stream and its Content-Type.
  * @throws Throws an error if the request to the backend fails or the asset is not found.
  */
-async function loadAsset(id) {
+async function loadAsset(id, authHeader) {
     const url = `${ASSET_STORAGE_URL}/${id}`;
     logger_1.default.debug({ assetId: id, targetUrl: url }, `[ASSETS] Loading asset`);
+    const headers = {};
+    if (authHeader) {
+        headers.Authorization = authHeader;
+    }
     try {
         // Make the GET request to the actual asset storage backend
         const response = await fetch(url, {
             method: "GET",
+            headers,
         });
         logger_1.default.debug({ assetId: id, status: response.status }, `[ASSETS] Backend GET response status`);
         // Handle backend errors (like 404 Not Found)
@@ -125,7 +129,7 @@ async function loadAsset(id) {
             // Handle other non-OK statuses
             const errorBody = await response.text();
             const err = new Error(// better logging context
-            `Backend failed to load asset ${id}. Status: ${response.status}. Body: ${errorBody}`);
+            `Backend failed to load asset ${id}. Status: ${response.status}. Body: ${errorBody}. Headers ${headers}`);
             logger_1.default.error({
                 err,
                 assetId: id,

package/dist/rooms.js

@@ -14,7 +14,7 @@ if (!SNAPSHOT_STORAGE_URL) {
     process.exit(1);
 }
 logger_1.default.info({ snapshotStorageUrl: SNAPSHOT_STORAGE_URL }, `[ROOMS] Using Snapshot Storage URL`);
-const SAVE_INTERVAL_MS = parseInt(process.env.SWB_SAVE_INTERVAL_MS || '5000', 10);
+const SAVE_INTERVAL_MS = parseInt(process.env.SWB_SAVE_INTERVAL_MS || "5000", 10);
 logger_1.default.info({ saveIntervalMs: SAVE_INTERVAL_MS }, `[ROOMS] Snapshot save interval`);
 // In-memory map holding active room states, keyed by roomId
 const rooms = new Map();
@@ -27,15 +27,21 @@ let createRoomMutex = Promise.resolve(undefined);
  * @returns The snapshot data, or undefined if the backend returns 404.
  * @throws Throws an error for non-404 HTTP errors or network issues.
  */
-async function readSnapshotFromBackend(roomId) {
+async function readSnapshotFromBackend(roomId, authHeader) {
     const url = `${SNAPSHOT_STORAGE_URL}/${roomId}`;
     logger_1.default.debug({ roomId, url }, `[ROOMS] Loading snapshot for room ${roomId} from ${url}`);
+    // Start with the required 'Accept' header
+    const headers = {
+        Accept: "application/json",
+    };
+    // Conditionally add the Authorization header if it exists
+    if (authHeader) {
+        headers["Authorization"] = authHeader;
+    }
     try {
         const response = await fetch(url, {
             method: "GET",
-            headers: {
-                Accept: "application/json" /* TODO: Add auth headers if needed */,
-            },
+            headers: headers,
         });
         if (response.ok) {
             const snapshot = await response.json();
@@ -50,8 +56,15 @@ async function readSnapshotFromBackend(roomId) {
             // Handle unexpected errors from the backend
             const errorBody = await response.text();
             const err = new Error(// better logging context
-            `Backend failed to load snapshot for ${roomId}. Status: ${response.status}. Body: ${errorBody}`);
-            logger_1.default.error({ err, roomId, url, responseStatus: response.status, responseBody: errorBody }, `[ROOMS] Error loading snapshot for room ${roomId}`);
+            `Backend failed to load snapshot for ${roomId}. Status: ${response.status}. Body: ${errorBody}. Headers: ${headers}`);
+            logger_1.default.error({
+                err,
+                roomId,
+                url,
+                responseStatus: response.status,
+                responseBody: errorBody,
+                responseHeader: headers,
+            }, `[ROOMS] Error loading snapshot for room ${roomId}`);
             throw err;
         }
     }
@@ -65,21 +78,33 @@ async function readSnapshotFromBackend(roomId) {
  * @param roomId - The ID of the room.
  * @param room - The TLSocketRoom instance containing the state to save.
  */
-async function saveSnapshotToBackend(roomId, room) {
+async function saveSnapshotToBackend(roomId, room, authHeader) {
     const url = `${SNAPSHOT_STORAGE_URL}/${roomId}`;
     const snapshot = room.getCurrentSnapshot();
+    // Start with the required 'Accept' header
+    const headers = {
+        Accept: "application/json",
+    };
+    // Conditionally add the Authorization header if it exists
+    if (authHeader) {
+        headers["Authorization"] = authHeader;
+    }
     logger_1.default.debug({ roomId, url, snapshotSize: JSON.stringify(snapshot).length }, `[ROOMS] Saving snapshot for room ${roomId} to ${url}`);
     try {
         const response = await fetch(url, {
             method: "POST",
-            headers: {
-                "Content-Type": "application/json" /* TODO: Add auth headers if needed */,
-            },
+            headers: headers,
             body: JSON.stringify(snapshot),
         });
         if (!response.ok) {
             const errorBody = await response.text();
-            logger_1.default.warn({ roomId, url, responseStatus: response.status, responseBody: errorBody }, // No err: new Error() here, just context
+            logger_1.default.warn({
+                roomId,
+                url,
+                responseStatus: response.status,
+                responseBody: errorBody,
+                responseHeaders: headers,
+            }, // No err: new Error() here, just context
             `[ROOMS] Error saving snapshot for room ${roomId}: ${response.status} ${response.statusText}`);
             // Log error but don't throw, to avoid breaking the save interval
         }
@@ -100,7 +125,7 @@ async function saveSnapshotToBackend(roomId, room) {
  * @returns A promise resolving to the TLSocketRoom instance.
  * @throws Throws an error if backend interaction fails during creation.
  */
-async function getOrCreateRoom(roomId) {
+async function getOrCreateRoom(roomId, authHeader) {
     // Chain onto the mutex promise to ensure sequential access to the `rooms` map
     createRoomMutex = createRoomMutex.then(async () => {
         // Check if an active room instance already exists
@@ -119,32 +144,41 @@ async function getOrCreateRoom(roomId) {
         // Fetch initial state from the backend API (can throw error)
         const initialSnapshot = await readSnapshotFromBackend(roomId);
         // Define child logger for the tldraw room instance
-        const tldrawInstanceLogger = logger_1.default.child({ tldrawRoomId: roomId, component: 'tldraw-sync-core' });
+        const tldrawInstanceLogger = logger_1.default.child({
+            tldrawRoomId: roomId,
+            component: "tldraw-sync-core",
+        });
         const tldrawLogAdapter = {
             warn: (...args) => {
-                const msg = args.find(arg => typeof arg === 'string') || 'tldraw room warning';
-                const details = args.filter(arg => typeof arg !== 'string');
+                const msg = args.find((arg) => typeof arg === "string") || "tldraw room warning";
+                const details = args.filter((arg) => typeof arg !== "string");
                 tldrawInstanceLogger.warn(details.length ? { details } : {}, msg);
             },
             error: (...args) => {
-                const errorArg = args.find(arg => arg instanceof Error);
+                const errorArg = args.find((arg) => arg instanceof Error);
                 if (errorArg) {
-                    const msg = args.filter(arg => typeof arg === 'string' && arg !== errorArg.message).join(' ') || errorArg.message || 'tldraw room error';
-                    const details = args.filter(arg => arg !== errorArg && typeof arg !== 'string');
+                    const msg = args
+                        .filter((arg) => typeof arg === "string" && arg !== errorArg.message)
+                        .join(" ") ||
+                        errorArg.message ||
+                        "tldraw room error";
+                    const details = args.filter((arg) => arg !== errorArg && typeof arg !== "string");
                     tldrawInstanceLogger.error({ err: errorArg, details: details.length ? details : undefined }, msg);
                 }
                 else {
-                    const msg = args.find(arg => typeof arg === 'string') || 'tldraw room error (no Error instance)';
-                    const details = args.filter(arg => typeof arg !== 'string');
+                    const msg = args.find((arg) => typeof arg === "string") ||
+                        "tldraw room error (no Error instance)";
+                    const details = args.filter((arg) => typeof arg !== "string");
                     tldrawInstanceLogger.error(details.length ? { details } : {}, msg);
                 }
-            }
+            },
         };
         // Create the new room state object
         const newRoomState = {
             id: roomId,
             needsPersist: false,
             persistPromise: null,
+            authHeader: authHeader,
             room: new sync_core_1.TLSocketRoom({
                 schema: schema_1.whiteboardSchema, // Our defined tldraw schema
                 initialSnapshot, // Initial state from backend (or undefined)
@@ -206,7 +240,7 @@ setInterval(() => {
             roomState.needsPersist = false; // Reset flag
             updatedRoomCount++;
             // Track the save operation promise
-            roomState.persistPromise = saveSnapshotToBackend(roomState.id, roomState.room)
+            roomState.persistPromise = saveSnapshotToBackend(roomState.id, roomState.room, roomState.authHeader)
                 .catch((error) => {
                 // Log errors from periodic save but don't stop the interval
                 logger_1.default.error({ err: error, roomId: roomState.id }, // Pass error object

package/dist/server.js

@@ -33,7 +33,7 @@ app.register(cors_1.default, {
         "Authorization",
         "X-Original-Filename",
         "Content-Disposition",
-    ], // Allowed headers
+    ],
 });
 // --- Define Routes ---
 app.register(async (svc) => {
@@ -47,9 +47,14 @@ app.register(async (svc) => {
         const { roomId } = req.params;
         const sessionId = req.query?.sessionId;
         // Client provides sessionId via query param, handled by TLSocketRoom
+        // Capture the Authorization header from the incoming request
+        const authHeader = req.headers.authorization;
+        if (!authHeader) {
+            req.log.warn({ roomId }, `[SERVER] Connection attempt without Authorization header.`);
+        }
         try {
             // Get or create the room instance (loads/creates state)
-            const room = await (0, rooms_1.getOrCreateRoom)(roomId);
+            const room = await (0, rooms_1.getOrCreateRoom)(roomId, authHeader);
             req.log.debug(`[SERVER] Handling WebSocket connection for room ${roomId}`);
             room.handleSocketConnect({ sessionId, socket });
         }
@@ -68,6 +73,7 @@ app.register(async (svc) => {
     svc.put("/assets/:id", async (req, reply) => {
         const { id } = req.params;
         const contentType = req.headers["content-type"] || "application/octet-stream";
+        const authHeader = req.headers.authorization;
         // Extract original filename from custom header
         const originalFilenameHeaderRaw = req.headers["x-original-filename"];
         const originalFilenameHeader = Array.isArray(originalFilenameHeaderRaw)
@@ -102,7 +108,7 @@ app.register(async (svc) => {
         }
         try {
             // Call the asset storage logic (which proxies to the backend)
-            await (0, assets_1.storeAsset)(id, req.raw, contentType, originalFilename);
+            await (0, assets_1.storeAsset)(id, req.raw, contentType, originalFilename, authHeader);
             req.log.debug({ assetId: id }, `[SERVER] Asset stored successfully.`);
             reply.code(200).send({ success: true });
         }
@@ -122,9 +128,11 @@ app.register(async (svc) => {
     app.get("/assets/:id", async (req, reply) => {
         const { id } = req.params;
         req.log.debug({ assetId: id }, `[SERVER] GET /assets/:id`);
+        // Capture the auth header if included from client
+        const authHeader = req.headers.authorization;
         try {
             // Call the asset loading logic (which proxies to the backend)
-            const { stream: dataStream, contentType } = await (0, assets_1.loadAsset)(id);
+            const { stream: dataStream, contentType } = await (0, assets_1.loadAsset)(id, authHeader);
             req.log.debug({ assetId: id, contentType: contentType }, `[SERVER] Asset loaded. Sending reply...`);
             // Set the correct Content-Type header and send the stream
             reply.header("Content-Type", contentType);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smoothglue/sync-whiteboard",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/server.js",
   "scripts": {
     "dev": "ts-node-dev --respawn --transpile-only src/server.ts",