带有 Expo 的 React Native Mobile 应用程序中的 Cookies 问题

Question

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.

Answer 1

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
  `;