[Vuejs]-Auth0 getAccessTokenSilently returns empty object when trying to set vue apollo client bearer token

by

0👍

getAccessTokenSilently returns a promise. You need to await it in order to get the actual value.

You may need to use the Apollo setContext link in order to inject some async processing before things are passed over to the HttpLink.

I haven’t used Vue before but a similar approach from a React app could look something like this:

  const authLink = setContext(async (_request, { headers }) => {
    const token = await auth0.getAccessTokenSilently();

    const newHeaders = {
      ...headers,
      Authorization: `Bearer ${token}`,
    };

    return {
      headers: newHeaders,
    };
  });
  
  // create your HttpLink as before but concat it so that the auth
  // one runs first
  const httpLink = new HttpLink(/** stuff **/);  

  const finalLink = authLink.concat(httpLink);

Leave a comment