JWT and refresh tokens
I need some advice on how to handle refresh tokens 😦 Is it "good enough" if I generate two JWT tokens (accessToken, refreshToken), and let the resfrehToken just contain one claim, being the userID? And whenever I do a api call from the client and it returns a 401, I then call a /refresh api call, to get a new accessToken and retry the request - as long as the refreshToken is valid?
18 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Using React Native, next-auth is not an option 😄
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Even worse, it's Expo, so I can't use something like Auth0 since the SDK doesn't support "Expo apps" either afaik....so here I am impl auth mysefl 🙂
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@chip I’ve built a couple web apps at work using this auth pattern and so far it’s worked pretty well for us. Depending on what frontend client you are using (fetch, axios, tRPC client, etc) you may find “links” or “interceptors” (each http client has their own term for this) to be quite helpful for refreshing your access tokens. For example, for some apps we hit a /me endpoint before each API request in the client side. If we get a 401 http status code, we know the access token needs to be refreshed, so we can handle that and acquire a new token before continuing the original API request.
Hope that helps!
Hope that helps!
I did a code example at https://github.com/trpc/trpc/discussions/2344. It’s with v9 but same concepts apply to v10
Kind of messy, maybe cleaner to do in the provider component ?
Another simple example I’ve used before: https://github.com/larskarbo/trpc-token-refresh-link
You’ve definitely got options.
GitHub
GitHub - larskarbo/trpc-token-refresh-link: Token Refresh Link for ...
Token Refresh Link for tRPC. Contribute to larskarbo/trpc-token-refresh-link development by creating an account on GitHub.
Something like tRPC or Axios would be nice to move to. I’ve been holding on to fetch, and it’s rather annoying for certain things as soon as the app grows. Still ehhh on the tRPC since the backend is written in Go (never used trpc), but read up on axios interceptors. I’ll have to read those links later for sure. Thanks :)
I’ve personally found axios easier to implement the “refresh” in, but I believe fetch would work equally as well. I’ve skimmed this vid in the past, but wanted to pass it along: https://youtu.be/hbvnsse4xGI
Dennis Ivy
YouTube
Refreshing Tokens With Fetch | Custom Interceptor
Refresh JSON Web Tokens by building a custom wrapper around fetch calls in order to update tokens before OR after responses
Source Code: https://github.com/divanov11/refresh-token-fetchwrapper
Starting Code: https://github.com/divanov11/refresh-token-axios-interceptors
Related videos:
- Refreshing Tokens With Axios Interceptors: https://youtu...
Oooh that looks 🔥
I don’t know the author personally, but it’s a super simple and elegant solution, imo. Plus the source code is so simple you could probably write your own implementation of it.
Won't that make an auth request on ever api request? Seems kind of wasteful to me
You could probably check clientside if the token is spoiled
You can use clerk https://github.com/clerkinc/t3-turbo-and-clerk
GitHub
GitHub - clerkinc/t3-turbo-and-clerk: A t3 Turbo starter with Clerk...
A t3 Turbo starter with Clerk as the auth provider. - GitHub - clerkinc/t3-turbo-and-clerk: A t3 Turbo starter with Clerk as the auth provider.
I sat up all night "finishing" auth impl and you slam this in my face now :((((9
I'll have a look tho, thx
🙂