Automatic cookies

[cloud8421]

Please feel free to correct me.

I've tried to use the fetch api to login against a service which sets a cookie in case of success.

The session cookie gets correctly set and subsequent requests to the same service pass authentication without me configuring anything at the code level, which makes me assume that cookies are automatically managed by the JavascriptCore runtime.

I can't find a way to manipulate them though, is that by design?

As a side note, does this mean that I'm just better off using a different authentication flow?

Thanks for your work on this!

[nicklockwood]

They're automatically managed by the Objective-C network stack, which is used internally by fetch. We haven't exposed any explicit support for them though. This would need to be implemented as a native "RCTCookieJar" module.

[cloud8421]

Thanks for the clarification, I'll keep it in mind.

[bakso]

How to get the cookie in client?

[joeferraro]

@iostalk I've created a basic cookie manager that allows you to get/set cookies from react native: https://github.com/joeferraro/react-native-cookies

[brentvatne]

Awesome @joeferraro

[dev-rkoshlyak]

thank you @joeferraro

[xavibonell]

@joeferraro I'm trying to use your cookie manager, everything is in place, I require it successfully, but when I try to call any method on the object CookieManager it throws this error: Error: Cannot read property 'getAll' of undefined

This is my code:
var React = require('react-native');
var CookieManager = require('react-native-cookies');
console.log(CookieManager);
CookieManager.getAll((err, res) => { console.log('cookies!'); console.log(err); console.log(res); });
Is weird cause CookieManager is defined, since it gets logged properly in the console, with all its methods.
Any idea where I went wrong?

[nicklockwood]

@xavibonell did you include the native RNCookieManagerIOS.h/m files in your Xcode project? It's not sufficient just to require the js.

[nicklockwood]

@joeferraro this is likely to be a common source of confusion. It might be a good idea to include an invariant inside your index.js to the effect of:

var invariant = require('invariant');
invariant(
   NativeModules.RNCookieManagerIOS,
   'Add RNCookieManagerIOS.h and RNCookieManagerIOS.m to your Xcode project.'
);

[eyaleizenberg]

@joeferraro I am faced with the same issue as @xavibonell
Any clue anyone?

[ryanmcdermott]

For anyone curious about React Native cookie handling I made an example project that shows how to use cookie authentication. It makes use of the library from @joeferraro https://github.com/ryanmcdermott/react-native-login

[brentvatne]

Thanks for sharing, @ryanmcdermott! Added it to the newsletter for this week

[ryanmcdermott]

@brentvatne Thank you I appreciate it!

[vince-rowe]

hi there,

I just wanted to check if my best case is to use https://github.com/joeferraro/react-native-cookies or if there is another way to simply clear / override the Cookie header in Fetch.

I'm using Fetch like this:

fetch(ENDPOINT, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Cookie': user.session_name + '=' + user.sessid,
}
})

Which only works after the first visit, the first one seems to send double Cookie's because fetch has grabbed one from an initial login request and saved it. When it does the request it sends two sets of cookies which confuses the endpoint server and doesn't accept the connection. But after that because the automatic cookie is no longer there it then works. So basically I think if I can just either clear the automatic cookie before I run this call, or make sure in my call where I set cookie above that it is the ONLY one being set.

Do you think installing https://github.com/joeferraro/react-native-cookies and running clear cookies before this call will be my best bet?

Hope this makes sense.

Vince

[kristojorg]

I am wondering the same thing as @vince-rowe. I don't use cookies, but fetch is using them in the background and I would just like to delete or override them in fetch without installing a third party library.

[ms88privat]

I also want to find an easy solution to disable cookies at all.

[hbd]

@ms88privat @kristojorg by default, fetch() does not send cookies.

If you're still having issues, you may want to try

fetch( ... {
...
credentials: 'omit'
})

[ms88privat]

@hbd I don't need it anymore, but I beleave, it wasn't the case. I also tried the credential property and so on. Like they said, it is managed by objective-c and not the fetch API

[chengmu]

two sets of cookie troubles me... wish a solution.

[haiyangjiajian]

@ms88privat Have you found the solution to disable cookies. I have the same problem."credentials: 'omit'" dosen't work

[davidck]

Same issue. An external API in which I have no control is throwing 403s when a cookie is detected. Seems like there is a double-cookie issue as overriding the API's PHPSESSID did not help. The same override worked when using Postman.

[Ashoat]

I am also trying to handle cookies entirely within Javascript and seeing the same Android issue where the cookies are set regardless of credentials: 'omit' being passed to fetch. I opened #12956 to track the issue; heads-up @davidck, @haiyangjiajian, @ms88privat, @kristojorg, @vince-rowe. At this time, looks like the problem is only occurring on Android.

[asinel]

Also have this problem, credentials: 'omit' doesn't work

[jaredramirez]

@vince-rowe Here's how I removed cookies from my requests:

After authenticating my user, I took the cookie off of the response header. Then I save the cookie to AsyncStorage. Next, I use react-native-cookies (https://www.npmjs.com/package/react-native-cookies) to clear all of the cookies saved on the native side. Then, on any request that needs the cookie, I take it from AsyncStorage and add it to the header to my request using axios (https://www.npmjs.com/package/axios).

import CookieManager from 'react-native-cookies';
import axios from 'axios';

...

// make call to server to authenticate
const response = await axios({
    method: 'post;,
    data: {username: ..., password: ...},
})

// Pull cookie off response
const cookieToSave = response.headers['set-cookie'][0];

// Save cookieToSave to AsyncStorag

// Clear cookies automatically saved on native side
await CookieManager.clearAll();

// Pull cookie from AsyncStorage
const authenticationCookie = ...;

// Then later, make a request and add the header
const authenticatedResponse = await axios({
    ...,
    headers: {Cookie: authenticationCookie},
});