Fixed bug

Welp, so much for a working state app huh

src/app/[id]/page.tsx

@@ -86,23 +86,30 @@ export default function ChatPage() {
 				},
 				async (payload) => {
 					if (payload.eventType === "INSERT") {
-						const messageData = payload.new as SiPher.RealtimeMessageData;
-						const isSender = messageData.sender_uuid === currentUser.uuid;
-						
-						const decryptedMsg = await CryptoManager.decryptMessage(messageData.sender_content)
-						console.log(`Hello there`)
-						setMessages((prevState) => {
-							return [
-								...prevState,
-								{
-									id: messageData.id,
-									content: decryptedMsg,
-									sender_uuid: messageData.sender_uuid,
-									created_at: messageData.created_at,
-									isSender
-								}
-							]
-						})
+						try {
+							const messageData = payload.new as SiPher.RealtimeMessageData;
+							const isSender = messageData.sender_uuid === currentUser.uuid;
+							
+							const decryptedMsg = await CryptoManager.decryptMessage(
+								// I forgot to add this, without this, it's pretty much unusable.
+								isSender ? messageData.sender_content : messageData.recipient_content
+							)
+							
+							setMessages((prevState) => {
+								return [
+									...prevState,
+									{
+										id: messageData.id,
+										content: decryptedMsg,
+										sender_uuid: messageData.sender_uuid,
+										created_at: messageData.created_at,
+										isSender
+									}
+								]
+							})
+						} catch (e: any) {
+							console.error(`Something went wrong on the message update: ${e}`)
+						}
 					}
 				}
 			)
@@ -286,8 +293,8 @@ export default function ChatPage() {
 							>
 								<div className={`max-w-[70%] rounded-lg p-3 ${
 									message.isSender
-										? 'bg-primary text-primary-foreground'
-										: 'bg-secondary'
+										? message.error ? 'bg-red-500' : 'bg-primary text-primary-foreground'
+										: message.error ? 'bg-red-500' : 'bg-secondary'
 								}`}>
 									<p>{message.content}</p>
 									<div className="flex items-center justify-end space-x-1 mt-1">

src/lib/crypto/keys.ts

@@ -204,7 +204,7 @@ export class CryptoManager {
 			recipientPublicKey,
 			{
 				name: "RSA-OAEP",
-				hash: "SHA-256",
+				hash: "SHA-256",  // This is important!
 			},
 			true,
 			["encrypt"]
@@ -213,7 +213,7 @@ export class CryptoManager {
 		const encoder = new TextEncoder();
 		const encrypted = await crypto.subtle.encrypt(
 			{
-				name: "RSA-OAEP",
+				name: "RSA-OAEP"
 			},
 			publicKey,
 			encoder.encode(message)
@@ -236,15 +236,20 @@ export class CryptoManager {
 			atob(encryptedMessage).split('').map((char) => char.charCodeAt(0))
 		);
 		
-		const decrypted = await crypto.subtle.decrypt(
-			{
-				name: "RSA-OAEP",
-			},
-			privateKey,
-			encrypted
-		);
-		
-		return new TextDecoder().decode(decrypted);
+		try {
+			const decrypted = await crypto.subtle.decrypt(
+				{
+					name: "RSA-OAEP"  // hash is only needed during key import
+				},
+				privateKey,
+				encrypted
+			);
+			
+			return new TextDecoder().decode(decrypted);
+		} catch (e) {
+			console.error(`Got an error while trying to decrypt the message: ${e}`);
+			throw e;
+		}
 	}
 	
 	/**

src/types/user.d.ts

@@ -5,6 +5,7 @@ declare global {
 			participants: string[];
 			participant_suuids: string[];
 			messages: {
+				error?: boolean;
 				isSender: boolean;
 				id: string;  // UUID
 				content: string;  // The encrypted content (either sender_content or recipient_content)