How to secure a web socket connection

[NicoVogel]

I am using nextjs 14 with ws and trpc to establish a web sockets connection.
My goal would be the secure the web socket connection with clerk.

As of now, the web socket connection is not secured, while the regular trpc requests are (in trpc configured with splitLink).
It makes sense that the nextjs middleware does not apply to the web socket connection, as I do start a separate server for this.

I also know that you can secure ws calls upon the server.upgrade event: https://github.com/websockets/ws?tab=readme-ov-file#client-authentication

I was not able to find a straight forward way to secure the endpoint and the the current user.
It is possible, as I could even do the validation manually: https://clerk.com/docs/backend-requests/handling/manual-jwt
But, I would like to avoid that.

So, I try to find a way to secure it with @clerk/backend and maybe also @clerk/clerk-sdk-node.
But I have not been able to really find a way to apply the exported functions.

Here is my minimal repo with the unsecured web socket connection and clerk setup: https://github.com/NicoVogel/t3-websocket-minimal/tree/feat/clerk

Has someone done a more manual approach to setup clerk and may have an idea how to handle this or am I completely on the wrong track?

[mryraghi]

If you use socket.io, you can authenticate your connection by doing:

// client
const socketInstance = io(apiUrl, {
  transports: ["polling", "websocket"], // TODO: check websocket, as it doesn't support additional headers
  extraHeaders: {
    Authorization: `Bearer ${token}`
  }
});

and then:

// server
io = new Server(server, {
  path: "/socket.io",
  transports: ["polling", "websocket"]
});

io.engine.use(ClerkExpressRequireAuth());

[jescalan]

https://github.com/orgs/clerk/discussions/3829

[NicoVogel]

In case anyone else needs to implement this.
I created a minimal repo that shows the implementation for the package ws.

https://github.com/NicoVogel/clerk-secure-websocket