This is a great video. I wish I could have seen it a couple of months ago when I was trying to figure out how to do this. It's really tricky to get all the pieces to work together, especially the JWT token part. I'm glad you made this video. Thank you 👍
Hey great video as always, but one thing that I always concern is the vscode zoom. It's great bcs you zooming in the editor so we can see it better on smaller devices, but I think it could be zoomed out once so it won't too big and we can see some other codes. Thank youu!
I implemented JWT Authentication on my last project and I found a very useful guide about using two JWT token for implementing access and refresh token (with different secret) with the access token is stored only in memory and refresh token on the cookie. I found this approach really neat as I can keep my server stateless and authentication works across multiple servers. However, I would like to know what’s your recommendations on handling refresh token?
I think there are a lot of different ways to handle it. The method I've used here sounds pretty close to what you are saying. I do hold the lookup of refresh tokens on the server, but that could easily be swapped out to keep it stateless. There are some security concerns around refresh tokens though, so you'll want to make sure that your approach is secure enough for your application before you go for it.
Had absolutely no idea that axios had a built in method for calling a refresh token... Quite abit of useful info was covered in this one. Will definitely have to pull down the repo and go through it.
thanks for the video. What if i use not axios for requests, only graphql mutations and queries. I think in this case interceptor is not a solution. Is there any implementation specifically for the graphql and refresh token?
Great video! Have you considered expanding your go-to todo example to include subscriptions? Or maybe change to a chat app example hehe. Just pointing out subscriptions are treated as second class. Another idea: webRTC? Either way thanks for this very insightful video!
Oh, subscriptions are definitely not second class to me. I'm a huge fan of all things pub/sub, GraphQL subscriptions, Firebase, etc. all of that. I did end up turning a todo app into a chat app in a recent video, FWIW. Maybe that's what you were alluding to?
After going through this tutorial a dozen times (amazing btw) I think I finally grasped how the GUID in the refresh token becomes the marker for the user name. That part was really tricky. refreshTokens[token.data] = name. Should we also use two different secrets for the Refresh Token and the Auth Token?
I got in a refresh loop but realized that the map refreshtokens was lost on restart so I added a response that if refreshTokens didn't contain user then return null. This was a really rewarding project 🤙
What happens if the client initiates parallel requests? (for example, when somebody opens a modal, this modal needs data from backend to fill 5 dropdowns). 5 requests start to fly out, just suppose that the 3rd, 4th, 5th come back with error 401, token expired. Will axios handle this situation correctly? Calls the refresh endpoint, then retries for these 3 endpoints again with the current and valid access token? I'm just courious because some weeks ago I encountered this issue inside Angular interceptor. Rxjs switchMap and the semaphor principle handled this situation correctly. Do you have experiences with this situation with axios?
It's unlikely that the code as-is will block the four requests that follow after the first one fails. My hunch is that you'll get five 401s, that this will cause five subsequent refreshes, five token updates and five more requests at the very least. There might be some mitigation by the JWT the second time around being the same as the first after subsequent refreshes. But that would probably just help with the React update cycle. FWIW, I think the primary issue here isn't with this patter per-se but more in making five simultaneous calls in the first place. You should put a GraphQL aggregation server in the middle there and then make one request with all five queries.
@@ATTI0822 Yeah, the code on this one was about two days to write, which is unusually bad. Lots of stuff around CORS and response codes. Once I got it running it was pretty quick, but ... sheesh... sometimes. Fortunately, it's the kind of thing you get right once and after that you're usually (fingers crossed) pretty set.
off topic question: Do you recommend Happy Valley? I'm looking at buying a house and it seems like you get more for your money over there, but I have lived on the west side for years. Really need like 6 bedrooms...
We really enjoy it here. I used to work in the west side (at Nike) and I find that Happy Valley feels more "lived in" and less "cookie cutter" than the west side. IMHO. Six bedrooms is a lot, but there are definitely houses around here that are that big.
@@jherr It's not ideal, but im going to be house poor to take care of a couple family members. From the pictures of happy valley I have seen, I agree. I'm just worried about amenities and such. I like good food, which is why I love in portland to begin with!
@@boot-strapper The amenities are improving. We have already some good restaurants and that's definitely been improving since we moved here. If we want to go out for a good meal all of SE Portland and all its restaurants are just over the hill. There are great spots in Sellwood, Division, Hawthorne, as well as Oregon City if you go south a little. If you want to chat more interactively about it you can hit me up on DMs on my Discord server, or use Twitter DM. I'd be happy to meet up for lunch or whatever.
With GraphQL you check permissions within the resolver to make sure your the current user has access to that particular resolver, or to reduce the data returned from the resolver to just the data for that user.
@@jherr i create a is-logged-in mutation, that verify the refresh token cookie and return the user. it´s a valuable way or there is a better approach? My goal is make the frontend know that the user is logged in without store the data for example in local store.
@@denilsoncosta9837 I don't think there is any extra data leak from just returning true or false if you are logged in or not and updating the refresh token.
@@jherr Just to confirm, even after closing the tab, the cookie from set-cookie header stays in browser storage, and using that we need to get a new jwt if we open the site in new tab. Am I right?
@@sleepingsaintz Not with the code currently as written, you'd have to try to do the refresh first to know if you have a refreshToken and if that fails then force the login.
Anyone knows why refreshtokens (with an s) is for? Doesn’t that go against the principal if we store tokens in a centralized database ? Edit: in this case it’s and mapped object/ js array but I’m guessing in production it’s a database
I was about to search for auth using graphql already and suddenly, a notification just poped up with this new video. :)
This is a great video. I wish I could have seen it a couple of months ago when I was trying to figure out how to do this. It's really tricky to get all the pieces to work together, especially the JWT token part. I'm glad you made this video. Thank you 👍
Hey great video as always, but one thing that I always concern is the vscode zoom. It's great bcs you zooming in the editor so we can see it better on smaller devices, but I think it could be zoomed out once so it won't too big and we can see some other codes. Thank youu!
Its just so much valuable information you share each time in most of your videos !!
Thank you Jack🙂
Great stuff as usual. Could you make a video on the new features of next.js version 12? Thanks
Awesome Jack,
Very simple, but powerful. All the best.!!
Thanks
Nice video jack! It will be nice to see with URQL than react-query
Great stuff. Thank you so much for breaking it down the way you did
I implemented JWT Authentication on my last project and I found a very useful guide about using two JWT token for implementing access and refresh token (with different secret) with the access token is stored only in memory and refresh token on the cookie. I found this approach really neat as I can keep my server stateless and authentication works across multiple servers. However, I would like to know what’s your recommendations on handling refresh token?
I think there are a lot of different ways to handle it. The method I've used here sounds pretty close to what you are saying. I do hold the lookup of refresh tokens on the server, but that could easily be swapped out to keep it stateless.
There are some security concerns around refresh tokens though, so you'll want to make sure that your approach is secure enough for your application before you go for it.
@@jherr Ok noted
Had absolutely no idea that axios had a built in method for calling a refresh token...
Quite abit of useful info was covered in this one. Will definitely have to pull down the repo and go through it.
Nice vid! Can you also use apollo client instead of axios? Is there any benefit to using apollo client or axios?
is saving the token in localstorage or session a bad practice ? I believe you are storing it global state. Enjoyed your video, keep it coming !
I don't think that's a problem.
Awesome tutorial,
It would be great if you could make a tutorial on how to implement an optimistic UI mechanism using only React hooks
Can you make a video comparing JWT and Sessions (redis)?
thanks for the video. What if i use not axios for requests, only graphql mutations and queries. I think in this case interceptor is not a solution. Is there any implementation specifically for the graphql and refresh token?
any chance this would be updated with Apollo-server 4?
Thanks anyway for your always awesome content.
Brilliant.Thank you!
Awesome Jack, Thanks alot
Great video! Have you considered expanding your go-to todo example to include subscriptions? Or maybe change to a chat app example hehe. Just pointing out subscriptions are treated as second class. Another idea: webRTC? Either way thanks for this very insightful video!
Oh, subscriptions are definitely not second class to me. I'm a huge fan of all things pub/sub, GraphQL subscriptions, Firebase, etc. all of that. I did end up turning a todo app into a chat app in a recent video, FWIW. Maybe that's what you were alluding to?
@@jherr what? yes! I tend to watch all your graphql and ts related videos. guess I missed one or two. can't wait to watch it. thanks!
After going through this tutorial a dozen times (amazing btw) I think I finally grasped how the GUID in the refresh token becomes the marker for the user name. That part was really tricky. refreshTokens[token.data] = name. Should we also use two different secrets for the Refresh Token and the Auth Token?
Yes!
I got in a refresh loop but realized that the map refreshtokens was lost on restart so I added a response that if refreshTokens didn't contain user then return null. This was a really rewarding project 🤙
What happens if the client initiates parallel requests? (for example, when somebody opens a modal, this modal needs data from backend to fill 5 dropdowns). 5 requests start to fly out, just suppose that the 3rd, 4th, 5th come back with error 401, token expired. Will axios handle this situation correctly? Calls the refresh endpoint, then retries for these 3 endpoints again with the current and valid access token? I'm just courious because some weeks ago I encountered this issue inside Angular interceptor. Rxjs switchMap and the semaphor principle handled this situation correctly. Do you have experiences with this situation with axios?
It's unlikely that the code as-is will block the four requests that follow after the first one fails. My hunch is that you'll get five 401s, that this will cause five subsequent refreshes, five token updates and five more requests at the very least.
There might be some mitigation by the JWT the second time around being the same as the first after subsequent refreshes. But that would probably just help with the React update cycle.
FWIW, I think the primary issue here isn't with this patter per-se but more in making five simultaneous calls in the first place. You should put a GraphQL aggregation server in the middle there and then make one request with all five queries.
@@jherr Yep I agree. Btw great video and explanation, not the easiest topic I'm sure 😅
@@ATTI0822 Yeah, the code on this one was about two days to write, which is unusually bad. Lots of stuff around CORS and response codes. Once I got it running it was pretty quick, but ... sheesh... sometimes. Fortunately, it's the kind of thing you get right once and after that you're usually (fingers crossed) pretty set.
off topic question: Do you recommend Happy Valley? I'm looking at buying a house and it seems like you get more for your money over there, but I have lived on the west side for years. Really need like 6 bedrooms...
We really enjoy it here. I used to work in the west side (at Nike) and I find that Happy Valley feels more "lived in" and less "cookie cutter" than the west side. IMHO. Six bedrooms is a lot, but there are definitely houses around here that are that big.
@@jherr It's not ideal, but im going to be house poor to take care of a couple family members. From the pictures of happy valley I have seen, I agree. I'm just worried about amenities and such. I like good food, which is why I love in portland to begin with!
@@boot-strapper The amenities are improving. We have already some good restaurants and that's definitely been improving since we moved here. If we want to go out for a good meal all of SE Portland and all its restaurants are just over the hill. There are great spots in Sellwood, Division, Hawthorne, as well as Oregon City if you go south a little. If you want to chat more interactively about it you can hit me up on DMs on my Discord server, or use Twitter DM. I'd be happy to meet up for lunch or whatever.
@@jherr How can I find your discord?
@@jherr Nevermind! I found it. I will hop on there one of these days
Increible tutorial, Te admiro. te ganaste un like
How would you deal with disadvantages like: caching(redis), rate limiting ?
Very nice video. With Apollo Client its possible to do the same with onErrorLink
great content as usual
Thanks!
Amazing video very helpful, i'd like to know, what's the way to implemente authorized routes in this workflow?
With GraphQL you check permissions within the resolver to make sure your the current user has access to that particular resolver, or to reduce the data returned from the resolver to just the data for that user.
@@jherr i create a is-logged-in mutation, that verify the refresh token cookie and return the user. it´s a valuable way or there is a better approach? My goal is make the frontend know that the user is logged in without store the data for example in local store.
@@denilsoncosta9837 I don't think there is any extra data leak from just returning true or false if you are logged in or not and updating the refresh token.
@@jherr thanks!
I appreciate that you want to make the code easily readable but it's way too zoomed in.
Thanks for the lesson!
Perfect...👍🎃
bravo!
I don't know, how you get those codes populated, like when you created a users files,or you skip some parts 😳
Why refreshing token when we can make the token live 20 hours ? Is it unsecure ?
Will the refresh token persisits if user closes the tab?
You’ll need to get a new JWT but the cookie should persist.
@@jherr Just to confirm, even after closing the tab, the cookie from set-cookie header stays in browser storage, and using that we need to get a new jwt if we open the site in new tab. Am I right?
@@sleepingsaintz Not with the code currently as written, you'd have to try to do the refresh first to know if you have a refreshToken and if that fails then force the login.
@@jherr thank you
Anyone knows why refreshtokens (with an s) is for? Doesn’t that go against the principal if we store tokens in a centralized database ? Edit: in this case it’s and mapped object/ js array but I’m guessing in production it’s a database
U r the best
sir how we can use graphql socketio express together
Websockets are just upgraded HTTP connections, so the authentication pattern should work the same pre-upgrade to websocket.
And Jack drops another one
The screen zoom in too much
No one else calls it J W T?
Great explanation but not really a speedrun.
Well, in comparison to some of the other JWT related videos I've seen which can run into hours... it's speed-ier.
@@jherr It is to speed for my little brain but thank your for the video.
Connan Obrien lol