feat: Encrypt user form data on client side (#380)

Co-authored-by: Eva Decker <itsevadecker@gmail.com>

Author: atrakh

.changeset/nice-laws-cough.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Add end-to-end encryption of user form data

convex/userFormData.ts

@@ -1,6 +1,17 @@
 import { v } from "convex/values";
 import { userMutation, userQuery } from "./helpers";
 
+export const list = userQuery({
+  args: {},
+  handler: async (ctx, _args) => {
+    const userData = await ctx.db
+      .query("userFormData")
+      .withIndex("userId", (q) => q.eq("userId", ctx.userId))
+      .collect();
+    return userData;
+  },
+});
+
 export const get = userQuery({
   args: {},
   handler: async (ctx, _args) => {

src/components/settings/UserDataForm/UserDataForm.tsx

@@ -0,0 +1,128 @@
+import { Banner, Button, Form, TextField } from "@/components/common";
+import { decryptData, encryptData, getEncryptionKey } from "@/utils/encryption";
+import { api } from "@convex/_generated/api";
+import { useMutation } from "convex/react";
+import { LoaderCircle } from "lucide-react";
+import posthog from "posthog-js";
+import { useEffect, useState } from "react";
+
+interface UserDataFormProps {
+  initialData: { field: string; value: string };
+}
+
+// Placeholder for allowing users to view and edit their form data
+// TODO: Replace this with a more robust implementation that manages draft state better.
+export function UserDataForm({ initialData }: UserDataFormProps) {
+  const [field, setField] = useState(initialData.field);
+  const [decryptedValue, setDecryptedValue] = useState<string>();
+  const [initialDecryptedValue, setInitialDecryptedValue] = useState<string>();
+  const [encryptionKey, setEncryptionKey] = useState<CryptoKey | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const isDirty =
+    field === initialData.field && decryptedValue === initialDecryptedValue;
+  const [didError, setDidError] = useState(false);
+
+  const save = useMutation(api.userFormData.set);
+
+  useEffect(() => {
+    const loadEncryptionKey = async () => {
+      try {
+        const key = await getEncryptionKey();
+        setEncryptionKey(key);
+
+        if (!key) {
+          return;
+        }
+
+        if (initialData.value) {
+          try {
+            const decryptedValue = await decryptData(initialData.value, key);
+            setDecryptedValue(decryptedValue);
+            setInitialDecryptedValue(decryptedValue);
+          } catch (error: any) {
+            posthog.captureException(error);
+            setDidError(true);
+          }
+        } else {
+          setDecryptedValue("");
+          setInitialDecryptedValue("");
+        }
+      } catch (error: any) {
+        posthog.captureException(error);
+        setDidError(true);
+      }
+    };
+
+    loadEncryptionKey();
+  }, [initialData.value]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!encryptionKey || !decryptedValue) {
+      console.error("No encryption key or decrypted value available");
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+
+      // Encrypt the value before saving
+      const encryptedValue = await encryptData(decryptedValue, encryptionKey);
+      await save({ field, value: encryptedValue });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (didError) {
+    return (
+      <Banner variant="danger">Error decrypting {initialData.field}</Banner>
+    );
+  }
+
+  if (encryptionKey === null || decryptedValue === undefined) {
+    return <LoaderCircle className="w-4 h-4 animate-spin" />;
+  }
+
+  const isExistingField = initialData.field !== "";
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <div className="flex gap-2 items-end">
+        <TextField
+          label="Field"
+          name="field"
+          value={field}
+          onChange={setField}
+          placeholder="Enter field name"
+          isDisabled={isExistingField}
+        />
+        <TextField
+          label="Value"
+          name="value"
+          value={decryptedValue}
+          onChange={setDecryptedValue}
+          placeholder="Enter field value"
+        />
+        <Button
+          type="submit"
+          variant="secondary"
+          className="w-fit"
+          isDisabled={
+            field === "" || decryptedValue === "" || isSaving || isDirty
+          }
+        >
+          {isSaving ? (
+            <>
+              <LoaderCircle className="w-4 h-4 animate-spin mr-2" />
+              Saving...
+            </>
+          ) : (
+            "Save"
+          )}
+        </Button>
+      </div>
+    </Form>
+  );
+}

src/components/settings/UserDataForms/UserDataForms.tsx

@@ -0,0 +1,56 @@
+import { Button } from "@/components/common";
+import { initializeEncryption } from "@/utils/encryption";
+import { api } from "@convex/_generated/api";
+import { useQuery } from "convex/react";
+import posthog from "posthog-js";
+import { useEffect, useState } from "react";
+import { UserDataForm } from "../UserDataForm/UserDataForm";
+
+// Placeholder for allowing users to view and edit their form data
+export function UserDataForms() {
+  const userData = useQuery(api.userFormData.list);
+  const [formData, setFormData] = useState<{ field: string; value: string }[]>(
+    userData?.map((data) => ({ field: data.field, value: data.value })) ?? [],
+  );
+
+  useEffect(() => {
+    setFormData(
+      userData?.map((data) => ({ field: data.field, value: data.value })) ?? [],
+    );
+  }, [userData]);
+
+  useEffect(() => {
+    const setupEncryption = async () => {
+      try {
+        await initializeEncryption();
+      } catch (error: any) {
+        posthog.captureException(error);
+      }
+    };
+
+    setupEncryption();
+  }, []);
+
+  // Check if we already have an empty form
+  const hasEmptyForm = formData.some((data) => data.field === "");
+
+  return (
+    <>
+      <div className="mt-4 flex flex-col gap-4">
+        {formData.map((data, idx) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: This is a form where order matters and items won't be reordered
+          <UserDataForm key={idx} initialData={data} />
+        ))}
+      </div>
+      {!hasEmptyForm && (
+        <Button
+          className="w-fit mt-4"
+          variant="secondary"
+          onPress={() => setFormData([...formData, { field: "", value: "" }])}
+        >
+          Add Value
+        </Button>
+      )}
+    </>
+  );
+}

src/components/settings/index.ts

@@ -7,3 +7,4 @@ export * from "./EditResidenceSetting/EditResidenceSetting";
 export * from "./EditThemeSetting/EditThemeSetting";
 export * from "./SettingsGroup/SettingsGroup";
 export * from "./SettingsItem/SettingsItem";
+export * from "./UserDataForms/UserDataForms";

src/routes/_authenticated/settings/data.tsx

@@ -1,5 +1,6 @@
 import { PageHeader } from "@/components/app";
 import { Banner } from "@/components/common";
+import { UserDataForms } from "@/components/settings";
 import { createFileRoute } from "@tanstack/react-router";
 import { Lock } from "lucide-react";
 
@@ -14,6 +15,7 @@ function DataRoute() {
       <Banner variant="success" icon={Lock}>
         Data shown here is end-to-end encrypted. Only you can access it.
       </Banner>
+      <UserDataForms />
     </>
   );
 }