Vue-apollo: Authorization Header via `getAuth`

[paulpdaniels]

@CVANCGCG usually I do this sort of thing through the Apollo-link-context, which definitely supports async/await. Is there a reason you can’t do that?

[CVANCGCG]

Hi Paul, thank you for the prompt response. Is this the best reference issue to go over for Apollo-link-context. I ask because we have code that uses these initializers (below) that uses "options" objects and properties, rather than the functions referenced in the link above. In our code base, it's harder to determine where to apply the HTTP headers.

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

// 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
)
},
})
apolloProvider['wsClient'] = wsClient
```

[Booligoosh]

For @CVANCGCG and anyone else who's ended up here from Google etc, this is how I got it to work…

1. Create a new auth link:

import { setContext } from "apollo-link-context";

const authLink = setContext(async (_, { headers }) => {
  // Use your async token function here:
  const token = await getToken();
  // Return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ""
    }
  };
});

1. Add it to your defaultOptions object:

const defaultOptions = {
  // ...
  link: authLink
  // ...
}

Hope that makes sense, let me know if you have any questions!

[wiemann]

@Booligoosh I have the same link setup for auth tokens but they don't get sent to the websocket endopoint, only http. Any ideas on how to fix that?

[Booligoosh]

@wiemann Not sure sorry, I only use an HTTP endpoint in my app.

[mskg]

@Booligoosh I have the same link setup for auth tokens but they don't get sent to the websocket endopoint, only http. Any ideas on how to fix that?

Websockets don't support headers in browsers. You have to do the configuration via WebSocketLink.

[CVANCGCG]

@Booligoosh , thanks so much for the response and apologize for the delayed response. You are absolutely correct that the setContext() callback is called per request and is working for me.