Real world examples of jwt refreshing tokens

[leopucci]

Hi, thanks for your nice work so far.
I am struggling to find real world examples of modern code.
There are plenty of examples of old designed code, but not real world examples of this "rtk modern design" approach.

I already read the documentation and it just offers bits and pieces, there is no real world examples using modern design, just some pieces of auth.

I am using redux/axios/thunk to do using the old redux way with actions creators, reducers declared. but as I am building a new app, I am trying to use the new way of doing it and I am struggling with refreshing tokens.

Are there some complete login example, that the api code can handle the refresh tokens expiring, renewing, on this modern approach that you are aware of and could share with me?

Thanks
Pucci

[agusterodin]

RTKQ is great for many things data related but you may want to consider using a purpose-built auth library for auth. If you are using Next I highly recommend next-auth.

[leopucci]

Outsourcing security is not a thing that I like to do. Jwt tokens are a well stablished design that can be implemented in-company.

[onosendi]

"Don't use JWT for sessions. http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions -- JWT was never meant to be used for sessions, and its popularity happened purely because of marketing: https://youtu.be/GrLtOjCTB1s?t=1h2m44s. Instead, use session cookies: https://gist.github.com/joepie91/cf5fd6481a31477b12dc33af453f9a1d"

[phryneas]

There are still good reasons for JWTs, like working with multiple services that do not share a session pool, but you want to be authenticated to all off them.

But yeah, against a single service, JWTs usually are an oversized solution.

[agusterodin]

I guess it depends on the nature of your company (start-up, small business, government contract, company like google, etc). I'd say for 99% of startups and small businesses, auth is a fools chore. Auth is a hell of a lot of time/resources that can be devoted to delivering other value.

Auth0 and other authentication providers even have JS/React implementation libraries of their own. If you end up using their auth service, i'm sure you can trust the library they provide you.

[leopucci]

I agree with you. I had to develop by my own all the login proccess that I could outsource and check it out later, but I prefered to deal with this right away, and make the sw taylor maded without having to refactor later.

[agusterodin]

Also, please consider moving this thread to "discussions"

[msutkowski]

I guess it depends on the nature of your company (start-up, small business, government contract, company like google, etc). I'd say for 99% of startups and small businesses, auth is a fools chore. Auth is a hell of a lot of time/resources that can be devoted to delivering other value.

Auth0 and other authentication providers even have JS/React implementation libraries of their own. If you end up using their auth service, i'm sure you can trust the library they provide you.

The main problem there is accounting for their outages... so then you're paying off that tech debt with a caching layer, but everyone likes to suffer in different ways!

@leopucci There are examples of using RTK Query with both of things you mention in the docs + runnable examples in the repo as well. There are two variants of an auth example (albeit very basic), and there is a code example for handling refresh tokens in a baseQuery.

The reason you don't see fully working examples with things like auth0 is that the implementation can vary depending on your configuration - but conceptually, the code above gets you 95%+ of the way there.

[bgolubovic]

I am facing a 'similar' issue (1). And I see one in your documented example (2).

1. A real-world problem for me is that for example, Auth0 or Azure access token expires for an hour (just as/for an example). I am using auth0-react with Rtk query. The session is opened for 61minutes, then the user tries to fetch data on the server, and gets 401, not authorized. Make sense, access token expired, so I need to trigger getAccessTokenSilently() but it can be only used in a React function component or a custom React Hook function, which fetchBaseQueryFnWithReauth is not. I can do a hack and dispatch some Redux action, which will trigger some custom hook, with useEffect() with dependency and call getAccessTokenSilently() inside it. But as we know code is synchronous and there is no option not to wait for dispatch to be finished. (I did it with setTimeout()).

const fetchBaseQueryFnWithReauth: BaseQueryFn<
	string | FetchArgs,
	unknown,
	FetchBaseQueryError
> = async (args, api, extraOptions) => {
	const result = await fetchBaseQueryFn(args, api, extraOptions);
	// Use case scenario where we need to re-authenticate (token expired)
	// We dispatch a re-authentication action to the store, so that useGetToken hook can re run
	if (result.error && result.error.status === 401) {
		const newreAuth = !(api.getState() as RootState).auth.reAuth;
		api.dispatch(setReAuth({ reAuth: newreAuth }));
		setTimeout(() => fetchBaseQueryFn(args, api, extraOptions), 0);
	}
	return result;
};

2. Is that in docs usage is similar. api.dispatch(tokenReceived(refreshResult.data)) and tries until this is false if (result.error && result.error.status === 401) which is not optimized code for me or I see it differently. Maybe I am wrong??

Thanks in advance for your help.

[bgolubovic]

I found out, and consider it as an option is to call the Auth0 server to request token outside the Aoth0 React Provider. https://auth0.com/docs/authorization/flows/call-your-api-using-the-authorization-code-flow#request-tokens

[bgolubovic]

@msutkowski @agusterodin Any thoughts?

[agusterodin]

Working on this exact same problem starting in a month or two. Sorry I don't have anything to share at the moment.

[AntonOfTheWoods]

All this talk of Auth0 and the like is fine, if you are only focused on typical usecases for typical users. If you are an EU/US dev focussing only on those markets and only care about users who only ever travel in those markets, it's definitely a no-brainer.

What about users that are based in countries that block those services? Or you have users that will travel to such countries and still want to use your service (which you have a local presence with, or you aren't blocked, etc.).

There are always valid usecases for rolling stuff yourself. Your particular circumstances will dictate whether it is worth it or not, not some random X-company fanboy...

@leopucci I found this https://github.com/ihaback/refresh-token-redux-toolkit, which I'm personally going to get inspiration from.

[msutkowski]

I have no clue of what your point is here. We show examples of using tokens, refresh tokens and cookies. To your point of "x company"... There are only so many ways to handle auth, and the foundations in the example cover them.

Or am I misunderstanding whatever it is you're trying to say?

[phryneas]

@AntonOfTheWoods if you are in that situation, you probably have full control over your server and have to roll your own auth. And in that case, you probably should go the safest version, roll your JWT tokens in httpOnly,secure,sameSite cookies and in that case have no need to store anything in your Redux store, but just make a request to a reauth endpoint to refresh said cookies. That will end up pretty much being even less code than all the Auth0 stuff.

In the end all these questions do not boil down to "how do you implement authentication with RTK Query", but down to "how do you implement authentication". There is nothing specific to RTK Query apart from the stuff we show in the examples.
For the concepts themselves, thousands of good articles have been written with much more thorough information than we could ever add. Also, we shouldn't. It's mostly a backend architecture decision. RTK Query has nothing to do with that.

[AntonOfTheWoods]

I have no clue of what your point is here. We show examples of using tokens, refresh tokens and cookies. To your point of "x company"... There are only so many ways to handle auth, and the foundations in the example cover them.

Or am I misunderstanding whatever it is you're trying to say?

A little. I wasn't saying anything about the examples (searching Google for "RTK auth examples" took me here, not to the examples though...), just that whenever I see someone asking about how to implement auth, someone always says "just use Auth0", "just use blahblah", usually services that are blocked in regions I am personally interested in. As engineers we have to deal with real-world circumstances, and others may have circumstances you don't know or care about. Like many devs don't care about China, Iran, etc. Fine for them.

You guys did provide examples and I will confess I missed the link you posted, sorry! I do think the link I posted answers the question with a reasonably full example.