fix: guard localStorage access against restricted browser contexts (#331)

In private browsing, cross-origin iframes, or storage-blocked environments,
calling localStorage.getItem/setItem throws a SecurityError. The existing
typeof window === "undefined" guard does not cover this case.

Introduce src/utils/safeStorage.ts with safeGetItem and safeSetItem helpers
that wrap every localStorage call in try/catch and return a fallback value
on failure.

Apply across all affected call sites:
- settings.tsx: sensitivity, authToken, invertScroll reads; all setItem calls
- trackpad.tsx: sensitivity read (also adds NaN guard); rein_invert read
  (also wraps JSON.parse which can throw on malformed stored values)

ConnectionProvider.tsx already had its own try/catch — left unchanged.
__root.tsx typeof guard is preserved as-is.

Fixes #331

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Author: upendra-tess

src/routes/settings.tsx

@@ -3,6 +3,7 @@ import QRCode from "qrcode"
 import { useEffect, useState } from "react"
 import { APP_CONFIG, THEMES } from "../config"
 import serverConfig from "../server-config.json"
+import { safeGetItem, safeSetItem } from "../utils/safeStorage"
 
 export const Route = createFileRoute("/settings")({
 	component: SettingsPage,
@@ -30,7 +31,7 @@ function SettingsPage() {
 
 	const [sensitivity, setSensitivity] = useState(() => {
 		if (typeof window === "undefined") return 1.0
-		const saved = localStorage.getItem("rein_sensitivity")
+		const saved = safeGetItem("rein_sensitivity")
 		const parsed = saved ? Number.parseFloat(saved) : Number.NaN
 		return Number.isFinite(parsed) ? parsed : 1.0
 	})
@@ -52,7 +53,7 @@ function SettingsPage() {
 	// Load initial state (IP is not stored in localStorage; only sensitivity, invert, theme are client settings)
 	const [authToken, setAuthToken] = useState(() => {
 		if (typeof window === "undefined") return ""
-		return localStorage.getItem("rein_auth_token") || ""
+		return safeGetItem("rein_auth_token") || ""
 	})
 
 	// Derive URLs once at the top
@@ -92,7 +93,7 @@ function SettingsPage() {
 				if (data.type === "token-generated" && data.token) {
 					if (isMounted) {
 						setAuthToken(data.token)
-						localStorage.setItem("rein_auth_token", data.token)
+						safeSetItem("rein_auth_token", data.token)
 					}
 					socket.close()
 				}
@@ -114,17 +115,17 @@ function SettingsPage() {
 
 	// Effect: Update LocalStorage when settings change
 	useEffect(() => {
-		localStorage.setItem("rein_sensitivity", String(sensitivity))
+		safeSetItem("rein_sensitivity", String(sensitivity))
 	}, [sensitivity])
 
 	useEffect(() => {
-		localStorage.setItem("rein_invert", JSON.stringify(invertScroll))
+		safeSetItem("rein_invert", JSON.stringify(invertScroll))
 	}, [invertScroll])
 
 	// Effect: Theme
 	useEffect(() => {
 		if (typeof window === "undefined") return
-		localStorage.setItem(APP_CONFIG.THEME_STORAGE_KEY, theme)
+		safeSetItem(APP_CONFIG.THEME_STORAGE_KEY, theme)
 		document.documentElement.setAttribute("data-theme", theme)
 	}, [theme])
 

src/routes/trackpad.tsx

@@ -8,6 +8,7 @@ import { TouchArea } from "../components/Trackpad/TouchArea"
 import { useRemoteConnection } from "../hooks/useRemoteConnection"
 import { useTrackpadGesture } from "../hooks/useTrackpadGesture"
 import { ScreenMirror } from "../components/Trackpad/ScreenMirror"
+import { safeGetItem } from "../utils/safeStorage"
 
 export const Route = createFileRoute("/trackpad")({
 	component: TrackpadPage,
@@ -26,14 +27,19 @@ function TrackpadPage() {
 	// Load Client Settings
 	const [sensitivity] = useState(() => {
 		if (typeof window === "undefined") return 1.0
-		const s = localStorage.getItem("rein_sensitivity")
-		return s ? Number.parseFloat(s) : 1.0
+		const s = safeGetItem("rein_sensitivity")
+		const parsed = s ? Number.parseFloat(s) : Number.NaN
+		return Number.isFinite(parsed) ? parsed : 1.0
 	})
 
 	const [invertScroll] = useState(() => {
 		if (typeof window === "undefined") return false
-		const s = localStorage.getItem("rein_invert")
-		return s ? JSON.parse(s) : false
+		try {
+			const s = safeGetItem("rein_invert")
+			return s ? JSON.parse(s) === true : false
+		} catch {
+			return false
+		}
 	})
 
 	const { send, sendCombo } = useRemoteConnection()

src/utils/safeStorage.ts

@@ -0,0 +1,33 @@
+/**
+ * Safe localStorage wrappers that fall back gracefully in restricted browser
+ * contexts (private browsing, cross-origin iframes, storage blocked by policy).
+ *
+ * In these environments, accessing `localStorage` throws a `SecurityError`
+ * rather than returning null, so a simple `typeof localStorage` check is not
+ * sufficient. These helpers catch any thrown error and return the provided
+ * fallback value instead.
+ */
+
+/**
+ * Safely read a value from localStorage.
+ * Returns `fallback` if storage is unavailable or the key does not exist.
+ */
+export function safeGetItem(key: string, fallback: string | null = null): string | null {
+	try {
+		return localStorage.getItem(key)
+	} catch {
+		return fallback
+	}
+}
+
+/**
+ * Safely write a value to localStorage.
+ * Silently does nothing if storage is unavailable.
+ */
+export function safeSetItem(key: string, value: string): void {
+	try {
+		localStorage.setItem(key, value)
+	} catch {
+		// Restricted context — ignore
+	}
+}