I m working a Mobile app using React Native at the front end, NodeJs at the back end. I put an authentication mechanism for this app. Back-end works fine. I've tested with the postman. After login request with correct data, the server sends me a cookie in "Set-cookie" header. Then I put my next request header as "cookie" and I got my data. However, it works differently when I m working with React Native part. I m using Chrome browser to test app for now, and I can see that browser gets a set-cookie header with the response from Login request, (plus I've seen server created a new cookie with user info in it). But for the next request (say its "/home"), it doesn't send the cookie back, so the server doesn't recognize the user and creates a new cookie (with no user info in it) and returns 403 response.
There are some solutions that people suggest that you should do. I m sharing those here but none of them worked for me.
- put with withCredentials: true in your request or axios object (didnt solve the problem)
- set httpOnly:false for cookie in server (didnt solve the problem)
- set corsOptions as var corsOptions = { origin: '*',credentials: true,exposedHeaders: ["Set-Cookie"]}; (still not working)
- I also use universal-cookie library to reach cookie data from front end, but it also cannot reach the cookie value
- Using 127.0.0.1 instead of "localhost" in url also doesnt work (some says cookies dont work in first level domains)
Here is my React Native - Axios code
const axiosObj = axios.create({
baseURL:"http://localhost:3000/",
headers: {
'Content-Type': 'application/json',
},
responseType: 'json',
withCredentials: true,
});
export function get(url){
return new Promise(function(resolve,reject){
axiosObj.get(url).then(res => {
console.log(res)
return res.data
})
})
};
export function post(url,data){
return new Promise(function(resolve,reject){
axiosObj.post(url,data).then(res => {
console.log(res.headers)
const cookies = new Cookies(res.headers.cookie);
console.log("document cookie",document.cookie)
console.log(cookies.getAll());
resolve(res)
})
})
}
At the back end here are the related codes
var app = express();
app.use(cookieParser('keyboard cat'));
var corsOptions = {
origin: '*',
credentials: true,
exposedHeaders: ["Set-Cookie"]
};
app.use(cors(corsOptions))
app.use(logger('dev'));
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
//session settings
app.use(session({
genid: (req) => {
console.log('Inside the session middleware')
console.log(req.sessionID)
return uuidv4(); // use UUIDs for session IDs
},
store: new FileStore(),
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { httpOnly: false,
expires: new Date(Date.now() + (30 * 86400 * 1000))}
}))
This is my session file at the server after Login
{"cookie":{"originalMaxAge":2591995208,"expires":"2020-09-22T20:22:56.993Z","httpOnly":false,"path":"/"},"passport":{"user":{"_id":"5f307fc99f5c667918a56122","username":"test","__v":0}},"__lastAccess":1598214181785}
What can be the problem here? Any ideas?
edit : I've learned that not reaching "Set-cookie" is normal from front-end (JS). (although in some websites, its said that you can put httpOnly: false in cookie settings and it solves this problem). So it actually doesn't matter if I don't reach the header inside the front end code. I got "set-cookie" header in my response header and chrome doesn't recognize the cookie and put it in cookies section in f12 (also doesn't set it in req.header). That's the problem here
Edit 2: I have some ideas about my problem.
Since I m working with React Native and its not supposed to work in the Chrome browser, it might somehow cause that the browser is not setting cookies. I will create a react project and try to reach the cookie from there. => I solved the problem it was not related to that issue. Although I solved problem when I was testing with react an app
I got a "service-worker.js" error with my react-native code. It doesn't look like it affects the functionality of the code but it might be somehow affected this cookie situation => After solving the problem I still got this error, so it was not related to this.
I also tried a react native app for cookies (react-native-cookie) but it has codes only working with android or ios so it didn't work for the browser.