CODEWITHSUNDEEP
node.jsreactjssocketssocket.iopassport.js
Aditya Gaikwad
Aditya Gaikwad

Reputation: 35

Unable to access passport user in socket.io when using cors

I am creating a react app and I was adding functionality of registering users. Everything was successful but I am unable to access Passport User property in socket I used the same code given in socket.io example

const session = require("express-session");
const passport = require("passport");

io.use(wrap(session({ secret: "cats" })));
io.use(wrap(passport.initialize()));
io.use(wrap(passport.session()));

io.use((socket, next) => {
  if (socket.request.user) {
    next();
  } else {
    next(new Error("unauthorized"))
  }
});

This example works fine if domain is same but when I use CORS I am unable to access the passport property in session. my react app domain is localhost:3000 and socket server domain is localhost:5000

Upvotes: 1

Views: 448

Answers (1)

CRK
CRK

Reputation: 1354

Assuming that you are using same protocol and same domain but different ports it should still work fine if you setup your client and server with cors flags, e.g

// server-side
const io = new Server(httpServer, {
  cors: {
    origin: "https://example.com",
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

// client-side
import { io } from "socket.io-client";
const socket = io("https://api.example.com", {
  withCredentials: true,
  extraHeaders: {
    "my-custom-header": "abcd"
  }
});

The sample above was taken from socket.io docs: https://socket.io/docs/v4/handling-cors/

However, the above configuration will work only if client/server are sharing the same top level domain and same protocol. e.g. client: https://example.com, server: https://server.example.com

I spent some time to figure out myself why: client: http://127.0.0.1:3000 does not work with server: https://127.0.0.1:8000, notice the protocol difference.

With cors configurations in place, it works fine if I use http://127.0.0.1:8000 for server.

PS: If you need to use different top domains, be aware of SameSite policy that might be in place for your browser: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite This policy might restrict your cookies to be sent to server.

so... if different protocol or domains, you should make sure that you session cookie has SameSite flag set as 'none', via:

const session = require('express-session');
...
// Session setup
const sessionConfig = {
  secret: 'secret', // Session secret
  resave: false, //don't save session if unmodified
  saveUninitialized: false, // don't create session until something stored
  cookie: {
    sameSite: 'none',
    secure: true,
  }
}
const sessionMiddleware = session(sessionConfig);
app.use(sessionMiddleware);
...
io.use(wrap(sessionMiddleware));

both sameSite and secure properties are needed if you are playing with https:// protocol

Upvotes: 1

Related Questions