Authenticated subscriptions

[Weakky]

Hey there,

I'm trying to setup authenticated subscriptions.

As this issue suggests (apollographql/subscriptions-transport-ws#113) it should be possible using a middleware-like approach using the following code:

const wsLink = new WebSocketLink({
  uri: wsUri,
  options: {
    reconnect: true,
  },
});
wsLink.subscriptionClient.use([{
  async applyMiddleware(options, next) {
    const token = await getLoginToken();
    options.context = { token };
    next();
  },
}]);

Unfortunately, I'm receiving a context that is always null. However, the context is properly set when instantiating the WebSocketLink with options.connectionParams.

As I don't know whether the issue is coming from apollo-client, subscription-transport-ws, graphql-yoga, or just myself, I'm asking that question here.

Is there anything I'm doing wrong ?

Cheers!

[0xDaksh]

I did it like this:

const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000',
  options: {
    reconnect: true,
    connectionParams: {
      token: myToken,
    },
  },
});

You've to directly specify that in options, I guess. As that's how i did it, a while back.

[Weakky]

Yeah, but that's what I said above:

However, the context is properly set when instantiating the WebSocketLink with options.connectionParams.

In most cases though, you don't have that token when instantiating the WebSocketLink.
That is something you have access to only after user has logged-in. That's why a middleware approach would be the right way to handle it.

[0xDaksh]

what you can do in those cases, is that you can store the token into a cookie or localStorage and reload the page. when Websocket link is created, you can just ask it to read it from there.

[0xDaksh]

Configure your websocket-link like this:

const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000',
  options: {
    reconnect: true,
    connectionParams: {
      token: localStorage.getItem('your-token-name') || null,
    },
  },
});

once you have token, send it to localstorage and reload:

// recieved token,
localStorage.setItem('your-token-name', 'tokenValue')
window.location.reload() // reload the page

In most cases, after login we make the browser reload, because it get's the login state and essence.

[0xDaksh]

also try this:

wsLink.subscriptionClient.use([{
  async applyMiddleware(options, next) {
    const token = await getLoginToken();
    options.connectionParams = { token };
    next();
  },
}]);

[Weakky]

While this could be a workaround for browsers, it cannot work on mobile apps. And sadly, that doesn't explain why the middleware approach isn't working :(

EDIT: I think I've tried that but I'm not sure, I'll try that again to make sure !

[0xDaksh]

I think it's not working because, you're adding it as options.context, while it works in options.connectionParams.

Edit: nvm, connectionParams is used at initializing most probably

[0xDaksh]

@schickling as there is no response on this issue, please close it. @Weakky can reopen it, if they still have any doubts.

[Weakky]

This is still an issue. Using options.connectionParams in the middleware doesn't work. 😞

[0xDaksh]

@Weakky can you confirm that this also doesn't work with apollo-server-express? so we can make sure, this is a graphql-yoga problem or not?

[kamilregulski]

@Weakky Try https://www.npmjs.com/package/sync-storage

[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. 🙂

[joffarex]

I would like to reopen this issue, as there is no clear way to authenticate subscriptions in graphql-yoga

[HugoLiconV]

I'm having the same issue, I'm using GraphQL Shield for permissions and I need to access the token in every operation in an express middleware, right now I'm able to access it through the context but only in the first connection, not in every operation

server.express.use(async (req, res, next) => {
  /*
     I need to access webSocket authToken here
  */
  next();
});

[Urigo]

Hey, @Urigo from The Guild here!

You might know us from projects such as graphql-code-generator, envelop or graphql-tools.

For a long time we thought that the Javascript ecosystem is still missing a lightweight cross-platform, but still highly customizable GraphQL Server.

In the past the awesome Prisma team took on that great challenge and now we are happy to announce that we are continuing them and just released GraphQL Yoga 2.0 - Build fast, extensible, and batteries-included (Subscriptions, Serverless, File uploads support) GraphQL APIs in Node.js 🚀

We have been working a long time on version 2.0 and have been using it in our clients projects for a few months now and shared a couple of alpha cycles here.
Thank you all for your feedback and suggestions, you made this release possible!

Please try Yoga out again, give us feedback and help us spread the word on the new release!

• Announcement and blog post
• V2 Roadmap #704
• https://www.graphql-yoga.com/