I'm creating this Native Mobile app that basically is hosting a Web App in Webviews, my task is to build the login page in Native as the clients wants to use biometric logins. The thing is I was able to create the login page setup routings and make the requests to login endpoint. The thing is that login request returns authentication as a cookie.
async function login(event) {
const response = await fetch(`https://xxxxx.xxxx.xx.xxx/api/v1/login.json`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: userName,
password: password,
remember_device: true,
workgroup_code: 'XXXX',
accessor_id: null,
origin: 'xxx'
})
});
if (response.ok) {
const data = await response.json();
// console.log(JSON.stringify(data));
authObj = data;
if (authObj.restrictions.find(x => x === 'verify_device')) {
navigation.navigate('Device');
}
} else {
alert(`Bad username or password.
Need help logging in?
Call X-XXX-XXX-XXXX`);
}
}
As you can see, sometimes I need to send the successful login to a verification screen that loads the Web App in a webview:
<WebView
javaScriptEnabled={true}
style={styles.container}
source={{ uri: 'https://xxxx-staging.xxx.com/#/login/restriction/verify_device' }}
sharedCookiesEnabled={true}
injectedJavaScriptBeforeContentLoaded={runFirst}
injectedJavaScript={runLast}
onMessage={(event) => {
console.log('event: ', event);
}}
/>
runFirst set some values in localstorage that works fine:
const runFirst = `
window.localStorage.setItem('workgroup_code', ${authObj.workgroup_code});
window.localStorage.setItem('accessor_id', ${authObj.mpv_device_id});
true; // note: this is required, or you'll sometimes get silent failures
`;
and runLast is just some example code of my tests:
const runLast = `
alert('Me');
alert(window.document.cookies);
true;
`;
The thing is for this page in the Webview to work correctly it needs to have a set of cookies like this:
_xxx_web_session_staging that comes in the login request above, How can I pass the request cookies to the Webview page??
So you Know I tried CookieManager but I couldn't find a way to make it work inside my Expo app and neither understand how to pass the values to the WebView.
Also as you can see I'm using sharedCookiesEnabled={true} I don't know if I'm missing something.
I would really appreciate any help or advice on this.
I solved this issue parsing myself the response from the fetch request:
loginCookie = JSON.stringify(response.headers.map['set-cookie']);
and then setting the cookie value manually:
const runFirst = `
window.document.cookie = ${loginCookie};
true; // note: this is required, or you'll sometimes get silent failures
`;