My cookie isn't getting sent down on initial connection

[Jake-Prentice]

I realise this has been asked a ton before, but I've read through all of them and I haven't found a solution yet. Im using session authorization (express-session) and with all my other requests I've checked and they all have the correct cookie in the headers (req.headers).

but when checking the headers of the socket io connection, there are no cookies in the header, so I'm not able to do the authorization. I don't really want to use JWTs because I believe I would have to store the data in localstorage which is kinda unsecure (I'm no expert), I could use refresh tokens as well, but I want to just use sessions for their simplicity. Here is the code:

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";
import {handleError, ErrorHandler} from "./helpers/error"
import mongoose from "mongoose";
import config from "./config"
import http from "http";
import {Server, Socket} from "socket.io";
import routes from "./routes";
import session from "express-session";
import Message from "./models/Message";

// express session not allowing to alter req.session object, just why?
declare module 'express-session' {
    interface SessionData {
      userId: mongoose.Types.ObjectId;
    }
}

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
    cors: {
        origin: config.CLIENT_URL,
        credentials: true
    }
});

//middleware
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true}))
app.use(cors({ origin: config.CLIENT_URL, credentials: true}));

const sessionMiddleware = session({
    secret: config.SESSION_SECRET!,
    saveUninitialized: true,                          <== not implemented Redis yet
    resave: true
})

app.use(sessionMiddleware);
io.use((socket, next) => {
    sessionMiddleware(
        socket.request as express.Request, 
        {} as express.Response, 
        next as express.NextFunction 
    );
})

//loaders
import "./loaders/mongoose" //start mongoose connection

mongoose.connection.on("connected", () => {
    console.log("connected to mongodb");
})

mongoose.connection.on("error", () => {
    console.log("error when connecting to mongodb")
})

// socket.io

io.on("connection", (socket: any) => {
    console.log("User connected")
    console.log(socket.handshake.headers)
    // console.log(socket.handshake.query)
})


//routes
app.use("/api", routes);

app.get("/api/test", async (req,res, next) => {
    console.log(req.headers)
    res.send();
})

server.listen(config.PORT, () => {
    console.log(`listening on port ${config.PORT}`)
})

//catch 404
app.use((req,res,next) => {
    const err = new ErrorHandler(404, "Not found!");
    next(err);
})

//error handlers
app.use((
    err: ErrorHandler, 
    req: any, 
    res: express.Response, 
    next: any
) => {
    handleError(err, res);
})

and here is what the headers of the socket.handshake.headers looks like:

and some of the client code:

import React, { useEffect } from 'react';
import DrawCanvas from "./DrawCanvas";
import io from "socket.io-client";
import axios from "axiosBase";

function App() {

  useEffect(() => {
    let newSocket:SocketIOClient.Socket;
    (async () => {
      //example test
      await axios.post("/users/login", {
        username: "jake",
        password: "123",
        email: "[email protected]"
      })
      await axios.get("/test", {withCredentials: true}) //this recieves the cookies fine!
      console.log("logged in")

      newSocket = io(
        "http://localhost:5000", 
        { query: {id: 123}, transportOptions: {
          withCredentials: true //doesn't show this in documentation of v4 but I found it somehow??
        }}
      )

  
    })()
   
    return () => {newSocket.close()}
  
  }, [])

  return (
    <DrawCanvas />
  );
}