Auth-Header not refreshing

[RaphaelSchein]

I have an GraphQL API serving every Information, the authentication is done with JWT Token in the header, the client (written with VUE) obtains the jwt from an seperated http-post endpoint and stores it in the localstorage, now i have the problem if the client logs in and stores the token in the localstorage its not used in the header of the apollo client. After the client reloads the site it worked but directly after login not.

[paulpdaniels]

You'll need to provide a bit more information to get support (also this doesn't sound like a vue-apollo issue it sounds like your apollo-link-context is not dynamically fetching the cookie per call). Also since this is primarily a bug channel you might be better off submitting this on SO.

[stefl]

There is an additional method that you need to hook into to called onLogin. This example has code that you should be able to use to achieve this: https://github.com/Akryum/vue-apollo/blob/master/tests/demo/src/components/UserLogin.vue

[JohannesLamberts]

@RaphaelSchein its hard to tell from your description, but I guess you are using setContext from apollo-link-context as @paulpdaniels described like
setContext({ headers: { authorization: localStorage.getItem('AUTH_TOKEN') } })
where you should recalculate the headers for every request, in case the token changed
setContext(() => ({ headers: { authorization: localStorage.getItem('AUTH_TOKEN') } }))

[rlfrahm]

Sorry to resurrect an extremely old issue, but it took me too long to find this answer... Not even realizing that the default vue-apollo file comes with onLogin and onLogout hooks. Is this documented somewhere, and if not, can we add it to help others? There are quite a few SO questions and issues that have been asked here around this.

[apo1967]

Just in case anybody else stumbles across this issue and is using AWS Cognito like we do: in our case we handled the "tokenRefresh" event from the amplify hub (aka event bus) to replace the JWT in the local storage, but it turned out it just kicked in after the query has been assembled, so the JWT was still the expired one. The solution above (setContext ...) didn't do the trick for us (don't know why). But this link from this issue led us to the following solution which works pretty fine:

Fetch the JWT on demand:

async function defaultGetAuth() {
  try {
    const cognitoUser = await Auth.currentAuthenticatedUser();
    const currentSession = cognitoUser.signInUserSession;
    let token = currentSession.idToken.getJwtToken();
    if (token) {
      // console.log("token:", (token.substring(0, 10) + "..." + token.substring(token.length - 10, token.length)));
    }
    return token ? `Bearer ${token}` : '';
  } catch (e) {
    console.error("error getting jwt", e);
  }
}

Then set the auth method:

const defaultOptions = {
 ...
 getAuth: defaultGetAuth,
...
};

Amplify will read the current user from it's own local storage. If and only if the JWT has expired, amplify will automatically refresh it, so no unnecessary traffic is generated.