npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

apollo-link-token-refresh

v0.7.0

Published

Apollo Link that performs access tokens renew

Downloads

54,373

Readme

Token Refresh Link npm version

Purpose

An Apollo Link that performs renew expired JWT (access tokens)

Installation

npm install apollo-link-token-refresh --save

Usage

Token Refresh Link is non-terminating link, which means that this link shouldn't be the last link in the composed chain.

Warning

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,
});

Options

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|

Example

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,
  ...
])

Custom access token payload

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());
    },
  })

Storing access token in Redux

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));
        },
        ...
    });

Context

The Token Refresh Link does not use the context for anything.