From 0fcc66e25d2eba710111e0da2bed64bbe5ee9110 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Mon, 8 Dec 2025 17:13:45 +0100
Subject: [PATCH] fix: make encryption key storage SSR-safe to prevent 502
 errors

- Add isBrowser() check to key-storage.ts functions
- Initialize EncryptionKeyProvider with false and hydrate on mount
- Guard getInitialDisplayState against SSR execution
---
 resources/js/components/encrypted-text.tsx       |  3 +++
 resources/js/contexts/encryption-key-context.tsx |  7 +++----
 resources/js/lib/key-storage.ts                  | 12 ++++++++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/encrypted-text.tsx b/resources/js/components/encrypted-text.tsx
index f6165475..053af8b0 100644
--- a/resources/js/components/encrypted-text.tsx
+++ b/resources/js/components/encrypted-text.tsx
@@ -52,6 +52,9 @@ function getInitialDisplayState(isKeySet: boolean): DisplayState {
     if (!isKeySet) {
         return 'encrypted';
     }
+    if (typeof window === 'undefined') {
+        return 'encrypted';
+    }
     const keyString = getStoredKey();
     return keyString ? 'loading' : 'encrypted';
 }
diff --git a/resources/js/contexts/encryption-key-context.tsx b/resources/js/contexts/encryption-key-context.tsx
index 82a41a00..356825ba 100644
--- a/resources/js/contexts/encryption-key-context.tsx
+++ b/resources/js/contexts/encryption-key-context.tsx
@@ -27,10 +27,7 @@ const EncryptionKeyContext = createContext<
 >(undefined);
 
 export function EncryptionKeyProvider({ children }: { children: ReactNode }) {
-    const [isKeySet, setIsKeySet] = useState(() => {
-        const key = getStoredKey();
-        return !!key;
-    });
+    const [isKeySet, setIsKeySet] = useState(false);
     const [encryptedMessageData, setEncryptedMessageData] =
         useState<EncryptedMessageData | null>(null);
 
@@ -56,6 +53,8 @@ export function EncryptionKeyProvider({ children }: { children: ReactNode }) {
     }
 
     useEffect(() => {
+        refreshKeyState();
+
         const interval = setInterval(() => {
             const key = getStoredKey();
             setIsKeySet(!!key);
diff --git a/resources/js/lib/key-storage.ts b/resources/js/lib/key-storage.ts
index aac6502e..f0f442d8 100644
--- a/resources/js/lib/key-storage.ts
+++ b/resources/js/lib/key-storage.ts
@@ -1,6 +1,12 @@
 const ENCRYPTION_KEY_NAME = 'encryption_key';
 
+function isBrowser(): boolean {
+    return typeof window !== 'undefined';
+}
+
 export function storeKey(key: string, persistent: boolean): void {
+    if (!isBrowser()) return;
+
     if (persistent) {
         localStorage.setItem(ENCRYPTION_KEY_NAME, key);
     } else {
@@ -9,6 +15,8 @@ export function storeKey(key: string, persistent: boolean): void {
 }
 
 export function getStoredKey(): string | null {
+    if (!isBrowser()) return null;
+
     return (
         sessionStorage.getItem(ENCRYPTION_KEY_NAME) ||
         localStorage.getItem(ENCRYPTION_KEY_NAME)
@@ -16,10 +24,14 @@ export function getStoredKey(): string | null {
 }
 
 export function clearKey(): void {
+    if (!isBrowser()) return;
+
     sessionStorage.removeItem(ENCRYPTION_KEY_NAME);
     localStorage.removeItem(ENCRYPTION_KEY_NAME);
 }
 
 export function isKeyPersistent(): boolean {
+    if (!isBrowser()) return false;
+
     return localStorage.getItem(ENCRYPTION_KEY_NAME) !== null;
 }