Mimic auth option in 2.x client to do authenticate in server

[qiulang]

The auth option was added to socket.io-client 3+ but my customers still use socket.io-client 2.x (mainly to support IE 11)

My server uses socket.io 4.2 and uses middleware to authenticate as here suggests https://socket.io/docs/v4/middlewares/#sending-credentials, but the problem is that the 2.x client does not have auth option and connect_error event so the server code next(new Error("not authorized")) doesn't work for it.

So deal with that, I add these 2 steps in my codes,

1. For client code, I add auth data to query property, e.g., (I had added to extraHeaders but I find 4.x socket doesn't have this extraHeaders option

socket = io(server, { transports: ['websocket'],
    query:{token,uid}
  })

2. Since 2.x client does not have connect_error event, the server just call socket.disconnect() without calling next() in the middleware if authentication fails.

io.use((socket, next) => {
  if (Object.keys(socket.handshake.auth).length === 0) {
      //Assume it is 2.x client
      const token = socket.handshake.query['token'] as string
      const uid = socket.handshake.query['uid'] as string
      if (authentication fails ) {
	  // next();
          // 2.x client doesn't have connect_error event
          socket.disconnect()
      }
  } else {
     //Assume it is 4.x client
    ....
  }
})

So far it seems to work. But I was wondering is there a better way to do authentication ?

Thanks!

[darrachequesne]

Hi!

but my customers still use socket.io-client 2.x (mainly to support IE 11)

Socket.IO 3.x and above should support browsers down to IE9, isn't that the case for you?

Reference: https://socket.io/docs/v4/client-installation/#browser-support

The problem with the query option in v2 is that it was sent in both the query parameters and during the Socket.IO handshake.

A cleaner way to do this in v2 would be the following:

import { Manager } from "socket.io-client";

const manager = new Manager(server, {
  transports: ["websocket"]
);

const socket = manager.socket("/", {
  query: {
    token,
    uid
  }
});

socket.on("error", () => {
  // authentication error
});

The error event in v2 was renamed to connect_error in v3 for clarity.

Reference: https://socket.io/docs/v2/namespaces/#handling-middleware-error

[qiulang]

Thanks for answering my question. About IE support I remember it is because if debug 4.0 breaks IE, as you said here https://github.com/socketio/socket.io-client/releases/tag/2.3.1. I also asked the question about IE support at socketio/socket.io-client#1328 and here #4027

I was never able to make 4.0 work for IE and gave it up.

About your suggestion, I do want to only send the auth data during the Socket.IO handshake. So if I understand you correctly, the following code is for that. But why is that in 2.x it is called Namespace middleware but 4.0 no namespace is involved ?

const socket = manager.socket("/", {
  query: {
    token,
    uid
  }
});

[qiulang]

I tried your suggestion about using Manager but I find it did not work. At the server side, socket.handshake.query doesn't have token, only query: [Object: null prototype] { EIO: '3', transport: 'websocket' },

  let manager = new Manager(server,{ transports: ['websocket'] })
  let socket = manager.socket("/",{query:{token,uid}})

Only this works

  let manager = new Manager(server,{ transports: ['websocket'],query:{token,uid:user_id}})
  let socket = manager.socket("/")

But I think this is the same as using io function, isn't it ?

let socket = io(server, { transports: ['websocket'],query:{token,uid:user_id,client}})

Is it because I use 4.x server code ?

Another question is you said "The problem with the query option in v2 is that it was sent in both the query parameters and during the Socket.IO handshake." I further check https://socket.io/docs/v2/client-api/#with-query-parameters

The document there does separate the query parameters & query option. So I am bit confused with your words.

BTW, it is comforting to see the api document does mention using query for authentication. I didn't read that document before I asked the question and I just make an educated guess that query will be a good place to attach authentication data!

[darrachequesne]

You are absolutely right, the example I provided does not work, sorry for that.. It does only work for custom namespaces:

import { Manager } from "socket.io-client";

const manager = new Manager(server, {
  transports: ["websocket"]
);

const socket = manager.socket("/custom", {
  query: {
    token,
    uid
  }
});

And on the server-side:

io.of("/custom").on("connection", (socket) => {
  console.log(socket.handshake.query);
});

This is quite an unexpected behavior, which is why it was reworked in Socket.IO v3.

So for the main namespace, I think the query parameters (your first suggestion) is the way to go.