iOS cookies: Regardless of 'sharedCookiesEnabled' value, NS/WK cookies (unreliably) synced

Bug description: Syncing of cookies on iOS between ‘React Native side’ (NSHTTPCookieStorage) and WKWebView seems not to follow the documented sharedCookiesEnabled behavior on a real device. I’m observing some type of delayed ‘auto-sync’ between the two sides and sharedCookiesEnabled prop value doesn’t really have any effect. I’m seeing the ‘auto-updating’ happening only on a real device, not on simulator, and there seems to be some unpredictability in the behavior.

I initially observed the behavior with an app having cookies set both by Fetch requests responses and by a website inside react-native-webview WKWebKit. To make a self-contained demo, I put together a simple demo using just react-native-cookies and local react-native-webview. When you set a cookie either for ‘React Native side’ (NSHTTPCookieStorage) or WKWebView side, the other side often (but not always) updates with delay. Whether sharedCookiesEnabled is true or false doesn’t seem to have an effect on this.

Screenshots/Videos:

Screen recordings

Setting NS cookie with ‘sharedCookiesEnabled’ being either undefined or true: WK sometimes updating with a delay:

Setting WK cookie: The same happening with NS cookie

To Reproduce: Repository: https://github.com/sampok/cookiesync

See App.js in the project:

import React, {useState, useCallback} from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import WebView from 'react-native-webview';
import CookieManager from '@react-native-community/cookies';

const url = 'https://test.com';
const name = 'test';

const App = () => {
  const [nsCookieValues, setNsCookieValues] = useState([]);
  const [wkCookieValues, setWkCookieValues] = useState([]);

  const clearCookie = useCallback(async (useWebKit) => {
    setNsCookieValues([]);
    setWkCookieValues([]);
    CookieManager.clearByName(url, name, useWebKit);
  }, []);

  const setCookie = useCallback(async (useWebKit) => {
    CookieManager.set(
      url,
      {name, value: 'set', expires: '2030-01-01T12:00:00.00Z'},
      useWebKit,
    );
    let i = 0;
    while (i++ < 30) {
      CookieManager.get(url).then((cookies) =>
        setNsCookieValues((prev) => [...prev, cookies[name]?.value]),
      );
      CookieManager.get(url, true).then((cookies) =>
        setWkCookieValues((prev) => [...prev, cookies[name]?.value]),
      );
      await new Promise((resolve) => setTimeout(resolve, 300));
    }
  }, []);

  return (
    <View>
      <View style={styles.container}>
        <WebView
          originWhitelist={['*']}
          source={{html: '<p style="background: #eee; height: 100%;">Page</p>'}}
          // sharedCookiesEnabled={true} // 'syncs' cookies with or without this
        />
      </View>

      <View style={styles.horizontal}>
        <View style={styles.half}>
          <Button title="Clear NS Cookie" onPress={() => clearCookie(false)} />
        </View>
        <View style={styles.half}>
          <Button title="Clear WK Cookie" onPress={() => clearCookie(true)} />
        </View>
      </View>

      <View style={styles.horizontal}>
        <View style={styles.half}>
          <Button title="Set NS Cookie" onPress={() => setCookie(false)} />
        </View>
        <View style={styles.half}>
          <Button title="Set WK Cookie" onPress={() => setCookie(true)} />
        </View>
      </View>

      <View style={styles.horizontal}>
        <View style={styles.half}>
          {nsCookieValues.map((value, i) => (
            <Text key={i}>{value ?? '-'}</Text>
          ))}
        </View>

        <View style={styles.half}>
          {wkCookieValues.map((value, i) => (
            <Text key={i}>{value ?? '-'}</Text>
          ))}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {height: 200, backgroundColor: '#eeeeee'},
  horizontal: {flexDirection: 'row'},
  half: {width: '50%', alignItems: 'center'},
});

export default App;

Expected behavior: Cookie behavior should be reliable, and it should be possible to configure the cookie to be shared (or not shared) using the sharedCookiesEnabled prop.

Environment:

• iOS SDKs 14.2 and 13.7 tested, on iOS 14.2 and 13.7 iPhones
• react-native version: 0.63.4
• react-native-webview version: 11.0.2
• react-native-cookies version: 5.0.1

[srmagura]

This issue should be reopened. Seems to happen on both Android and iOS.

Possibly relevant: Android has CookieManager.flush() method which writes cookies to persistent storage.

[Kamill90]

Any news on this? Ios cookies are still not synced.