How to set cookie in React Native with Expo?

Question

I am having a hard time getting cookies to work, on the server side I use them to verify the user by grabbing them from req.cookies.

Here is how I currently set it on the Login.js file in React Native:

import Cookies from "universal-cookie";

const cookies = new Cookies();
 cookies.set("token", token, {
                expires: 7, // 7 days
                path: "/"
                //,secure: true // If served over HTTPS
   });

This works fine when I call a cookies.get("token") on this page. However, when I import, setup the const, and call get on another page the token does not show up...

Also, when I make the fetch like this:

fetch("http://192.168.0.115:3000/myTransactions/", {
      credentials: "same-origin",
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })

The server does not receive any cookies. I even changed credentials to say include.

I am using expo and my terminal on Windows to run it without having to use android studio or xcode. I am not sure if that is a possible issue.

Any thoughts!

Thanks

Answer 1

react-native-keychain is safer than cookies!

Second, have you tried AsyncStorage? This is React Native built in "localStorage" in essence. I think it's what you're looking for.

// to set
AsyncStorage.setItem('@app:session', token);

// to get
AsyncStorage.getItem('@app:session').then(token => {
  // use token
});

If your setup looks like this, where you simply are sending the token value through as headers, you can store this information in whatever format is safest/most convenient.

In this example, auth could be either of these options fetched.

localStorage.set('token', 38573875ihdkhai)
createCookie('ppkcookie' 7asdfasdf);

export const userFetchRequest = () => (dispatch, getState) => {
  let {auth} = getState();
  return superagent.get(`${__API_URL__}/user/me`)
    .set('Authorization', `Bearer ${auth}`)
    .then(res => {
      dispatch(userSet(res.body));
      return res;
    });
};