How to incorporate web socket middleware

[LawJolla]

❤️Yoga! Thanks for all of the hard work.

I'm trying to add a subscriptions authentication flow, and I like to do that with middleware.

I've tried to use expressWs to no avail...

...
const expressWs = require("express-ws")(server.express)
...
server.express.ws("/", (ws, req) => console.log("WS!"))

In the debugger, ws is attached to server.express.ws, but I cannot get the callback to ever fire. Am I going about this the wrong way?

As always, any help is greatly appreciated!

[schickling]

Can you further explain your subscription-based auth flow?

[LawJolla]

@schickling,

It's a little foggy in my mind, but I'm trying to duplicate the auth flow for http requests.

I'm in the "a malformed / expired token is a 401 error" camp. So on the initial handshake, I'd like to validate a JWT token and attach a user object to the context. I'm not sure how to do that without some form of middleware.

[stale]

Due to inactivity of this issue we have marked it stale. It will be closed if no further activity occurs.

[stale]

Hey 👋, It seems like this issue has been inactive for some time. In need for maintaining clear overview of the issues concerning the latest version of graphql-yoga we'll close it.
Feel free to reopen it at any time if you believe we should futher discuss its content. 🙂

[igorz24]

@LawJolla Hi, I know the issue is old, but I've run into identical problem and can't find a way to resolve it. Did you have any luck in finding a solution?

[LawJolla]

Sorry @igorz24 for the delay!

This isn't going to be easy with Yoga since it's using a dated version of Apollo Server. I would abandon Yoga, move to the latest version of Apollo Server, and follow their docs on this topic. (Sorry I don't have a link ready, but they have authenticated web socket subscriptions in their docs.)

[igorz24]

@LawJolla Thanks for the answer.

I eventually gave up trying to apply express-ws to underlying express server and went with websocket authentication suggested in apollo server docs.

This would be end of the story if not for the documentation inconsistency with onConnect method which doesn't pass returned object to context as described here.

The issue is known, but despite users suggesting how to fix it, it has been stale for a long time.

@sabith-th answer in above issue did the trick for me. I don't like the hacky nature of it, but it works:

I was able to get hello object in the context if I manually add it to the context via connection.context. Like:

context: async ({ req, connection }) => {
        if (connection) {
            // check connection for metadata
            return {
                foo: 'bar',
                hello: connection.context.hello,  
            };
        } else {
            // check from req
            const token = req.headers.authorization || "";

            return { token };
        }
    },
    subscriptions: {
        onConnect: (connectionParams, webSocket) => {
            console.log('Websocket CONNECTED');
            return {
                hello: 'world'
            }
        },
        onDisconnect: () => console.log('Websocket CONNECTED'),
    }

Not sure if this is the correct approach though.