JWT Authentication Node.js Tutorial with GraphQL and React 

I worked really hard on this one, I hope you enjoy! Timestamps: 1. Start setting up GraphQL server: 3:51 2. Register: 19:03 3. Login: 30:07 4. Auth middleware: 51:13 5. Refreshing tokens: 1:02:43 6. Revoking tokens: 1:16:21 7. React Apollo setup: 1:25:04 8. GraphQL Code Generator: 1:32:34 9. React Router: 1:40:52 10. Login Form: 1:57:45 11. Sending Access token in header: 2:08:20 12. Persist session after refresh: 2:16:23 13. Handling expired tokens: 2:22:00 14. Fetch current user: 2:36:32 15. Logout: 2:53:13 16. Scope Refresh token: 3:00:04

this gave me 5 years of experience in 3 hours, highly recommended.

0:00 Intro 4:02 Setup TypeOrm 9:32 Setup GraphQL Server with Express and Apollo Server 15:21 Setup TypeGraphQL (resolvers and schemas) 19:03 Create Register mutation 21:00 Define User entity schema 23:19 Create Register functionality with password hashing 26:13 Create query to get all Users 30:12 Create Login mutation 34:30 Return access token 38:40 Return refresh token in cookie (includes creating Apollo Server context) 50:57 Implement protected routes with resolver middleware (verify access token) 1:01:34 Recap access token 1:02:43 Implement refresh token endpoint and verify refresh token and return new access token if needed 1:11:01 Recap refresh token 1:13:29 Generate new refresh token whenever access token is refreshed 1:16:20 Revoke refresh token 1:25:00 Begin React with Typescript 1:25:50 Setup Apollo Boost 1:32:28 Setup GraphQL Code Generator 1:40:50 Setup React Router 1:43:50 Create Register page 1:53:57 Show all Users on Home page 1:57:47 Login User and fix CORS error 2:08:18 Send access token with requests 2:16:32 Use refresh token to get new access token 2:22:00 Handle expired access token (overview) 2:23:52 Replace Apollo Boost with Apollo Client 2:28:04 Check for expired access token using apollo-link-token-refresh and jwt-decode 2:38:13 Fetch User to display in app 2:42:56 Create Header component 2:47:23 Make Login return User and store in Apollo cache 2:53:18 Logout functionality 3:01:58 Amend cookie path to only send to refresh token endpoint

Dude , u saved my job 2 times now , one with how to create tables dynamically and this , u are the man...

You could've sold this as a course and became a millionaire. Modern JWT auth (with access/refresh tokens) screencasts are what everyone has been waiting for forever. Thanks Ben!

It’s now 2 years ago, and still having benefits of this valuable tutorial! Really appreciate it , thank you very much man you saved me!

This is pure gold Ben. Really appreciate it, better than a udemy course and you provide this for free. Love the tech stack

anyone coming after finishing that 14 hour tutorial of hyperbeast stack. I missed jwt in that. and ben has already created a video on that. awesome.

Been waiting for this since you first planned on making this course! Typescript with Postgres GraphQL and JWT, yes please! Definitely setting some time aside this weekend to build the project, thanks!

No clue why you only have 279K subs. Thanks for you vids and sharing your knowledge, much appreciated

This is ASMR for senior-devs

I'll be honest I haven't finished this video yet. About half way through at the moment (never touched node/graphql). I am very impressed. I could never do this with what seems to be no cuts between things. You just seem to be coding this straight for 3 hours without a break. I don't think I could do this and I have been developing for 10 years. Yet only recently with react and never backend (only just started backend about 6 months ago). I was purely front end and more marketing style sites so html/css/jquery. I have expanded drastically over the last 3 years to react now python. I am trying to learn as much as possible and your videos are an inspiration of what I would love to be come. Keep it up. So far even though it is in node it has helped give me ideas on how to properly persist logins and maintain as much security as possible.

54:34 authentication is checking *who* you are you claim to be, authorization is *granting access* to resources based on who you are

powered through your tutorial, it's now 2:30 am and I'll go to bed with a smile on my face. Thanks, Ben, for doing this!

For anyone facing issue with TokenRefreshLink and Argument of type '(ApolloLink | RestLink)[]' is not assignable to parameter of type 'ApolloLink[]' just update your package.json file with "apollo-link-token-refresh": "^0.2.6", great one Ben! Thank you!

I wanted to migrate to GraphQL since 2017. After watching this tutorial you made me do that! Thanks!

Great Tutorial! Anyone following along with this having issues with porting from apollo-boost to apollo client make sure you are importing apollo client 3.x+ instead of whats listed on the migration page import { ApolloClient, InMemoryCache, HttpLink, ApolloLink,Observable, ApolloProvider} from '@apollo/client'; import { onError } from '@apollo/client/link/error';

