How Can I Use Cookies Without Eject?

Expo SDK
1

Hi there, is there a way of using cookies ( react-native-cookies ) etc… without eject ? because our code is in jsbundle format and is only a part of an existing native project, moreover, we do not have native code by side. thanks !

Obviously, the existing native part can offer a cookie bridge to manage that kind of native functionality, but due to separate working environment, plus we do not want to eject, it is hard to find a way of doing that, expo seems not providing that component for a reason ?

: we are using cookies only because of sharing login status while sending requests

we do not want to eject : )

1 Like
2

I don’t think we offer access to shared cookies right now without ejecting. You might be able to use the WebBrowser module (which uses the device browser, with shared cookies) to capture a login access token and send that back to your app’s JS. Would that work for you?

3

Thanks for the reply, I’ll try it out, moreover, I was trying to manually write Cookie into the header of fetch request (only for local dev purpose), it works with iOS ( with a expo user agent ), but seems to be overwritten by the okhttp user agent in Android (5.0+ testing device), is it suppose to be like that ?

Cheers

1152×246 109 KB

4

I don’t think we overwrite the Cookie or User-Agent on Android, probably something that raw React Native does. Maybe see if there’s an issue there?

5

Hi everyone!

Thank you guys @ben @jesse for delivering the great product for us!

I had the same problem that I don’t want to eject but I need to get JWT from Cookies while I am making OAuth2 through the WebView component. And this gist is what I came up with. I am not sure if it is going to work in your use case because it is kind of tricky solution I believe but you might want to play around with it :slight_smile:

Peace :raised_hands:

2 Likes
6

This might be a bit of a stretch but the way we ended up doing it was by sending out the cookie to store as field in the response for the authentication request. Then we used AsyncStorage to store the cookie and manually set it in the header for every subsequent request. (Basically becomes token based authentication) Ended up working out for us for the time being until there’s persistent cookie support.

Note: This might not work if your cookies get updated in other requests

7

Hey @zuhayeer how did you include it in the header, trying to figure out what they code should looklike, since I came under the same conclusion of just using AsyncStorage to store the cookie token then pass it back in the header as a “cookie”

8

I had a function to get the headers before making the fetch request where I’d retrieve the key from local storage. If the key exists, I add it to the headers cookie field

function getHeaders() {
  return getUserSessionKey()
  .then(key => new Promise((resv) => {
    const headers = {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Cache: 'no-cache',
    };
    if (key) {
      headers.cookie = `${APP_NAME}=${key}`;
    }
    resv(headers);
  }));
}

And then for the fetch request, I get the headers and do something like this (truncated)

getHeaders().then(headers =>
  fetch(`${URL}/endpoint`, {
    method: 'POST',
    credentials: 'include',
    headers,
    body: JSON.stringify({
      query,
      variables,
    }),
  }).then(response => response.json())
  .then((responseData) => {
1 Like
9

Not sure if this help, but I recently found a way to manipulate the cookies without ejecting.
But the implementation is quite hacky:

  1. Create a WebView
  2. Inject javascript to change document.cookie
  3. Send message to notify that manipulation was done

The sample code for clearing cookie:

<WebView
    source={{ uri: "Your source" }}
    onMessage={(e) => {
        // Complete handler
    }}
    injectedJavaScript={`
        document.cookie
             .split(";")
             .forEach(function(c) {
                 document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";domain=your domain");
             });
             
             window.postMessage();
    `}
/>
4 Likes
10

You can use

var RCTNetworking = require(“RCTNetworking”);

to manipulate cookies.
I used this to clear cookies without ejecting.

2 Likes
11

that is how you can clear them not to use them

12

@manojmohan
var RCTNetworking = require(“RCTNetworking”) is not supporting in expo sdk 36. Help plz, can’t clear cookies/cache

13

You can import RCTNetworking with:

import RCTNetworking from 'react-native/Libraries/Network/RCTNetworking';

But it isn’t working properly, at least in iOS. My best guess by now is that RCTNetworking.clearCookies is trying to remove cookies using NSHTTPCookieStorage instead of WKHTTPCookieStore that it seems to be used by WKWebView.

1 Like