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;

After the authentication your _onMessage function is called?
Mine it seems it's only called the first time the WebView renders with the first "uri" (which is the login "view") but right after I login I no longer get more events.
Maybe it's because the injectedJavaScript code is no longer present.

Which version of RN are you using?

_checkNeededCookies function is not getting called and so it's not working in this code. I am not able to extract cookies from the website. what should I do?

injectedJavaScript is working

Not working. _onMessage is never called. Anyone got it working? please reply.

@yasserzubair sometimes a short delay is needed, setTimeout(() => window.postMessage(document.cookie), 0) works every time

It's won't work if HttpOnly flag for cookie been provided

const jsCode = 'window.ReactNativeWebView.postMessage(document.cookie)';
This will work everytime.

@Rohitsaxena THANK YOU SO MUCH.
I tought my app was over, but you saved me, you solution worked

Btw thx @xxxxlr, without your gist nothing would've come

Hey, small issue I encountered, why the code returns only ~30% of the actual cookies?

encountered the 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]"]

It's won't work if HttpOnly flag for cookie been provided

+1