Category: TypeScript

Refreshing JWT Access Token with Redux – Concept

I spent multiple days trying to figure out how to refresh JWT access token in Redux store. (Getting JWT token in first place – some other time but it’s straightforward.)

My React app works for like 5 minutes, and gets “access denied”, and it turns out the JWT access token has the life expectancy of 5 minutes, and you have to use refresh token to get new access token once it expires.

I googled and everyone is solving the problem using “stash the actions, create new JWT toekn refresh action, do that first, and re-run the stashed actions”.
This works fine as long as you don’t use Redux Thunk to do some kind of processing after dispatching action. In my case, Material Table needs the result to be given back to the table data once the fetch succeeds, and I was using Thunk for it.

This approach – “stash actions and refresh JWT token” does not work for me. This morning, I asked myself “is there a different way?”, and I answered myself – “if a token is expiring, refresh it before it expires with timer.”

When you store the JWT access token, parse it, get the expiration, and set a timeout 30 seconds before it expires, and refresh the token.
The all of changes needed 30 minutes. I already had all the Redux actions and types shaped out. Rewiring of refreshing access token with timeout took very little time, and I get to keep the existing Thunks’ post-action processing.

Only downside – the access token may be refreshed if the user is dormant for long time and no need to refresh the token. if you are using the web app intereactively, this would probably be very neglegible downside. Overall, this is a big win for me.

If you came here googling “Refresh JWT Access Token Redux”, don’t follow the examples out there. Use setTimeout or setInterval.

I will prep some code, and write another post about this.

Running TypeScript Project causes inotify to run out

I decided to redo my React project with TypeScript. It causes an error event and doesn’t run at all.

Starting the development server...

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: watch /home/ntai/sand/triageui/public ENOSPC
    at _errnoException (util.js:1022:11)
    at FSWatcher.start (fs.js:1382:19)
    at Object.fs.watch (fs.js:1408:11)
    at createFsWatchInstance (/home/ntai/sand/triageui/node_modules/chokidar/lib/nodefs-handler.js:38:15)
    at setFsWatchListener (/home/ntai/sand/triageui/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/ntai/sand/triageui/node_modules/chokidar/lib/nodefs-handler.js:233:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/ntai/sand/triageui/node_modules/chokidar/lib/nodefs-handler.js:429:19)
    at FSWatcher.<anonymous> (/home/ntai/sand/triageui/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher.<anonymous> (/home/ntai/sand/triageui/node_modules/chokidar/lib/nodefs-handler.js:482:16)
    at FSReqWrap.oncomplete (fs.js:153:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

After few minutes of Google, it turns out file system monitor resource is running out. You need to increase the fs.inotify.max_user_watches.

Add following line to “”/etc/sysctl.conf”.

fs.inotify.max_user_watches = 524288

Then let the system fetch the value by:

sudo sysctl -p