Search code examples
react-nativereact-native-iosreact-native-webviewreact-native-cookies

How can I get cookies from react native webView on iOS?


I have a Single-Sign-On site opened in a webView. After the user logs in I need to take a cookie to request a token from the API and use it in the application for all the other requests. This all works fine on the Android, but one the iOS there are no cookies when I do a request for the token. WebView is configured to use shared cookie storage:

    <WebView
        source={{ uri: loginUrl }}
        onMessage={handleSsoLogin}
        injectedJavaScriptBeforeContentLoaded={JS_INTERFACE}
        sharedCookiesEnabled={true}
      />

And if I inspect webView with devTools I can see the cookies. Also, if I visit SSO site again, I'm already logged it. So, cookies are persisted and used by webView. They are just not used by fetch and CookieManager doesn't access them:

const cookies = await CookieManager.get(url);
console.log({ cookies });
...
{"cookies": {}}

So, the question is, how can I get these cookies from the webView?


Solution

  • You need to use import CookieManager from "@react-native-community/cookies";

    and in webview, you can do like this :

     <WebView
              cacheEnabled={false}
              ref={ref => (this.webView = ref)}
              source={{
                uri: "http://yoururl.com"
              }}
              style={{ marginTop: 20 }}
              onNavigationStateChange={this.navChange}
              thirdPartyCookiesEnabled={true}
            />
            {this.state.loading && (
              <ActivityIndicator
                color={"blue"}
                style={{ flex: 20 }}
                size={"large"}
              />
              
              
    navChange = e => {
        console.log("e", e);
        this.setState({ loading: e.loading });
        if (e.url == "http://yoururl.com/landing") {
          CookieManager.getAll(true).then(res => {
            console.log("CookieManager.getAll =>", res);
            if (!!res) {
              console.log({res})
              CookieManager.clearAll(true).then(res => {
                console.log("LoginScreen CookieManager.clearAll =>", res);
              });
            }
          });
        }
      };