Add SSR-safe checks and improve error handling for token storage and encryption

- Introduced SSR guards for browser APIs in `crypto` and `storage` modules. - Enhanced resilience with improved error handling for encryption key management, token storage, and retrieval. - Added validation for token structure and fallback mechanisms for corrupted data. - Refactored localStorage handling with explicit availability checks for improved robustness.
2025-10-31 22:09:20 +01:00
parent cf5bb41c17
commit 76023694f8
2 changed files with 134 additions and 27 deletions
--- a/frontend/src/lib/auth/crypto.ts
+++ b/frontend/src/lib/auth/crypto.ts
@@ -1,27 +1,50 @@
 /**
 * Cryptographic utilities for secure token storage
 * Implements AES-GCM encryption for localStorage fallback
+ * SSR-safe: All browser APIs guarded
 */

 const ENCRYPTION_KEY_NAME = 'auth_encryption_key';

+/**
+ * Check if crypto APIs are available (browser only)
+ */
+function isCryptoAvailable(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof crypto !== 'undefined' &&
+    typeof crypto.subtle !== 'undefined' &&
+    typeof sessionStorage !== 'undefined'
+  );
+}
+
 /**
 * Generate or retrieve encryption key
 * Key is stored in sessionStorage (cleared on browser close)
 */
 async function getEncryptionKey(): Promise<CryptoKey> {
+  if (!isCryptoAvailable()) {
+    throw new Error('Crypto API not available - must be called in browser context');
+  }
+
  // Check if key exists in session
  const storedKey = sessionStorage.getItem(ENCRYPTION_KEY_NAME);

  if (storedKey) {
-    const keyData = JSON.parse(storedKey);
-    return await crypto.subtle.importKey(
-      'jwk',
-      keyData,
-      { name: 'AES-GCM', length: 256 },
-      true,
-      ['encrypt', 'decrypt']
-    );
+    try {
+      const keyData = JSON.parse(storedKey);
+      return await crypto.subtle.importKey(
+        'jwk',
+        keyData,
+        { name: 'AES-GCM', length: 256 },
+        true,
+        ['encrypt', 'decrypt']
+      );
+    } catch (error) {
+      // Corrupted key, regenerate
+      console.warn('Failed to import stored key, generating new key:', error);
+      sessionStorage.removeItem(ENCRYPTION_KEY_NAME);
+    }
  }

  // Generate new key
@@ -32,8 +55,13 @@ async function getEncryptionKey(): Promise<CryptoKey> {
  );

  // Store key in sessionStorage
-  const exportedKey = await crypto.subtle.exportKey('jwk', key);
-  sessionStorage.setItem(ENCRYPTION_KEY_NAME, JSON.stringify(exportedKey));
+  try {
+    const exportedKey = await crypto.subtle.exportKey('jwk', key);
+    sessionStorage.setItem(ENCRYPTION_KEY_NAME, JSON.stringify(exportedKey));
+  } catch (error) {
+    console.warn('Failed to store encryption key:', error);
+    // Continue anyway - key is in memory
+  }

  return key;
 }
