CODEWITHSUNDEEP
javascriptreactjscookiesreact-native
Lion789
Lion789

Reputation: 4482

How to set cookie in React Native with Expo?

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

Upvotes: 12

Views: 31441

Answers (2)

Gavin Thomas
Gavin Thomas

Reputation: 1867

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;
    });
};

Upvotes: 3

Anton K
Anton K

Reputation: 102

You can use cookies or just store a token in a localStorage for the web app.

But for the React Native app usage of AsyncStorage would be the better solution.

About AsyncStorage:

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.

Also, AsyncStorage has quite simple API:

const TOKEN = "TOKEN";

// save token
AsyncStorage.setItem(TOKEN, token);

// get token
AsyncStorage.getItem(TOKEN).then(token => {
  // token value could be used
});

If you are bothering about AsyncStorage security you can find more information by the link.

Upvotes: 1

Related Questions