JWT Authentication Node.js Tutorial with GraphQL and React
2019 ж. 18 Қыр.
260 098 Рет қаралды
Learn how to add JWT authentication to your project with this fullstack tutorial using Node.js, Typescript, GraphQL, React, and PostgreSQL.
Code: github.com/benawad/jwt-auth-e...
Links from video:
www.apollographql.com/docs/re...
github.com/newsiberian/apollo...
VSCode settings including snippets: gist.github.com/benawad/1e9dd...
Next.js version: • Next.js SSR Refresh To...
----
Follow me online: voidpet.com/benawad
#benawad
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
Are you kidding me! This is like Christmas!!
Is really a lot better when you make projects from scratch like this! Looking forward for more. Thank you so much!
It's cool. Thank you for sharing your top knowledge with a project from scratch.
Awesome bro, awesome
Wow Ben - your hard work is greatly appreciated - thank you.
this gave me 5 years of experience in 3 hours, highly recommended.
@Joe-Mar Gonzales can you share your Github repo for this project plz?
It gave me 5 years of exp in 1.5 hours cause I watced it in 2x playback speed 😆
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
Appreciated, Thanks mate 👍
thanks sir you safe my time and also thanks for Mr Ben for tutorial much appreciated
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!
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. 👍
This is pure gold Ben. Really appreciate it, better than a udemy course and you provide this for free. Love the tech stack
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!
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.
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.
Dude , u saved my job 2 times now , one with how to create tables dynamically and this , u are the man...
Delete this comment, ur boss might be lurkin around
@@plusk343 Its stack overflow or this. Lets be real, we all all developers here 😂
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!
Always amazing thank you so much for this indepth on JWT. Highly appreciated.
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!
No clue why you only have 279K subs. Thanks for you vids and sharing your knowledge, much appreciated
Legendary tutorial Ben! Thanks a lot and I learnt a lot from you. Keep up the good work.
Thank you Ben. Appreciate the patience and kindness in sharing this. More power man :)
Great tutorial. I followed along and created the application. Really helped me to get my hands on Typescript environment.
The most enjoyable three hours of all watching KZhead. Thank you.
Great Video! Thank you so much for spending the time to put this together. Well worth the 3 hour watch
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.
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.
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.
This was an incredible tutorial. Thank you so much, I hope you are making 150k as a senior somewhere!
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!
Totally agree! All this integrated together in one tutorial.
he is the best one. he shared his knowledge to us for free for a better future
@@fadilnatakusumah195 I reckon a donation for his valuable work would be an even better future. 😜
Ben is the GOAT
Awesome. Got even better when I started using VS remote-containers on windows machine.
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 !!!!
Thank you Ben for sharing your knowledge. You explain things perfectly.
I love this guide Ben. Thank you for making it.
Brilliant! I could go on and on, but i wanna get onto more of your videos :D
really impressed with this tutorial. I learnt graphQL just to go throught this and it was all worth it
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.
I wanted to migrate to GraphQL since 2017. After watching this tutorial you made me do that! Thanks!
welcome!
The greatest tutorial I've ever seen! Perfect!
54:34 authentication is checking *who* you are you claim to be, authorization is *granting access* to resources based on who you are
I was about to post the same and found your comment 👍🏽
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!
Fabulous Work Ben!! Always an admirer. Great Job too.
Awesome job - this is next level youtube content creation! Even my 5-10 minute coding videos are not this good.
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.
was waiting for this one, didnt think it would be this long though :D
3 hours of tutoria! my respect man, chapeau! thanks
Liked before watching. Thank you Ben
A very good tutorial. Thank you @Ben Awad!
Really appreciate the effort you put into this.
This is ASMR for senior-devs
this is amazing Ben. thnx soooo much for this video. i'd really love if you make a 2nd part deploying this in Heroku.
This is going to come in handy with Hasura. Thank you, Ben!!!
Hi Paul - I've often wondered where Hasura best comes into play here. How are you planning to use it with the tech used by Ben in this video? Are you going to use Apollo Server to sit in front of your Hasura endpoint? Much appreciated
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.
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';
you are the coolest ben awad i have ever seen
Thank you so much. Superb tutorial. Liked and subscribed. Please make more and more tutorials about advanced topics.
I finished this after the 14 hours video, and it's so much easier!
So complicated but interesting video, thank you!
Feels like Spring just better 👍😀
So its finally uploaded. Great
Excellent tutorial Ben. Cheers
Thanks Ben. you are my hero :)
Great stuff I really enjoyed it. Keep going :)
A clean implementation of JWT🔥
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
Thanks a loooot Ben, hope your channel reaches heights
thanks!
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!
thank you! i have been debugging this thing for hours now! How did you know and reference of its fix?
Nevermind i found it on the issues at the github repository
@@sauer.voussoir exactly.
Awesome ben! have a nice day
Thanks, Ben for this!
Thank you! Awesome work.
duuude, please keep up... you are awesome... thank you sooo much... greetings from Brazil
Thank you. Hoping for more 3-hour course like this in the future.
what should me next 3-hour course be?
@@bawad How about redoing your typescript next.js graphql course as I don't think you used hooks the first time and the next.js examples have changed quite a bit since then? That would probably be only 1hour though.
been thinking about doing this
@@bawad It would be awesome to be able to apply this to next.js 🙏🏾🙏🏾
I could listen to you say cookie all day long
AWESOME stuff, Ben
hell yeah! A meaty one. Love it!
thank you Ben!
excellent jwt auth method. thank you very much. :)
Big like for you! It really helped me
Superb Ben!
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 I could give this video a 100 likes. Thanks Ben, this tutorial is mind blowing.
Thank you Ben
Thank you, Ben
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.
Wow. This was great. Thanks!
Great stuff, with richer details
Perfect ben!!!!
Thank you Ben !
Thanks a lot Ben!
Great video, would love to see another one with mongoose and jwt
Thank you for making this video, Ben. And also the one about how to store JWTs. But for the setup in the video seems like it is still vulnerable to xss or self-xss attacks. Attackers just need to call /refresh_token and then they can get a new access token right away. Is there something I misunderstood?
Awesome tutorial!
Thanks Ben 👏
Very nice Ben :) I enjoyed all 3 hours of your session! How long did it take to shoot this?
Thank you Ben. Really appreciate your valuable efforts in sharing your knowledge. Can you pls silence the key strokes :)
i dont know why but ben face looks like he is about to start laughing at any moment xD top content, thanks Ben
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?
No plans, I really like react
@@bawad Alright, thanks for your reply.
thanks a lot dude this was super usefull
Thank you so much. You are a life saver
Thank you. Great video! Helped me a lot!
That's simply awesome
thanks man
amazing af!
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!
Glad you liked it! You can donate to my Patreon: www.patreon.com/benawad or Paypal: paypal.me/freevultrmonth