I am happy we can finally see the face of Ben since couple of videos he don’t has the microphone in front of him I like to look at his facial expression he is so focused and I like theses videos a lot !!!!

The most enjoyable three hours of all watching RU-vid. Thank you.

I stayed till the end. Heck I watched it twice. Exactly what I was searching for. Thanks Ben.

And I was wondering where was Ben the whole week... Perfect!

really impressed with this tutorial. I learnt graphQL just to go throught this and it was all worth it

Huge thanks, Ben! I'm learning typescript + Graphql + typeorm, because I'm leaving the MERN stack for a strongly-typed experience. This video is so condensed and precise! Hats off + good luck with dogehouse!!

I LOVE THIS VIDEO!! Thanks so much for posting such a modern and informative tutorial for these technologies. I have been wanting to learn typescript and graphql for some time and I wanted to find someone who taught it with modern es6. Definitely will recommend to others.

Man, 3hrs is a looong video. However, this topic is so important to me I'm going to work through now. Where's the donate button?

Hi Ben, would just like to say thank you very much for this tutorial. You go much deeper into these topics than most youtubers I've seen on this platform, so I'm really grateful for running into your tutorials. Keep it up, and all the best. 👍

Thank you. This is the first tutorial/educational video in a while that I have not set to 1.5x speed. Infact, I will need to watch a couple of times. Thank you posting intermediate-advanced content. I feel like I go from hello world examples which teach you nothing to reading man pages or RFC's, which again, you learn nothing because the material is so technical.

Always amazing thank you so much for this indepth on JWT. Highly appreciated.

i dont know why but ben face looks like he is about to start laughing at any moment xD top content, thanks Ben

Awesome. Got even better when I started using VS remote-containers on windows machine.

Well done my friend. I haven't watched it yet, but just for the topics I can tell that its gonna help a lot of people.

Great video. The one thing that's missing is how to setup subscriptions and how to handle refresh/access tokens with subscription websockets, which is somewhat non-trivial. Took me a while to figure that out myself.

This is just... fantastic! I mean, this is the kind of tutorials I've been looking for, for months. I don't know shit about typeScript though, maybe it's time to sink in! Thank you! Subscribed.

Brilliant! I could go on and on, but i wanna get onto more of your videos :D

This was great, thanks a lot! Just finished the whole thing to help with a project, I learnt a lot and I actually think I like using react now, and also enjoy/appreciate web development a lot more.

Awesome job - this is next level youtube content creation! Even my 5-10 minute coding videos are not this good.

I finished this after the 14 hours video, and it's so much easier!

Amazing video! Learned a lot from it in general. Would be cool if you could make a follow-up tutorial with this on how to setup a subscription.

Thank you Ben. Appreciate the patience and kindness in sharing this. More power man :)

I could listen to you say cookie all day long

This is going to come in handy with Hasura. Thank you, Ben!!!

Great tutorial. I followed along and created the application. Really helped me to get my hands on Typescript environment.

Legendary tutorial Ben! Thanks a lot and I learnt a lot from you. Keep up the good work.

Great Video! Thank you so much for spending the time to put this together. Well worth the 3 hour watch

Thanks man! This was really helpful for me to understand the flow and differences between accessToken and how to use the refreshToken to get a new token... thanks!

I wonder whether it's still available for XSS/CRSX attack? What if the attacker call /refresh_token to get JWT token?

This was an incredible tutorial. Thank you so much, I hope you are making 150k as a senior somewhere!

installing postgres for Mac users you need brew: install postgres initdb databaseName Run it in the background: pg_ctl -D databaseName -l logfile start run it in the foreground: postgres -D databaseName

awesome, I really learnt a lot. the issue is the link for migration guide is not working, so, I had to figure it out myself, other than that everything is just great, thank you so much, really learnt a lot about graphql

Thank you Ben for sharing your knowledge. You explain things perfectly.

3 hours of tutoria! my respect man, chapeau! thanks

this is amazing Ben. thnx soooo much for this video. i'd really love if you make a 2nd part deploying this in Heroku.

Feels like Spring just better 👍😀

maybe a vid on how to throw graphQL on top of redis or redis-json? for using redis for beyond cacheing? Like in my use case, redis is where I store data analysis from my flask app with python for access by the my web back and frontend

Thank you. Hoping for more 3-hour course like this in the future.

was waiting for this one, didnt think it would be this long though :D

Thank you so much. Superb tutorial. Liked and subscribed. Please make more and more tutorials about advanced topics.

The greatest tutorial I've ever seen! Perfect!

