Fix cookie JSON parsing by disabling automatic parsing (ENG-6818) (#5616)

* Fix cookie JSON parsing by disabling automatic parsing

- Add true parameter to cookies.get() calls in state.js to prevent
  universal-cookies from automatically parsing JSON strings
- Add comprehensive integration tests for JSON cookie values including:
  - Dictionary objects serialized as JSON
  - Arrays serialized as JSON
  - Complex nested objects
  - JSON with special characters and escaping
  - Empty JSON objects and arrays

Fixes ENG-6818: Cookie handling bug where JSON-formatted values
were being parsed into dictionaries instead of preserved as strings

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Fix pre-commit formatting issues in JSON cookie tests

- Wrap long JSON string with escapes to meet line length requirements
- Use consistent double quotes for empty JSON strings
- Apply formatting changes as required by pre-commit hooks

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Update reflex/.templates/web/utils/state.js

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Remove unused token variable from JSON cookie test

- Fix pre-commit ruff check failure F841 (unused variable)
- The test doesn't require authentication to verify JSON string preservation

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Fix timing issue in JSON cookie test by adding poll_for_token call

- Add back poll_for_token() call before accessing DOM elements
- Follows the same pattern as the existing working test
- Ensures app is fully loaded before test execution

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Update test_client_storage.py

* Add browser refresh to JSON cookie test to trigger hydration bug

- Refresh browser after setting each JSON cookie value
- Re-acquire DOM elements after refresh to test cookie hydration
- Ensures test properly exercises the universal-cookies JSON parsing bug
- Addresses feedback from masenf to test the actual bug scenario

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Fix pre-commit formatting issues in JSON cookie test

- Remove trailing whitespace from empty lines
- Address ruff formatting requirements for browser refresh test enhancement

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Refactor JSON cookie test to eliminate code duplication

- Create helper function test_json_cookie_with_refresh() as requested by masenf
- Encapsulates full test cycle: poll token, get element, set value, assert, refresh, poll token, assert
- Reduces test from ~60 lines of duplicated logic to ~20 lines using helper function
- Maintains identical functionality and test coverage
- Addresses GitHub comment feedback for cleaner code organization

Co-Authored-By: masen@reflex.dev <masen@reflex.dev>

* Fix it properly Anna Maria, with breadcrumbs

* Yeeeah, I want it that way 🕺

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: masen@reflex.dev <masen@reflex.dev>
Co-authored-by: Masen Furer <m_github@0x26.net>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: 3 people

reflex/.templates/web/utils/state.js

@@ -791,9 +791,9 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.cookies) {
       const cookie_options = client_storage.cookies[state_key];
       const cookie_name = cookie_options.name || state_key;
-      const cookie_value = cookies.get(cookie_name);
+      const cookie_value = cookies.get(cookie_name, { doNotParse: true });
       if (cookie_value !== undefined) {
-        client_storage_values[state_key] = cookies.get(cookie_name);
+        client_storage_values[state_key] = cookie_value;
       }
     }
   }

tests/integration/test_client_storage.py

@@ -782,3 +782,75 @@ async def poll_for_c1_set():
     assert l4.text == "l4 default"
     assert c1s.text == ""
     assert l1s.text == ""
+
+
+@pytest.mark.asyncio
+async def test_json_cookie_values(
+    client_side: AppHarness,
+    driver: WebDriver,
+):
+    """Test that JSON-formatted cookie values are preserved as strings.
+
+    Args:
+        client_side: harness for ClientSide app.
+        driver: WebDriver instance.
+    """
+    app = client_side.app_instance
+    assert app is not None
+    assert client_side.frontend_url is not None
+
+    def poll_for_token():
+        token_input = AppHarness.poll_for_or_raise_timeout(
+            lambda: driver.find_element(By.ID, "token")
+        )
+        token = client_side.poll_for_value(token_input)
+        assert token is not None
+        return token
+
+    def set_sub(var: str, value: str):
+        state_var_input = driver.find_element(By.ID, "state_var")
+        input_value_input = driver.find_element(By.ID, "input_value")
+        set_sub_state_button = driver.find_element(By.ID, "set_sub_state")
+        AppHarness.expect(lambda: state_var_input.get_attribute("value") == "")
+        AppHarness.expect(lambda: input_value_input.get_attribute("value") == "")
+
+        state_var_input.send_keys(var)
+        input_value_input.send_keys(value)
+        set_sub_state_button.click()
+
+    def _assert_json_cookie_with_refresh(cookie_id: str, json_value: str):
+        """Helper function to test JSON cookie values with browser refresh.
+
+        Args:
+            cookie_id: ID of the cookie element to manipulate.
+            json_value: JSON string to set as the cookie value.
+        """
+        poll_for_token()
+        element = driver.find_element(By.ID, cookie_id)
+        set_sub(cookie_id, json_value)
+        AppHarness.expect(lambda: element.text == json_value)
+
+        driver.refresh()
+        poll_for_token()
+        element = driver.find_element(By.ID, cookie_id)
+        AppHarness.expect(lambda: element.text == json_value)
+
+    json_dict = '{"access_token": "redacted", "refresh_token": "redacted", "created_at": 1234567890, "expires_in": 3600}'
+    _assert_json_cookie_with_refresh("c1", json_dict)
+
+    json_array = '["item1", "item2", "item3"]'
+    _assert_json_cookie_with_refresh("c2", json_array)
+
+    complex_json = '{"user": {"id": 123, "name": "test"}, "settings": {"theme": "dark", "notifications": true}, "data": [1, 2, 3]}'
+    _assert_json_cookie_with_refresh("c1", complex_json)
+
+    json_with_escapes = (
+        '{"message": "Hello \\"world\\"", "path": "/api/v1", "count": 42}'
+    )
+    _assert_json_cookie_with_refresh("c2", json_with_escapes)
+
+    empty_json_obj = "{}"
+    _assert_json_cookie_with_refresh("c1", empty_json_obj)
+
+    empty_json_array = "[]"
+    _assert_json_cookie_with_refresh("c2", empty_json_array)