Building a Real-Time Collaborative Code Editor with Yjs CRDTs, E2E Encryption & Cloudflare Durable Objects

[Browser Peer A] <==== Encrypted WebSocket ====> [Cloudflare DO Room]
[Browser Peer B] <==== Encrypted WebSocket ====>  (SQLite persistence)
[Browser Peer C] <==== Encrypted WebSocket ====> [Cloudflare DO Room]

All payloads: Base64(AES-GCM-256(Yjs binary update))
Cloudflare sees: zero plaintext — purely a zero-knowledge relay

// Derive AES-GCM 256-bit key from room password + room-ID-derived salt
export async function deriveKey(password: string, salt: Uint8Array): Promise<CryptoKey> {
  const passwordKey = await crypto.subtle.importKey(
    'raw', new TextEncoder().encode(password),
    { name: 'PBKDF2' }, false, ['deriveKey']
  );
  return crypto.subtle.deriveKey(
    { name: 'PBKDF2', salt, iterations: 100_000, hash: 'SHA-256' },
    passwordKey,
    { name: 'AES-GCM', length: 256 },
    false, ['encrypt', 'decrypt']
  );
}

// Encrypt: prepend random 12-byte IV to ciphertext
export async function encryptPayload(data: Uint8Array, key: CryptoKey): Promise<Uint8Array> {
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const cipher = new Uint8Array(await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data));
  const result = new Uint8Array(12 + cipher.length);
  result.set(iv, 0);
  result.set(cipher, 12);
  return result;
}

// Decrypt: slice IV, then decrypt; throws PayloadDecryptionError on wrong key
export async function decryptPayload(data: Uint8Array, key: CryptoKey): Promise<Uint8Array> {
  const iv = data.slice(0, 12);
  const cipher = data.slice(12);
  const plain = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, cipher)
    .catch(() => { throw new PayloadDecryptionError(); });
  return new Uint8Array(plain);
}

// Encrypt and broadcast every local Yjs update to the room.
// origin === this means the update came from a remote peer — skip to avoid echo.
private async handleLocalDocUpdate(update: Uint8Array, origin: any) {
  if (origin === this) return;

  const encrypted = await encryptPayload(update, this.cryptoKey);
  this.send({
    type: 'sync-update',
    peerId: this.localPeerId,
    payload: buffer.toBase64(encrypted),
  });

  // Every 50 local updates, send a full snapshot so the DO can compact its SQLite log
  if (++this.localUpdatesSinceSnapshot >= 50) {
    this.localUpdatesSinceSnapshot = 0;
    this.sendFullSnapshot();
  }
}

// On connect and on peer-joined: broadcast our state vector so peers can diff
private async sendSyncStep1() {
  const encoder = encoding.createEncoder();
  encoding.writeVarUint(encoder, 0); // messageSync
  syncProtocol.writeSyncStep1(encoder, this.doc);
  const encrypted = await encryptPayload(encoding.toUint8Array(encoder), this.cryptoKey);
  this.send({ type: 'sync-step-1', peerId: this.localPeerId, payload: buffer.toBase64(encrypted) });
}

export class EncryptedCollabProvider {
  private ws: WebSocket | null = null;
  private autoRetryCount = 0;

  // MAX_AUTO_RETRIES = 5, BASE_BACKOFF_MS = 1000
  // HEARTBEAT_INTERVAL_MS = 20000, PONG_TIMEOUT_MS = 10000

  public connect() {
    const wsUrl = `wss://${host}/api/collab/${this.roomId}?peerId=${this.localPeerId}`;
    this.ws = new WebSocket(wsUrl);

    this.ws.onopen = () => {
      this.autoRetryCount = 0;
      this.startHeartbeat();
      this.flushQueue();      // replay messages queued while offline
      this.sendSyncStep1();   // request any updates we missed
      this.broadcastLocalAwareness();
    };

    this.ws.onclose = () => {
      this.cleanupHeartbeat();
      if (!this.intentionalDisconnect) this.handleUnexpectedDisconnect();
    };
  }

  private handleUnexpectedDisconnect() {
    if (this.autoRetryCount < 5) {
      const delay = 1000 * Math.pow(2, this.autoRetryCount++); // 1s, 2s, 4s, 8s, 16s
      this.setState('RECONNECTING');
      this.reconnectTimer = setTimeout(() => this.connect(), delay);
    } else {
      this.setState('FAILED');
    }
  }
}