How to handle refresh token on react spa?

Question

I have two servers. One for Hasura GraphQL api which queries the db and provides app data. Another is a node server for authentication. These two servers are not on the same domain.

I have a react spa client. When a user logs in, the node server validates the credentials with the hasura graphql endpoint and provides a jwt token and refresh token to the client. The refresh token is sent via httpOnly cookie as the react client and node server are on the same domain.

Now when the jwt token expires, I want to silently refresh the jwt token using the refresh token which is sent automatically as a cookie to the node server. How would I implement this?

One way that I can think of is, on the client side I decode the jwt and if it's expired I send a request to the refresh token endpoint on the node server and get a new jwt token before sending any request to the hasura graphql server which needs the access token sent as an authorization header. This means I would have to do this check before every graphql request. Is this the optimized way or are there any other way to silently refresh the token given my application architecture?

I am asking whether the approach is right? I don't have any issue regarding the code. — Aritra Dattagupta
according to this documentation hasura.io/docs/1.0/graphql/manual/subscriptions/index.html , the websocket client uses browser cookies, so it seems they have to handle access token expiration, I did that in my manual graphql server using apollo and send new tokens as an Error to webscoket, because in that time there was not another way, but Hasura i don't know how but they have to handle, if not send them a ticket. — cybercoder

Avius Avius · Accepted Answer · 2020-05-24T19:49:45

Let's use deduction. Obviously, you can either check the expiration time at the client-side or let Hasura do that for you (and return an error whenever the token's expired).

If you check it on the client side, you will lose some milliseconds before each call to Hasura but will save a single Hasura round-trip whenever you detect an expired token. I would take a base64 decode of a JWT payload over an HTTP call anytime, so IMO there is no a better way to handle JWT auto-refresh, if that's your only concern.

OT but IMHO JWT is not an excellent solution when it comes to things like expiration, blacklisting, etc.. E.g.:

what if at some point you decide that you need to check if the account is suspended? You'd then have to start making calls to your auth server before each call to Hasura;
even if you deal with that, what if you decide to perform (for whatever reason) an auto-login on app-load? Or an auto-refresh at an interval? It's easy to do that with a single tab, but things will go south pretty quick once your user has two or more tabs of your application open at the same time.

I suspect that in many such cases people end up implementing sort-of sessions, only without cookies, which is a bit like reinventing the wheel.

May I suggest looking into Hasura's webhook auth system instead, if you find yourself going down a similar path in the near future - it might just be the optimal choice.

BTW, such questions might be better suited for the Software Engineering SE.

How to handle refresh token on react spa?

2 Answers