Implemented randomly generated encryption keys + IVs

cvs0 · cvs0 · commit cd5bbe0b06c3 · 2025-02-06T21:18:46.000-07:00
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -38,6 +38,9 @@ model PasswordItem {
   website   String
   username  String
   password  String
+  usernameIV        String
+  websiteIV         String
+  passwordIV        String
   createdAt DateTime      @default(now())
   updatedAt DateTime      @updatedAt
   userId    String
diff --git a/src/app/actions.ts b/src/app/actions.ts
@@ -1,13 +1,16 @@
 "use server";
 
 import prismadb from "@/lib/prismadb";
-import { auth, currentUser } from "@clerk/nextjs/server";
+import {auth} from "@clerk/nextjs/server";
 
 export async function updatePasswordItem(
   id: string,
   newUsername: string,
   newWebsite: string,
-  newPassword: string
+  newPassword: string,
+  usernameIV: string,
+  websiteIV: string,
+  passwordIV: string
 ) {
   const { userId } = await auth()
 
@@ -42,6 +45,9 @@ export async function updatePasswordItem(
       username: newUsername,
       website: newWebsite,
       password: newPassword,
+      usernameIV,
+      websiteIV,
+      passwordIV,
     },
   });
 
@@ -86,7 +92,10 @@ export async function deletePasswordItem(id: string) {
 export async function createPasswordItem(
   username: string,
   website: string,
-  password: string
+  password: string,
+  usernameIV: string,
+  websiteIV: string,
+  passwordIV: string
 ) {
   const { userId } = await auth()
 
@@ -99,6 +108,9 @@ export async function createPasswordItem(
       username,
       website,
       password,
+      usernameIV,
+      websiteIV,
+      passwordIV,
       updatedAt: new Date().toISOString(),
       createdAt: new Date().toISOString(),
       user: {
diff --git a/src/components/vault/dialogs/create-password-dialog.tsx b/src/components/vault/dialogs/create-password-dialog.tsx
@@ -26,10 +26,10 @@ const initialPasswordItemState = {
 
 export const CreatePasswordDialog = ({
   open,
-    onClose,
+  onClose,
 }: {
   open: boolean;
-  onClose: ()=> void
+  onClose: () => void;
 }) => {
   const [passwordItem, setPasswordItem] = useState(initialPasswordItemState);
   const [loading, setLoading] = useState(false);
@@ -68,12 +68,35 @@ export const CreatePasswordDialog = ({
       return;
     }
 
+    if (!clerkuser) {
+      toast.error("User not found");
+      setLoading(false);
+      return;
+    }
+
     try {
+      const encryptedUsername = await encrypt(
+        passwordItem.username,
+        clerkuser.id
+      );
+      const encryptedWebsite = await encrypt(
+        passwordItem.website,
+        clerkuser.id
+      );
+      const encryptedPassword = await encrypt(
+        passwordItem.password,
+        clerkuser.id
+      );
+
       await createPasswordItem(
-        encrypt(passwordItem.username, clerkuser),
-        encrypt(passwordItem.website, clerkuser),
-        encrypt(passwordItem.password, clerkuser)
+        encryptedUsername.encryptedData,
+        encryptedWebsite.encryptedData,
+        encryptedPassword.encryptedData,
+        encryptedUsername.iv,
+        encryptedWebsite.iv,
+        encryptedPassword.iv
       );
+
       toast.success("Password created");
       setPasswordItem(initialPasswordItemState);
       onClose();
diff --git a/src/components/vault/dialogs/edit-password-dialog.tsx b/src/components/vault/dialogs/edit-password-dialog.tsx
@@ -78,30 +78,45 @@ export function EditPasswordDialog({
     setEditedEntry((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     setLoading(true);
+  
     const validationResult = passwordSchema.safeParse({
       name: editedEntry.name,
       username: editedEntry.username,
       website: editedEntry.website,
       password: editedEntry.password,
     });
-
+  
     if (!validationResult.success) {
       const errorMessage =
         validationResult.error.errors[0]?.message || "Validation failed";
       toast.error(errorMessage);
       setLoading(false);
       return;
     }
-
+  
+    if (!user) {
+      toast.error("User not found");
+      setLoading(false);
+      return;
+    }
+  
     try {
+      const encryptedUsername = await encrypt(editedEntry.username, user.id);
+      const encryptedWebsite = await encrypt(editedEntry.website, user.id);
+      const encryptedPassword = await encrypt(editedEntry.password, user.id);
+  
       updatePasswordItem(
         entry!.id,
-        encrypt(editedEntry.username, user),
-        encrypt(editedEntry.website, user),
-        encrypt(editedEntry.password, user)
+        encryptedUsername.encryptedData,
+        encryptedWebsite.encryptedData,
+        encryptedPassword.encryptedData,
+        encryptedUsername.iv,
+        encryptedWebsite.iv,
+        encryptedPassword.iv,
       );
+  
       router.refresh();
       toast.success("Password updated");
       onClose();
@@ -111,6 +126,7 @@ export function EditPasswordDialog({
       setLoading(false);
     }
   };
+  
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -136,6 +152,7 @@ export function EditPasswordDialog({
               value={editedEntry.name}
               onChange={handleInputChange}
               maxLength={50}
+              name="name"
             />
             <div
               className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
@@ -151,6 +168,7 @@ export function EditPasswordDialog({
               value={editedEntry.username}
               onChange={handleInputChange}
               maxLength={30}
+              name="username"
             />
             <div
               className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
@@ -166,6 +184,7 @@ export function EditPasswordDialog({
               value={editedEntry.website}
               onChange={handleInputChange}
               maxLength={50}
+              name="website"
             />
             <div
               className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
@@ -182,6 +201,7 @@ export function EditPasswordDialog({
               onChange={handleInputChange}
               type="password"
               maxLength={128}
+              name="password"
             />
             <div
               className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50"
diff --git a/src/components/vault/vault-page.tsx b/src/components/vault/vault-page.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import {deletePasswordItem, getPasswords} from "@/app/actions";
-import {Button} from "@/components/ui/button";
-import {Input} from "@/components/ui/input";
-import {ScrollArea} from "@/components/ui/scroll-area";
-import {Sheet,SheetContent} from "@/components/ui/sheet";
-import {CreatePasswordDialog} from "@/components/vault/dialogs/create-password-dialog";
-import {EditPasswordDialog} from "@/components/vault/dialogs/edit-password-dialog";
-import {cn} from "@/lib/utils";
-import {decrypt} from "@/utils/encryption";
-import {useUser} from "@clerk/nextjs";
-import {Prisma} from "@prisma/client";
-import {Plus,SquareArrowOutUpRight,Trash,User} from "lucide-react";
+import { deletePasswordItem, getPasswords } from "@/app/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { CreatePasswordDialog } from "@/components/vault/dialogs/create-password-dialog";
+import { EditPasswordDialog } from "@/components/vault/dialogs/edit-password-dialog";
+import { cn } from "@/lib/utils";
+import { decrypt, generateAndStoreKey, retrieveKey } from "@/utils/encryption";
+import { useUser } from "@clerk/nextjs";
+import { Prisma } from "@prisma/client";
+import { Plus, SquareArrowOutUpRight, Trash, User } from "lucide-react";
 import Image from "next/image";
-import {useRouter} from "next/navigation";
-import {useEffect,useState} from "react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import {
   ContextMenu,
@@ -23,16 +23,17 @@ import {
   ContextMenuLabel,
   ContextMenuTrigger,
 } from "../ui/context-menu";
-import {EmptyState} from "./empty-state";
-import {PasswordDetails} from "./password-details";
-import {Sidebar} from "./sidebar";
+import { EmptyState } from "./empty-state";
+import { PasswordDetails } from "./password-details";
+import { Sidebar } from "./sidebar";
 
 interface PasswordEntry {
   id: string;
   name: string;
   username: string;
   website: string;
   password: string;
+  iv: string;
   updatedAt: string;
   lastAccess: string;
   created: string;
@@ -63,30 +64,61 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredEntries, setFilteredEntries] = useState<PasswordEntry[]>([]);
   const [passwords, setPasswords] = useState<PasswordEntry[]>([]);
-  const [passwordItems, setPasswordItems] = useState(user?.passwordItems)
+  const [passwordItems, setPasswordItems] = useState(user?.passwordItems);
 
   useEffect(() => {
-    if (!clerkUser) return;
+    const ensureEncryptionKey = async () => {
+      if (!clerkUser) return;
 
-    if (!user?.passwordItems || !passwordItems) return;
+      const userId = clerkUser.id;
 
-    const decryptedPasswords = passwordItems
-      .map((item) => ({
-        id: item.id,
-        name: decrypt(item.username, clerkUser),
-        username: decrypt(item.username, clerkUser),
-        website: decrypt(item.website, clerkUser),
-        password: decrypt(item.password, clerkUser),
-        updatedAt: item.updatedAt.toISOString(),
-        lastAccess: item.updatedAt.toISOString(),
-        created: item.createdAt.toISOString(),
-      }))
-      .sort(
-        (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime()
-      );
+      try {
+        await retrieveKey(userId);
+        toast.success("Encryption key found");
+      } catch {
+        toast.success("Generating encryption key...");
+        await generateAndStoreKey(userId);
+      }
+    };
+
+    ensureEncryptionKey();
+  }, [clerkUser]);
 
-    setPasswords(decryptedPasswords);
+  useEffect(() => {
+    if (!clerkUser) return;
+  
+    if (!user?.passwordItems || !passwordItems) return;
+  
+    const decryptPasswords = async () => {
+      const decryptedPasswords = await Promise.all(
+        passwordItems.map(async (item) => {
+          try {
+            const decryptedItem = {
+              id: item.id,
+              name: await decrypt(item.username, item.usernameIV, clerkUser.id),
+              username: await decrypt(item.username, item.usernameIV, clerkUser.id),
+              website: await decrypt(item.website, item.websiteIV, clerkUser.id),
+              password: await decrypt(item.password, item.passwordIV, clerkUser.id),
+              updatedAt: item.updatedAt.toISOString(),
+              lastAccess: item.updatedAt.toISOString(),
+              created: item.createdAt.toISOString(),
+            };
+            return decryptedItem;
+          } catch (error) {
+            console.error(`Error decrypting item ID: ${item.id}`, error);
+            return null;
+          }
+        })
+      );
+  
+      setPasswords(
+        decryptedPasswords.filter((item): item is PasswordEntry => item !== null)
+      );
+    };
+  
+    decryptPasswords();
   }, [user?.passwordItems, clerkUser, passwordItems]);
+  
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
@@ -212,8 +244,10 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
                           onClick={async () => {
                             try {
                               await deletePasswordItem(password.id);
-                              const updatedItems = await getPasswords(user?.id as string)
-                               setPasswordItems(updatedItems?.passwordItems);
+                              const updatedItems = await getPasswords(
+                                user?.id as string
+                              );
+                              setPasswordItems(updatedItems?.passwordItems);
                               if (selectedEntry?.id === password.id) {
                                 setSelectedEntry(null);
                               }
@@ -285,8 +319,8 @@ export const VaultPage: React.FC<VaultPageProps> = ({ user }) => {
         onClose={async () => {
           setIsCreateDialogOpen(false);
           setSelectedEntry(null);
-          const userWithPasswords = await getPasswords(user?.id as string)
-          setPasswordItems(userWithPasswords?.passwordItems)
+          const userWithPasswords = await getPasswords(user?.id as string);
+          setPasswordItems(userWithPasswords?.passwordItems);
         }}
       />
     </div>
diff --git a/src/utils/encryption.ts b/src/utils/encryption.ts
