Graphql-engine: authentication bug (?) for subscription only

[oscar6echo]

I have a setup that works fine:

• nuxt/apollo on client side
• hasura graphql engine on server side

My apollo config is:

// ~plugins/apollo/clientConfigs.js
export default function(context) {
  return {
    httpEndpoint: 'http://192.168.99.110:30590/v1/graphql',
    wsEndpoint: 'ws://192.168.99.110:30590/v1/graphql', // optional
    tokenName: 'apollo-token', // optional
    persisting: false, // Optional
    websocketsOnly: false, // Optional
    getAuth: () => {
      const myToken = 'abcdef';
      const myAuthHeader = 'Bearer '+myToken;
      return myAuthHeader;
    }
  };
}

the following query returns the expected result:

query {
  journal(limit: 1, order_by: { action_timestamp: desc }) {
    table_name
    primary_key
    user_id
    value
    col
    action_type
    action_timestamp
  }
}

But this equivalent subscription fails:

subscription {
  journal(limit: 1, order_by: { action_timestamp: desc }) {
    table_name
    primary_key
    user_id
    value
    col
    action_type
    action_timestamp
  }
}

The message in the console is:

"cannot start as connection_init failed with : Authentication hook unauthorized this request"

The web socket communication logs from the Chrome console tab Network are:

UP {"type":"connection_init","payload":{"authorization":"Bearer agx-xf_Gx8BnH9NUP0dIxZQx1uU"}}
UP {"id":"1","type":"start","payload":{"variables":{},"extensions":{},"operationName":null,"query":"subscription {\n  journal(limit: 1, order_by: {action_timestamp: desc}) {\n    table_name\n    primary_key\n    user_id\n    value\n    col\n    action_type\n    action_timestamp\n    __typename\n  }\n}\n"}}
DOWN {"type":"ka"}
DOWN {"type":"connection_error","payload":"Authentication hook unauthorized this request"}
DOWN {"type":"error","id":"1","payload":{"extensions":{"path":"$","code":"start-failed"},"message":"cannot start as connection_init failed with : Authentication hook unauthorized this request"}}
UP {"id":"1","type":"stop"}
DOWN {"type":"complete","id":"1"}

So it seems the client messages are valid, else what is missing ?
Additional remarks:

• The same subscription works on the admin console
• Looking into the auth server I see that the token is valid - the corresponding query does work.

Where is the catch ? bug ? misconfiguration on my part ?
Pls advise.

(I am not far from being able to deploy hasura in a company - and this is really a fine piece of engineering !)

[praveenweb]

Hey @oscar6echo

It seems like you are using the vue-cli-plugin-apollo to setup Apollo Client. There is a bug in that module where getAuth() returns the headers as such instead of wrapping it under a headers object as expected by Hasura.

Here's the relevant issue - https://github.com/Akryum/vue-cli-plugin-apollo/issues/134 and here's a PR with a fix for the same which is pending to be merged https://github.com/Akryum/vue-cli-plugin-apollo/pull/144

For now, your option is to manually setup apollo client for subscriptions. We have written a tutorial to do that for any Vue app. https://learn.hasura.io/graphql/vue/subscriptions/1-subscription

[oscar6echo]

@praveenweb Thx a lot for your quick and precise answer !
To follow suit, I added a comment in favor of the merge.

I had gone through your tutorial and it is extremely helpful and to the point.
Another big thanks for that ! !

But I intend to stay within the nuxt-community/apollo-module framework (as much as possible) to keep my app orderly and more manageable, so I am trying to edit the node_package post install (according to your commit + some console.log) and continue dev with the updated version.

Unfortunately for some reason the change is not applied. If by any chance you have an obvious tip I'll be grateful - now I recognize this is unrelated to the issue.

[oscar6echo]

Forget my last comment: I had updated file
vue-cli-plugin-apollo/graphql-client/src/index.js
indead of
vue-cli-plugin-apollo/graphql-client/dist/index.js.

so that now the first message is:

UP {"type":"connection_init","payload":{"authorization":{"headers":"Bearer 8itDnC0s7Lt1-vej-bn6DGzvhcQ"}}}

but the rest of the sequence is unchanged:

UP {"id":"1","type":"start","payload":{"variables":{},"extensions":{},"operationName":null,"query":"subscription {\n  journal(limit: 1, order_by: {action_timestamp: desc}) {\n    table_name\n    primary_key\n    user_id\n    value\n    col\n    action_type\n    action_timestamp\n    __typename\n  }\n}\n"}}
DOWN {"type":"ka"}
DOWN {"type":"connection_error","payload":"Authentication hook unauthorized this request"}
DOWN {"type":"error","id":"1","payload":{"extensions":{"path":"$","code":"start-failed"},"message":"cannot start as connection_init failed with : Authentication hook unauthorized this request"}}

Is there still some error in the first messages ?

[oscar6echo]

Again, forget my comment above. I had mistakenly send the headers
{authorization:{headers:"Bearer token"}}
instead of (obviously !)
{headers:{authorization:"Bearer token"}}

Now it works - as you explained. Thx !

[oscar6echo]

Since the latest release of vue-cli-plugin-apollo (0.21.1) no need to manually correct the bug as above.