you are the coolest ben awad i have ever seen

thank you, I finally understand how refresh token works. still had confusion how its more secure, since anyone can steal it and access the system.

Thanks a loooot Ben, hope your channel reaches heights

If I could give this video a 100 likes. Thanks Ben, this tutorial is mind blowing.

BEN I CANNOT EXPRESS HOW MUCH I LOVE YOU, OH MAN, YOU'VE HELPED ME SO MUCH you probably won't see this but you're amazing

47:05 I usually just run >Typescript Restart TS server

Really appreciate the effort you put into this.

Awesome video! It would be extremely helpful if there were time stamps possibly organized as the contents in the intro of the video.

Very nice Ben :) I enjoyed all 3 hours of your session! How long did it take to shoot this?

I leaned graphql, typeorm and jsonwebtoken just watching this video.

Great video, would love to see another one with mongoose and jwt

Hi Ben, awesome tutorial! Thank you! One minor "change"; my version of sequelize ("sequelize": "^5.21.5") doesn't respond to: User.findOne({id: payload.userId}) in refresh token function... so I did it this way and it worked: User.findOne({ where: {id: payload.userId}}) I hope it will help someone... Once again, great tut!

If you installed postgres using brew and get the following error : "error: role "postgres" does not exist" Run "/usr/local/opt/postgres/bin/createuser -s postgres" to solve that

So complicated but interesting video, thank you!

I love this guide Ben. Thank you for making it.

Fabulous Work Ben!! Always an admirer. Great Job too.

So its finally uploaded. Great

excellent jwt auth method. thank you very much. :)

duuude, please keep up... you are awesome... thank you sooo much... greetings from Brazil

Thanks Ben. you are my hero :)

Why can't we set an auth-token cookie right away instead of a refresh-token cookie? Because someone with the refresh token also has access to the auth-token, or am i wrong? And thanks a lot for the video, it helped me a lot with jwts

@24:40 you should generate a different salt for each user, use bryptjs built in function for that

This looks awesome! But it would be really great, if you could sum up the video in a written version. This would work much better as a reference when building other apps then skipping through the video. Although sharing the code was very helpful, too.

A very good tutorial. Thank you @Ben Awad!

I guess I'm missing something. If the whole reason of storing the refresh token in cookies is due to storing it in local storage is prone to XSS attacks, then what prevents an attacker to call the refresh token enpoint and get the access token in the same way your app does it?

You might as well also have the token version number inside the access_token, not just the refresh_token alone, to increase security

I’m halfway through the video and I honestly still don’t get the benefits of graphql… maybe someone can tell me what their experience is in real world projects. By the way great video, Ben, it’s much appreciated!

Hi Ben, just wanted to say great tutorial and you hard work is very much appreciated with such a quality content! Keep it up! Just quick question though: Are you planning on doing a tutorial alike this one for Vue js somewhere in the future?

Hey Ben, is it possible for a hacker to use refresh_token to get a access_token and spoof a malicious request(CSRF)? I read the article "The Ultimate Guide to handling JWTs on frontend clients", but I don't think store refresh_token as cookie could prevent CSRF.

Liked before watching. Thank you Ben

Thanks Ben, what approach do you suggest for doing this with a REST API?

A clean implementation of JWT🔥

If you are seeing this Ben, I have learned a lot through your videos, keep up the great work! I am encountering an error, has anybody run into this? Ran a search of the comments and couldn't really find an answer. ` Type 'TokenRefreshLink' is not assignable to type 'ApolloLink'. Types of property 'split' are incompatible. ` Thanks in advance

Hey Ben, thank you so much for uploading this tutorial. It's pragmatic and concise. Do you have a donation link? I'd love to buy you a coffee/tea. Keep up the great work mate!

I would suggest only putting the cookie parser on the routes that need it and not "always put your middleware first"

1:13:32 refreshing the refresh token may not be a good idea because of security reasons, since it is supussed that you could only get a new refresh token if you sign in with your actual credentials. tho, it may be a good idea only if the user can use a single refresh token at time I think..

Just a small note, if you are using "HS256" (the current default) your key MUST be at least 32 bytes, in other words, it should be at least 32 characters

Thanks for putting up the code as well as spending the time to make this video! Always putting out quality!

Such a great channel - thanks for all of your work. Regarding authentication, I’m curious your thoughts on auth as a service, specifically Auth0. Would love to see a video if you think it’s compelling enough. Thanks again!

For people who prefer npm, you can just do `ncu` to see updates, and `ncu -u` to update them all. (You need to install www.npmjs.com/package/npm-check-updates)

Superb Ben!

Big like for you! It really helped me