OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Trouble Setting and Storing Cookies in Browser with React App Deployed on GitHub Pages and Node.js Backend on Render

  • Thread starter Thread starter Domenico Rotolo
  • Start date Start date
D

Domenico Rotolo

Guest
I'm currently facing an issue with setting and storing cookies in the browser while using a React app deployed on GitHub Pages and a Node.js backend hosted on Render. Here's the setup and the problem I'm encountering:

Setup:

  • Frontend: React app deployed on GitHub Pages
  • Backend: Node.js server hosted on Render.
  • Problem: If I use secure:false, cookies set by the backend are received by the browser on GitHub Pages, but they are not actually being set. If I use secure:true, the cookies do not arrive at all on the client.

Backend:

Code:
const express = require('express');
const mongoose = require("mongoose");
const session = require('express-session');
const bodyParser = require('body-parser');
const cors = require('cors');
const http = require('http');
const {passport} = require('./utils/auth');
const userRoutes = require('./router/users');
const roomRoutes = require('./router/rooms');
const socketEvents = require("./utils/socket");

const testHost = 'http://localhost:3000';
const prodHost = 'https://[GITHUB_PAGE]';

const isProd = process.env.NODE_ENV === 'production';

const host = isProd ? prodHost : testHost;

const app = express();
const server = http.createServer(app);
const io = require("socket.io")(server, {
    cors: {
        origin: host,
        methods: ["GET", "POST"]
    }
});
const port = process.env.PORT || 1234;
const mongoURI = '[MONGO_URL]';

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cors({
    origin: host,
    credentials: true
}));
app.use(session({
    secret: '[SECRET]',
    resave: false,
    saveUninitialized: false,
    cookie: {
        httpOnly: true,
        secure: isProd,
        sameSite: isProd ? 'None' : 'Lax',
        domain: isProd ? '.onrender.com': "localhost",
        path: '/',
        maxAge: 1000 * 60 * 60 * 24 * 7
    }
}));
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/users", userRoutes);
app.use("/api/rooms", roomRoutes);

socketEvents(io);

mongoose.connect(mongoURI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Database connected");
    server.listen(port, () => {
        console.log(`Server is running on port ${port}`);
    });
})
    .catch((err) => {
        console.log(err);
    });

Frontend request:

Code:
import axios from 'axios';

const prodHost = 'https://[RENDER_SITE].onrender.com';
const testHost = 'http://localhost:1234';

const host = process.env.REACT_APP_ENV === 'production' ? prodHost : testHost;

const API = axios.create({
    baseURL: host,
    withCredentials: true
});

Both github and Render are using https, so I am not sure why I am not receiving the cookies

<p>I'm currently facing an issue with setting and storing cookies in the browser while using a React app deployed on GitHub Pages and a Node.js backend hosted on Render. Here's the setup and the problem I'm encountering:</p>
<p>Setup:</p>
<ul>
<li>Frontend: React app deployed on GitHub Pages</li>
<li>Backend: Node.js server hosted on Render.</li>
<li>Problem: If I use secure:false, cookies set by the backend are received by the browser on GitHub Pages, but they are not actually being set. If I use secure:true, the cookies do not arrive at all on the client.</li>
</ul>
<p>Backend:</p>
<pre><code>const express = require('express');
const mongoose = require("mongoose");
const session = require('express-session');
const bodyParser = require('body-parser');
const cors = require('cors');
const http = require('http');
const {passport} = require('./utils/auth');
const userRoutes = require('./router/users');
const roomRoutes = require('./router/rooms');
const socketEvents = require("./utils/socket");

const testHost = 'http://localhost:3000';
const prodHost = 'https://[GITHUB_PAGE]';

const isProd = process.env.NODE_ENV === 'production';

const host = isProd ? prodHost : testHost;

const app = express();
const server = http.createServer(app);
const io = require("socket.io")(server, {
cors: {
origin: host,
methods: ["GET", "POST"]
}
});
const port = process.env.PORT || 1234;
const mongoURI = '[MONGO_URL]';

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cors({
origin: host,
credentials: true
}));
app.use(session({
secret: '[SECRET]',
resave: false,
saveUninitialized: false,
cookie: {
httpOnly: true,
secure: isProd,
sameSite: isProd ? 'None' : 'Lax',
domain: isProd ? '.onrender.com': "localhost",
path: '/',
maxAge: 1000 * 60 * 60 * 24 * 7
}
}));
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/users", userRoutes);
app.use("/api/rooms", roomRoutes);

socketEvents(io);

mongoose.connect(mongoURI, {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => {
console.log("Database connected");
server.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
})
.catch((err) => {
console.log(err);
});
</code></pre>
<p>Frontend request:</p>
<pre><code>import axios from 'axios';

const prodHost = 'https://[RENDER_SITE].onrender.com';
const testHost = 'http://localhost:1234';

const host = process.env.REACT_APP_ENV === 'production' ? prodHost : testHost;

const API = axios.create({
baseURL: host,
withCredentials: true
});
</code></pre>
<p>Both github and Render are using https, so I am not sure why I am not receiving the cookies</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top