Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save xxxxlr/475bd734fe49d776370633461164c361 to your computer and use it in GitHub Desktop.
Save xxxxlr/475bd734fe49d776370633461164c361 to your computer and use it in GitHub Desktop.
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 👽
// @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;
@yasserzubair
Copy link

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

@AdnanCukur
Copy link

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

@uladzimir-masla-itechart

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

@Rohitsaxena
Copy link

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

@charleswvs
Copy link

@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

@IdoLevi235
Copy link

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

@anujsachan1990
Copy link

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

@cgfeel
Copy link

cgfeel commented May 6, 2021

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

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment