Add Authorization Header to Websocket for Vue Cli Plugin setup?

[ashishwadekar]

Hi,
I am able to add Authorization to the Http call but not able to add it to Websocket. Attaching my setup below:

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import {
  createApolloClient,
  restartWebsockets
} from 'vue-cli-plugin-apollo/graphql-client'

// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token'
// return the headers to the context so httpLink can read them

// Http endpoint
const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP,

// Files URL root
export const filesRoot =
  process.env.VUE_APP_FILES_ROOT ||
  httpEndpoint.substr(0, httpEndpoint.indexOf("/graphql"));

// Config
const defaultOptions = {
  // You can use `https` for secure connection (recommended in production)
  httpEndpoint,
  // You can use `wss` for secure connection (recommended in production)
  // Use `null` to disable subscriptions
  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS,
  // LocalStorage token
  tokenName: AUTH_TOKEN,
  // Enable Automatic Query persisting with Apollo Engine
  persisting: false,
  // Use websockets for everything (no HTTP)
  // You need to pass a `wsEndpoint` for this to work
  websocketsOnly: false,
  // Is being rendered on the server?
  ssr: false,

  // Override default apollo link
  // note: don't override httpLink here, specify httpLink options in the
  // httpLinkOptions property of defaultOptions.
  // link: myLink

  // Override default cache
  // cache: myCache

  // Override the way the Authorization header is set
  getAuth: tokenName => {
    // get the authentication token from local storage if it exists
    const token = 'Bearer ' + localStorage.getItem("id_token");
    // return the headers to the context so httpLink can read them
    return token || ''
  },

  // Additional ApolloClient options
  // apollo: { ... }

  // Client local data (see apollo-link-state)
  // clientState: { resolvers: { ... }, defaults: { ... } }
}

// Call this in the Vue app file
export function createProvider(options = {}) {
  // Create apollo client
  const {
    apolloClient,
    wsClient
  } = createApolloClient({
    ...defaultOptions,
    ...options,
  })
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        // fetchPolicy: 'cache-and-network',
      },
    },
    errorHandler(error) {
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    },
  })

  return apolloProvider
}

// Manually call this when user log in
export async function onLogin(apolloClient, token) {
  if (typeof localStorage !== 'undefined' && token) {
    localStorage.setItem(AUTH_TOKEN, token)
  }
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (login)', 'color: orange;', e.message)
  }
}

// Manually call this when user log out
export async function onLogout(apolloClient) {
  if (typeof localStorage !== 'undefined') {
    localStorage.removeItem(AUTH_TOKEN)
  }
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try {
    await apolloClient.resetStore()
  } catch (e) {
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
  }
}

Can you help me with this?

Thanks.

Cheers,
Ashish

[agosto-levitomes]

I see the same behavior. Stepping through the source code this looks like the probable cause:

https://github.com/Akryum/vue-cli-plugin-apollo/blob/b99182283eeb8ea49336bb1617a309269d32dc8b/graphql-client/src/index.js#L44

vue-apollo never attempts to use the getAuth set by the developer, it always falls back to the default, and does not set authorization headers as requested.

@Akryum does that seem like an accurate analysis?

[Akryum]

@agosto-levitomes I only use defaultGetAuth if you don't pass any value for getAuth, that's how default values work in JavaScript. So your analysis is incorrect.

[agosto-levitomes]

Not Chris, but this is trivial to reproduce.
I will leave you to it

Example that sets getAuth to something with observable side effects:

const defaultOptions = {
	wsEndpoint: < validAddress > ,
	...
	getAuth: () => {
		console.log(`Making auth token: Bearer ${token}`);
		return `Bearer ${token}`;
	}
	...
}

Observe getAuth is never called/side effects don't happen:

Observe lack of custom auth headers:

[agosto-chrisbartling]

Not sure how I got pulled into this conversation. Probably an autocomplete phenomenon of some sort.

[ashishwadekar]

@Akryum For now, I am overiding the WSClient creation by extracting it out of your library & setting it up as a duplicate in my project, as I need to pass Authorization headers to wsClient & httpLink in different way.

I may be missing something here, but there must be a cleaner way to do it?

wsClient = new _subscriptionsTransportWs.SubscriptionClient(wsEndpoint, {
                reconnect: true,
                connectionParams: {
                    "headers": {
                        authorization: getAuth(tokenName)
                    }
                }
            }); // Create the subscription websocket link

            var wsLink = new _apolloLinkWs.WebSocketLink(wsClient);

authLink = (0, _apolloLinkContext.setContext)(function (_, _ref2) {
            var headers = _ref2.headers;
            var authorization = getAuth(tokenName);
            var authorizationHeader = authorization ? {
                authorization: authorization
            } : {};
            return {
                headers: _objectSpread({}, headers, authorizationHeader)
            };
        }); // Concat all the http link parts

[Akryum]

@agosto-chrisbartling Sorry! The autocomplete did something strange 😕

@agosto-levitomes See a working example: https://github.com/Akryum/vue-apollo/blob/master/tests/demo/src/vue-apollo.js

[ltomes]

@agosto-levitomes See a working example: https://github.com/Akryum/vue-apollo/blob/master/tests/demo/src/vue-apollo.js

Thanks for sharing, that is the example I started working from. I then started vue-apollo via vue add apollo, and accepted example code in case I had made a mistake. That working example does not use websockets.
I'm sorry to say it is not a working example in regards to getAuth for websockets/getting the correct headers on a websocket request.

getAuth from the users defaultOptions Is not called. Simply add a comment to the method in your demo (and a ws endpoint), and run it it to observe this. The default getAuth method from https://github.com/Akryum/vue-cli-plugin-apollo/blob/b99182283eeb8ea49336bb1617a309269d32dc8b/graphql-client/src/index.js#L186 is always called. Hence why @ashishwadekar went through all that effort to abstract add auth headers.

It does work for http/s requests.

[Akryum]

It does use websockets: https://github.com/Akryum/vue-apollo/blob/master/tests/demo/src/vue-apollo.js#L17

[ashishwadekar]

@ltomes @Akryum

What I have observed is that token works but only to set headers on httpLink & not on the wsClient. wsClient expects connectionParams & block pertaining to it which is different from httpLink. Ideally once the token is found there could be the following scenarios:

1. Add authorization headers to httpLink the default way. This is happening now.
2. Add authorization headers to wsClient with connectionParams. Not happening now.
3. Options to consider whether authorization headers be set in same way or different way for httpLink & wsClient. Cannot see this in current implementation.

I was unable to set different headers on httpLink & wsLink using getAuth.

@Akryum Share your thoughts on this. Cheers.

[dietergoetelen]

@Akryum is this considered to be implemented? Can I help in some way?

[ashishwadekar]

@Akryum Any updates on this one?

[travis-r6s]

So should https://github.com/Akryum/vue-cli-plugin-apollo/blob/b99182283eeb8ea49336bb1617a309269d32dc8b/graphql-client/src/index.js#L106 be:

return authorization ? { headers: { authorization  } } : {};

As per this example?

[ndarilek]

So is there currently any way to add authorization headers to websocket calls?

I think I just hit this issue. With the default setup, setting my token works fine for HTTP calls, but websocket calls complain that no token is set. Using Hasura for the backend. If I'm doing things correctly for one, I'd expect them to work for the other.