An Apollo Link that performs renew expired JWT (access tokens)
npm install apollo-link-token-refresh --save
Token Refresh Link is non-terminating link, which means that this link shouldn't be the last link in the composed chain.
If you need the Apollo v2 support, please use release 0.2.x
import { TokenRefreshLink } from "apollo-link-token-refresh";
const link = new TokenRefreshLink({
accessTokenField: 'accessToken',
isTokenValidOrUndefined: (operation: Operation) => Promise<boolean>,
fetchAccessToken: () => Promise<Response>,
handleFetch: (accessToken: string, operation: Operation) => void,
handleResponse? : (operation: Operation, accessTokenField) => response => any,
handleError? : (err: Error, operation: Operation) => void,
});The Token Refresh Link takes an object with four options on it to customize the behavior of the link.
| name | value | explanation |
|---|---|---|
| accessTokenField? | string |
Default: access_token. This is a name of access token field in response. In some scenarios we want to pass additional payload with access token, i.e. new refresh token, so this field could be the object's name |
| isTokenValidOrUndefined | (operation: Operation, ...args: any[]) => Promise<boolean> |
Indicates the current state of access token expiration. If the token is not yet expired or the user does not require a token (guest), then true should be returned |
| fetchAccessToken | (...args: any[]) => Promise<Response> |
Function covers fetch call with request fresh access token |
| handleFetch | (accessToken: string, operation: Operation) => Promise<void> |
Callback which receives a fresh token from Response. From here we can save token to the storage |
| handleResponse? | (operation, accessTokenField) => response => any |
This is optional. It could be used to override internal function to manually parse and extract your token from server response |
| handleError? | (err: Error, operation: Operation) => void |
Token fetch error callback. Allows to run additional actions like logout. Don't forget to handle Error if you are using this option |
import { TokenRefreshLink } from 'apollo-link-token-refresh';
link: ApolloLink.from([
new TokenRefreshLink({
isTokenValidOrUndefined: async () => !isTokenExpired() || typeof getAccessToken() !== 'string',
fetchAccessToken: () => {
return fetch(getEndpoint('getAccessTokenPath'), {
method: 'GET',
headers: {
Authorization: `Bearer ${getAccessToken()}`,
'refresh-token': getRefreshToken()
}
});
},
handleFetch: accessToken => {
const accessTokenDecrypted = jwtDecode(accessToken);
setAccessToken(accessToken);
setExpiresIn(parseExp(accessTokenDecrypted.exp).toString());
},
handleResponse: (operation, accessTokenField) => response => {
// here you can parse response, handle errors, prepare returned token to
// further operations
// returned object should be like this:
// {
// access_token: 'token string here'
// }
},
handleError: err => {
// full control over handling token fetch Error
console.warn('Your refresh token is invalid. Try to relogin');
console.error(err);
// When the browser is offline and an error occurs we don’t want the user to be logged out of course.
// We also don’t want to delete a JWT token from the `localStorage` in this case of course.
if (
!navigator.onLine ||
(err instanceof TypeError &&
err.message === "Network request failed")
) {
console.log("Offline -> do nothing 🍵")
} else {
console.log("Online -> log out 👋")
// your custom action here
user.logout();
}
}
}),
errorLink,
requestLink,
...
])In a scenario where you're using Typescript and your the return of your refresh token is a custom object rather then a single string you can construct the link using a generic type, i.e. :
new TokenRefreshLink<{token, refreshToken}>({
// rest omitted for brevity
handleFetch: newTokens => {
const {token, refreshToken} = newTokens;
const accessTokenDecrypted = jwtDecode(token);
setAccessToken(token);
setRefreshToken(refreshToken);
setExpiresIn(parseExp(accessTokenDecrypted.exp).toString());
},
})If access token is stored in Redux state, operation object allows to reach the state and dispatch needed actions, i.e. :
new TokenRefreshLink({
// rest omitted for brevity
isTokenValidOrUndefined: async (operation) => {
const { getState } = operation.getContext();
const accessToken = accessTokenSelector(getState());
// validate access token and return true/false
},
handleFetch: (accessToken, operation) => {
const { dispatch } = operation.getContext();
dispatch(setAccessToken(accessToken));
},
...
});The Token Refresh Link does not use the context for anything.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent