React Native Trick: Get Cookies of WebView without using any native modules such as react-native-cookies. Might be helpful for getting JWT while making OAuth2 👽

React-Native-WebView-Cookies.js

// @flow

import React, { Component } from 'react';
import {
  WebView,
} from 'react-native';

class LoginScreen extends Component {
  state = {
    cookies    : {},
    webViewUrl : ''
  }

  onNavigationStateChange = (webViewState: { url: string }) => {
    const { url } = webViewState;

    // when WebView.onMessage called, there is not-http(s) url
    if(url.includes('http')) {
      this.setState({ webViewUrl: url })
    }
  }

  _checkNeededCookies = () => {
    const { cookies, webViewUrl } = this.state;

    if (webViewUrl === 'SUCCESS_URL') {
      if (cookies['cookie-name-for-jwt']) {
        alert(cookies['cookie-name-for-jwt']);
        // do your magic...
      }
    }
  }

  _onMessage = (event) => {
    const { data } = event.nativeEvent;
    const cookies  = data.split(';'); // `csrftoken=...; rur=...; mid=...; somethingelse=...`

    cookies.forEach((cookie) => {
      const c = cookie.trim().split('=');

      const new_cookies = this.state.cookies;
      new_cookies[c[0]] = c[1];

      this.setState({ cookies: new_cookies });
    });

    this._checkNeededCookies();
  }

  render() {
    const jsCode = "window.postMessage(document.cookie)"
    // let jsCode = "window.postMessage(document.cookie= 'login=; expires=Bla bla bla')"; // if you need to write some cookies, not sure if it goes to shared cookies, most probably no :)

    return (
      <WebView
        source={{ uri: 'AUTH_URL' }}
        onNavigationStateChange={this.onNavigationStateChange}
        onMessage={this._onMessage}
        injectedJavaScript={jsCode}
        style={{ flex: 1 }}
      />
    );
  }
}

export default LoginScreen;

The injection happens after page load. Maybe try programmatically changing the webview url. That worked for me.

Good trick! Thank you for sharing it.

Nice trick, but we can't read HttpsOnly cookies :(

Same is security if use postMessage...

where did you pass the cookies to the URL ?

const jsCode = 'window.ReactNativeWebView.postMessage(document.cookie)';

New webview version use this line.

encountered one same issue, it doesn't return complete cookies
the output is something like below:
["okta-oauth-nonce=wTMKiRCNxXPV8ooXPQ0pYLtlbvlzfV0SsjeH4s9NpquArJjzWu9ZbUl6es4deVyb", " okta-oauth-state=X5AKl6fUj3hGDFf3BsGsnzxyXyMhuuc73lsvzYZHy5s8viUbZ8fUjNIZVJsMMxhs", " ln=[email protected]"]