JWT Authentication Node.js Tutorial with GraphQL and React
HTML-код
- Опубликовано: 16 окт 2024
- Learn how to add JWT authentication to your project with this fullstack tutorial using Node.js, Typescript, GraphQL, React, and PostgreSQL.
Code: github.com/ben...
Links from video:
www.apollograp...
github.com/new...
VSCode settings including snippets: gist.github.co...
Next.js version: • Next.js SSR Refresh To...
----
Follow me online: voidpet.com/be...
#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
This is pure gold Ben. Really appreciate it, better than a udemy course and you provide this for free. Love the tech stack
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!
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!
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 😂
No clue why you only have 279K subs. Thanks for you vids and sharing your knowledge, much appreciated
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.
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.
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!
I stayed till the end. Heck I watched it twice. Exactly what I was searching for.
Thanks Ben.
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
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. 👍
And I was wondering where was Ben the whole week...
Perfect!
I wanted to migrate to GraphQL since 2017. After watching this tutorial you made me do that! Thanks!
welcome!
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 👍🏽
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.
The most enjoyable three hours of all watching RUclips.
Thank you.
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 !!!!
really impressed with this tutorial. I learnt graphQL just to go throught this and it was all worth it
Always amazing thank you so much for this indepth on JWT. Highly appreciated.
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.
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.
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.
Awesome job - this is next level youtube content creation! Even my 5-10 minute coding videos are not this good.
Legendary tutorial Ben! Thanks a lot and I learnt a lot from you. Keep up the good work.
This is ASMR for senior-devs
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.
Thank you Ben. Appreciate the patience and kindness in sharing this. More power man :)
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?
www.patreon.com/benawad
@@CoryTheSimmons Thanks, would prefer a donate button though.
@@stevereid636 I also accept paypal: paypal.me/freevultrmonth
what a question, just add a resolver , create a mutation, run code gen, add the donate button and call the hook :D
@@toyflish What!?!
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';
Great Video! Thank you so much for spending the time to put this together. Well worth the 3 hour watch
was waiting for this one, didnt think it would be this long though :D
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!
Brilliant! I could go on and on, but i wanna get onto more of your videos :D
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.
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.
this is amazing Ben. thnx soooo much for this video. i'd really love if you make a 2nd part deploying this in Heroku.
Great tutorial. I followed along and created the application. Really helped me to get my hands on Typescript environment.
This was an incredible tutorial. Thank you so much, I hope you are making 150k as a senior somewhere!
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.
Thanks a loooot Ben, hope your channel reaches heights
thanks!
3 hours of tutoria! my respect man, chapeau! thanks
Thank you Ben for sharing your knowledge. You explain things perfectly.
Thank you so much. Superb tutorial. Liked and subscribed. Please make more and more tutorials about advanced topics.
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
you are the coolest ben awad i have ever seen
Fabulous Work Ben!! Always an admirer. Great Job too.
Very nice Ben :) I enjoyed all 3 hours of your session! How long did it take to shoot this?
If I could give this video a 100 likes. Thanks Ben, this tutorial is mind blowing.
The greatest tutorial I've ever seen!
Perfect!
I could listen to you say cookie all day long
I finished this after the 14 hours video, and it's so much easier!
Feels like Spring just better 👍😀
I love this guide Ben. Thank you for making it.
Really appreciate the effort you put into this.
duuude, please keep up... you are awesome... thank you sooo much... greetings from Brazil
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 what I am trying to solve, too. Was really hoping it was part of this excellent tutorial. Ben, I hope you can work this into you upcoming videos.
@@scottreed6083 The basics are that you have to pass your access token to the `connectionParams` option of your subscriptions-transport-ws client on the frontend. Then on the server when setting up apollo subscriptions you can pass an `onConnect` option with a function like `(params, socket, context) => return { accessToken: params.accessToken }` which makes your accessToken available in the graphql context under `connection.context.accessToken` where you can verify it.
Liked before watching. Thank you Ben
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 🙏🏾🙏🏾
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
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.
A very good tutorial.
Thank you @Ben Awad!
Thanks Ben, what approach do you suggest for doing this with a REST API?
I've been following this great video for a few days, doing it myself with a few variants (I'm not using graphQL at all). how would you think I should manage to keep the session valid analogously to apollo-link-token-refresh?
Thanks!
I stuck at the same spot like you. I was trying to implement this on to one of my MERN builds. But unable to do so. Not many good resources out there which goes through this topic.
I would use an error interceptor like Axios. I know it's old, but I guess others could find it relevant
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
A clean implementation of JWT🔥
Thanks Ben. you are my hero :)
So complicated but interesting video, thank you!
Excellent tutorial Ben. Cheers
Great video! Do you have any opinions about using sequelize and sequelize-typescript instead of TypeORM?
Hi Ben, first of all great practical content, just one question: is this still relevant with Node 14.16? Or in more in general in 2021
excellent jwt auth method. thank you very much. :)
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.
Awesome ben! have a nice day
Great video, would love to see another one with mongoose and jwt
So its finally uploaded. Great
Great stuff I really enjoyed it.
Keep going :)
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
Hi Ben, Thank you for this tutorial! I just have a question though, is it safe to store the access token in redux store?
Hello, great tutorial!
One thing to ask, is it a security vulnerability to store `access token` in a JavaScript variable. Like XSS?
Hi Ben. Nice tutorial. It's possible to include graphql on a existing rest api with express, typescript and typeorm? I will need to create another entity to use the type-graphql decorators or i can insert on my existing entities?
Hi Ben, What would you suggest now? Sessions vs JWT? I remember I saw your SuperTokens Video and then another one where you had announced that you did not think through the potential with JWT.
Anyway if possible please link to that video and a final recommendation Session vs JWT.
What are you using to enable autocomplete suggestions in your terminal? so slick!
fishshell.com/
Thanks, Ben for this!
Thanks for this!! I'd like to do a version of this with Redis. Would you save the token version and refresh token in Redis? Or how would you approach it? I basically want to avoid touching the PostgreDB when verifying credentials. Also could you ask for a new access token by running a query instead of hitting the endpoint /refresh-token? I'm trying to implement this by using Graphql only. Thanks Mr Ben!
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
Superb Ben!
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?
Great tutorial! You made this look easy. 😃 Keep up the good work!
Big like for you! It really helped me
Great video.
Currently having one issue.
How come is he using the acess token secret to verify the refresh token, since the refresh for is the only one stored in the cookie
@benawad Thanks for this, this is really well done 🙏 I’m wondering what your thoughts are on the API routes feature added in the latest next.js - would you consider moving all server code for a project like this into the next.js app folder, or would you prefer to still keep them as independent entities as in this example? cheers
I haven't tried the API routes in Next.js so I don't know for sure. But I'm guessing I would move the code into the next.js app
47:05 I usually just run >Typescript Restart TS server
Hi Ben, great explanation as always. I have one query, what if I just use the refresh token as only token for the routes authorization? What I mean is that cookies automatically get sent on each request to the server, So instead of setting authorization header explicitly I can use the cookie token to check if user is logged in and authorized for the operation or not. To secure the cookie we have already set httpOnly to true which disable javascript access we can also set the domain property to restrict the cookie to our server.
AWESOME stuff, Ben
Hi Ben, I was trying to understand how an authentication process could work and found your video. Thank's for sharing that and all the other videos with us, especially this one helped me a lot to understand the whole process. Thank's a lot!
Hopefully you can answer me one question. You are using a variable to store the access token in memory. Is there a reason why you are not using useContext of React to make it available in the whole application? A security reason or anything else?
I would use context but I wasn't sure how to change the value outside of a component