How to handle set-cookie headers with fetch() and React Native

7
votes

I have spring boot app with cookie-based authentication and session management. For the first request I receive cookie names and session hashes as values.

On the other side, I have React Native app wrapped with Expo. For the first request ever made I can get this 'set-cookie' header from fetch() request. Then, even after restarting the app, I can't get this header.

I debugged it with React Native Debugger and with this line of code:

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

I can see my XHR requests on network tab in debugger. After cleaning all the cookies, every time I'm receiving properly set-cookie header in request's preview. But I can't see it with fetch(...).then(response => response.headers).

Why? It's something persisting my cookie? How to handle cookie data and save it to AsyncStorage without plugins/libraries?

2
react-nativecookiesfetchexpo

2 Answers

4
votes

Solution:

If you have Network Inspect enabled in React Native Debugger, turn it off. Right click anywhere on the Redux area and press Disable Network Inspect.

enter image description here

Notes:

I know this is many years later, but I've found the culprit is React Native Debugger. If you have Network Inspect enabled, it strips the set-cookie header away, leaving you with an undefined.

Note that I am using Axios version 0.20.0 and have set withCredentials to true in my POST config, on React Native 0.63.3 with React Native Debugger 0.11.5. I know this is not fetch, but it's likely what's ailed you all those years ago. Your set-cookie disappeared the moment you started inspecting with RND.

The solution now is to disable Network Inspect, and you'll get your set-cookie again.

There is a bug opened in React Native Debugger in 2019, and the author has mentioned this is a limitation that is not easily overcome.

Read more here if you're interested:

https://github.com/jhen0409/react-native-debugger/issues/340#issuecomment-514395195

1
votes

See here

Sending Credentials with a Fetch Request

Should you want to make a fetch request with credentials such as cookies, you should set the credentials of the request to "include".

fetch(url, {
  credentials: 'include'
})