@@ -42,8 +70,13 @@ async function getEncryptionKey(): Promise<CryptoKey> {
 * Encrypt data using AES-GCM
 * @param data - Data to encrypt
 * @returns Base64 encoded encrypted data with IV
+ * @throws Error if crypto is not available or encryption fails
 */
 export async function encryptData(data: string): Promise<string> {
+  if (!isCryptoAvailable()) {
+    throw new Error('Encryption not available in SSR context');
+  }
+
  try {
    const key = await getEncryptionKey();
    const iv = crypto.getRandomValues(new Uint8Array(12)); // 96-bit IV for GCM
@@ -73,8 +106,13 @@ export async function encryptData(data: string): Promise<string> {
 * Decrypt data encrypted with encryptData
 * @param encryptedData - Base64 encoded encrypted data with IV
 * @returns Decrypted string
+ * @throws Error if crypto is not available or decryption fails
 */
 export async function decryptData(encryptedData: string): Promise<string> {
+  if (!isCryptoAvailable()) {
+    throw new Error('Decryption not available in SSR context');
+  }
+
  try {
    const key = await getEncryptionKey();

@@ -102,7 +140,14 @@ export async function decryptData(encryptedData: string): Promise<string> {
 /**
 * Clear encryption key from session
 * Call this on logout to invalidate encrypted data
+ * SSR-safe: No-op if sessionStorage not available
 */
 export function clearEncryptionKey(): void {
-  sessionStorage.removeItem(ENCRYPTION_KEY_NAME);
+  if (typeof window !== 'undefined' && typeof sessionStorage !== 'undefined') {
+    try {
+      sessionStorage.removeItem(ENCRYPTION_KEY_NAME);
+    } catch (error) {
+      console.warn('Failed to clear encryption key:', error);
+    }
+  }
 }
--- a/frontend/src/lib/auth/storage.ts
+++ b/frontend/src/lib/auth/storage.ts
@@ -2,6 +2,7 @@
 * Secure token storage abstraction
 * Primary: httpOnly cookies (server-side)
 * Fallback: Encrypted localStorage (client-side)
+ * SSR-safe: All browser APIs guarded
 */

 import { encryptData, decryptData, clearEncryptionKey } from './crypto';
@@ -16,14 +17,41 @@ const STORAGE_METHOD_KEY = 'auth_storage_method';

 export type StorageMethod = 'cookie' | 'localStorage';

+/**
+ * Check if localStorage is available (browser only)
+ */
+function isLocalStorageAvailable(): boolean {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+    return false;
+  }
+
+  try {
+    const test = '__storage_test__';
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 /**
 * Get current storage method
+ * SSR-safe: Returns 'localStorage' as default (actual check happens client-side)
 */
 export function getStorageMethod(): StorageMethod {
-  // Check if we previously set a storage method
-  const stored = localStorage.getItem(STORAGE_METHOD_KEY);
-  if (stored === 'cookie' || stored === 'localStorage') {
-    return stored;
+  if (!isLocalStorageAvailable()) {
+    return 'localStorage'; // Default, will be checked again client-side
+  }
+
+  try {
+    // Check if we previously set a storage method
+    const stored = localStorage.getItem(STORAGE_METHOD_KEY);
+    if (stored === 'cookie' || stored === 'localStorage') {
+      return stored;
+    }
+  } catch (error) {
+    console.warn('Failed to get storage method:', error);
  }

  // Default to localStorage for client-side auth
@@ -33,14 +61,25 @@ export function getStorageMethod(): StorageMethod {

 /**
 * Set storage method preference
+ * SSR-safe: No-op if localStorage not available
 */
 export function setStorageMethod(method: StorageMethod): void {
-  localStorage.setItem(STORAGE_METHOD_KEY, method);
+  if (!isLocalStorageAvailable()) {
+    console.warn('Cannot set storage method: localStorage not available');
+    return;
+  }
+
+  try {
+    localStorage.setItem(STORAGE_METHOD_KEY, method);
+  } catch (error) {
+    console.error('Failed to set storage method:', error);
+  }
 }

 /**
 * Save tokens securely
 * @param tokens - Access and refresh tokens
+ * @throws Error if storage fails
 */
 export async function saveTokens(tokens: TokenStorage): Promise<void> {
  const method = getStorageMethod();
@@ -54,6 +93,10 @@ export async function saveTokens(tokens: TokenStorage): Promise<void> {
  }

  // Fallback: Encrypted localStorage
+  if (!isLocalStorageAvailable()) {
+    throw new Error('localStorage not available - cannot save tokens');
+  }
+
  try {
    const encrypted = await encryptData(JSON.stringify(tokens));
    localStorage.setItem(STORAGE_KEY, encrypted);
@@ -66,6 +109,7 @@ export async function saveTokens(tokens: TokenStorage): Promise<void> {
 /**
 * Retrieve tokens from storage
 * @returns Stored tokens or null
+ * SSR-safe: Returns null if localStorage not available
 */
 export async function getTokens(): Promise<TokenStorage | null> {
  const method = getStorageMethod();
@@ -79,6 +123,10 @@ export async function getTokens(): Promise<TokenStorage | null> {
  }

  // Fallback: Encrypted localStorage
+  if (!isLocalStorageAvailable()) {
+    return null;
+  }
+
  try {
    const encrypted = localStorage.getItem(STORAGE_KEY);
    if (!encrypted) {
@@ -86,17 +134,29 @@ export async function getTokens(): Promise<TokenStorage | null> {
    }

    const decrypted = await decryptData(encrypted);
-    return JSON.parse(decrypted) as TokenStorage;
+    const tokens = JSON.parse(decrypted) as TokenStorage;
+
+    // Validate structure
+    if (!tokens || typeof tokens !== 'object') {
+      throw new Error('Invalid token structure');
+    }
+
+    return tokens;
  } catch (error) {
    console.error('Failed to retrieve tokens:', error);
    // If decryption fails, clear invalid data
-    localStorage.removeItem(STORAGE_KEY);
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch {
+      // Ignore cleanup errors
+    }
    return null;
  }
 }

 /**
 * Clear all tokens from storage
+ * SSR-safe: No-op if localStorage not available
 */
 export async function clearTokens(): Promise<void> {
  const method = getStorageMethod();
@@ -108,21 +168,23 @@ export async function clearTokens(): Promise<void> {
  }

  // Always clear localStorage (belt and suspenders)
-  localStorage.removeItem(STORAGE_KEY);
+  if (isLocalStorageAvailable()) {
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch (error) {
+      console.warn('Failed to clear tokens from localStorage:', error);
+    }
+  }
+
+  // Clear encryption key
  clearEncryptionKey();
 }

 /**
 * Check if storage is available
 * @returns true if localStorage is accessible
+ * SSR-safe: Returns false on server
 */
 export function isStorageAvailable(): boolean {
-  try {
-    const test = '__storage_test__';
-    localStorage.setItem(test, test);
-    localStorage.removeItem(test);
-    return true;
-  } catch {
-    return false;
-  }
+  return isLocalStorageAvailable();
 }