authentication bug (?) for subscription only

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 !)

[oscar6echo]

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

[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