fix: ensure AES encryption key is correctly decoded from base64 before import

Author: coderomm

apps/collabydraw/canvas-engine/CanvasEngine.ts

@@ -25,7 +25,6 @@ import {
   WS_URL,
 } from "@/config/constants";
 import { MessageQueue } from "./MessageQueue";
-// import { getShapes } from "@/actions/shape";
 import { decryptData, encryptData } from "@/utils/crypto";
 
 export class CanvasEngine {

apps/collabydraw/components/CreateRoomDialog.tsx

@@ -7,7 +7,7 @@ import { useTransition } from "react";
 import { createRoom } from "@/actions/room";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
-import { nanoid } from "nanoid";
+import { generateAESKey } from "@/utils/crypto";
 
 export default function CreateRoomDialog({ open, onOpenChange }: { open: boolean, onOpenChange: (open: boolean) => void }) {
     const [isPending, startTransition] = useTransition();
@@ -18,7 +18,7 @@ export default function CreateRoomDialog({ open, onOpenChange }: { open: boolean
             try {
                 const result = await createRoom();
                 if (result.success && result.room?.id) {
-                    const encryptionKey = nanoid(20);
+                    const encryptionKey = await generateAESKey();
                     const redirectURL = `/#room=${result.room?.id},${encryptionKey}`;
                     router.push(redirectURL);
                     onOpenChange(false);

apps/collabydraw/components/canvas/CanvasRoot.tsx

@@ -62,14 +62,16 @@ export default function CanvasRoot() {
                     userName: session?.user?.name ?? null,
                     token: session?.accessToken ?? null,
                 };
-            } else {
+            } else if (status === "unauthenticated" && currentRoomParams) {
                 window.alert(
                     "You need to be logged in to join this collaborative room.\n\n" +
                     "Please sign up or log in to your account to continue. " +
                     "Collaborative features require authentication to ensure secure access and proper identification of participants."
                 );
                 setMode("standalone");
                 router.push(`/auth/signin?callbackUrl=${hash}`);
+            } else {
+                setMode("standalone");
             }
         };
 
@@ -176,7 +178,7 @@ export default function CanvasRoot() {
                 setParticipants(updatedParticipants);
             } : null,
             mode === 'room' ? (connectionStatus) => setIsConnected(connectionStatus) : null,
-            null
+            userRef.current.encryptionKey
         );
         return engine;
     }, [canvasEngineState.canvasColor, mode]);

apps/collabydraw/package.json

@@ -29,7 +29,6 @@
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.475.0",
     "motion": "^12.4.3",
-    "nanoid": "^5.1.5",
     "next": "15.1.7",
     "next-auth": "^4.24.11",
     "next-themes": "^0.4.4",

apps/collabydraw/utils/crypto.ts

@@ -1,23 +1,34 @@
+export async function generateAESKey(): Promise<string> {
+  const key = crypto.getRandomValues(new Uint8Array(16));
+  return btoa(String.fromCharCode(...key));
+}
+
+function base64ToUint8Array(base64: string): Uint8Array {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
 export async function encryptData(
   plainText: string,
   key: string
 ): Promise<string> {
-  const enc = new TextEncoder();
   const iv = crypto.getRandomValues(new Uint8Array(12));
   const alg = { name: "AES-GCM", iv };
 
-  const cryptoKey = await crypto.subtle.importKey(
-    "raw",
-    enc.encode(key),
-    alg,
-    false,
-    ["encrypt"]
-  );
+  const rawKey = base64ToUint8Array(key);
+
+  const cryptoKey = await crypto.subtle.importKey("raw", rawKey, alg, false, [
+    "encrypt",
+  ]);
 
   const encrypted = await crypto.subtle.encrypt(
     alg,
     cryptoKey,
-    enc.encode(plainText)
+    new TextEncoder().encode(plainText)
   );
 
   const combined = new Uint8Array(iv.byteLength + encrypted.byteLength);
@@ -31,22 +42,21 @@ export async function decryptData(
   cipherText: string,
   key: string
 ): Promise<string> {
-  const enc = new TextEncoder();
   const combined = Uint8Array.from(atob(cipherText), (c) => c.charCodeAt(0));
   const iv = combined.slice(0, 12);
   const data = combined.slice(12);
 
+  const rawKey = base64ToUint8Array(key);
   const alg = { name: "AES-GCM", iv };
 
   const cryptoKey = await crypto.subtle.importKey(
     "raw",
-    enc.encode(key),
+    rawKey,
     alg,
     false,
     ["decrypt"]
   );
 
   const decrypted = await crypto.subtle.decrypt(alg, cryptoKey, data);
-
   return new TextDecoder().decode(decrypted);
-}
+}