React Production and Cookie Problems

Question

I developed a react app and a express API. Everything were working correctly in localhost.

I moved my API to digitalocean droplet which is only IP address and it's HTTP.

When I use API from react app in development environment, it's working. It's getting cookies from API, sending them to API for authorization...

But, after I run npm run build on my react app for production and serve it on my local computer, It's stopped to send cookies to API and API stopped send cookies to react app anymore.

I set my API's IP as base url and credential true in index.js / react app

axios.defaults.baseURL = "http://xxx.xxx.xxx.xxx"
axios.defaults.withCredentials = true

API cors settings in API

app.use(cors({origin: true, credentials: true}))

Axios login request (no cookies shows up after succesfull login)

await axios.post('/api/main/login', {form: form}).then(async resp => {

        if(resp.data == 'VALIDERR' || resp.data == 'CHECKERR') {

          setErrs({...errs, serverErrs: [resp.data]})
          setLoading(false)

        } else {

          setLoading(false)
          checkLogin()
          window.location.href = "/admin"

        }
   })

API's res.cookie for login request

res.cookie('auth', {token: token, name: user.name}).send('OK')

I hope someone have an idea what's going wrong after building react app. Thanks for your help

Answer 1

I had faced a similar issue a few months ago. Here's how I solved it.

After running npm build and serving the production build locally, you must have noticed that It stops accepting cookies.

While building my app, I also had this exact issue on local. As I was working on a hobby project I decided to deploy my express-API-server to Heroku and my react-redux client on Netlify to check. (Note: Never push to production without adequate testing.)

Using the "edit this cookie" extension (can be also viewed using browser dev tools ), I found my cookies created at the API server domain, also the API server doesn't send over the cookies to my client. After a lot of research, I didn't get a concrete solution to why this issue persists.

Generally, I saw use credentials: true which seems to solve the issue in most cases (Where I saw no information regarding deployment/production enviornments) but It didn't seem to work for me however, I got some insights.

I decided to use a different approach to solve this. (JWTs)

My insights,

1. Check your domain and sameSite cookie options, if you're accessing from a client at another domain. (Here, I'm assuming you want to deploy your client somewhere else)

• You have to set sameSite:false for setting cookies at another domain.

2. If you're making a SPA, why not bundle the client together with the express server? So this solves the CORS and cookie domain issues.

    const express = require('express');
    const path = require('path');
    const app = express();
   
    app.use(express.static(path.join(__dirname, 'build')));
   
    app.get('/', function (req, res) {
      res.sendFile(path.join(__dirname, 'build', 'index.html'));
    });
   
    app.listen(9000);
   

3. Use Token-based sessions (JWT)

• Agreed not ideal in every situation, but it helps for most scenarios.

I have built a few MERN-based apps, most deployed. Refer those to see how JWT is implemented in MERN.

• https://github.com/JaganKaartik/Shrynk.js
• https://github.com/JaganKaartik/Foodle

4. https://stackoverflow.com/a/53566745/12408623

References

1. https://create-react-app.dev/docs/deployment/
2. https://stackoverflow.com/a/53566745/12408623