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
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!
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'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.
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!
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 !!!!
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';
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.
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.
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 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.
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.
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
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!
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.
@@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.
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
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
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
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..
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
Hi, didnt understand the part from 1:15:00 with the "refresh the refreshToken". Every request to the "/refresh_token" will create a new refreshToken along with the accessToken ? Thank you for the tut by the way. Watched it like 100 times.
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.
Would it me more secure, to increment the refresh token version by a random number to revoke it? If it is only incremented by one, an attacker could possibly regenerate a valid token manually.
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
Your video was very good, it helped me a lot, but for subscriptions the token is not updated, not even when logging in the subscriptions do not work, I have to pass the token in the headers, but when the token is refreshed the header of the subscriptions continues with the old token. What should be done in this case?
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.
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 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 😆
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 😂
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
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 👍🏽
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.
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.
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.
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
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 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 !!!!
I wanted to migrate to GraphQL since 2017. After watching this tutorial you made me do that! Thanks!
welcome!
really impressed with this tutorial. I learnt graphQL just to go throught this and it was all worth it
I stayed till the end. Heck I watched it twice. Exactly what I was searching for.
Thanks Ben.
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';
This is ASMR for senior-devs
And I was wondering where was Ben the whole week...
Perfect!
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.
The most enjoyable three hours of all watching UA-cam.
Thank you.
I finished this after the 14 hours video, and it's so much easier!
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.
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. 👍
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.
Awesome. Got even better when I started using VS remote-containers on windows machine.
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.
Always amazing thank you so much for this indepth on JWT. Highly appreciated.
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.
Brilliant! I could go on and on, but i wanna get onto more of your videos :D
i dont know why but ben face looks like he is about to start laughing at any moment xD top content, thanks Ben
Feels like Spring just better 👍😀
you are the coolest ben awad i have ever seen
Awesome job - this is next level youtube content creation! Even my 5-10 minute coding videos are not this good.
Thank you Ben. Appreciate the patience and kindness in sharing this. More power man :)
The greatest tutorial I've ever seen!
Perfect!
Legendary tutorial Ben! Thanks a lot and I learnt a lot from you. Keep up the good work.
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
Great Video! Thank you so much for spending the time to put this together. Well worth the 3 hour watch
Great tutorial. I followed along and created the application. Really helped me to get my hands on Typescript environment.
3 hours of tutoria! my respect man, chapeau! thanks
Thanks a loooot Ben, hope your channel reaches heights
thanks!
So its finally uploaded. Great
was waiting for this one, didnt think it would be this long though :D
This was an incredible tutorial. Thank you so much, I hope you are making 150k as a senior somewhere!
Really appreciate the effort you put into this.
Thank you Ben for sharing your knowledge. You explain things perfectly.
I could listen to you say cookie all day long
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!?!
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!
47:05 I usually just run >Typescript Restart TS server
If I could give this video a 100 likes. Thanks Ben, this tutorial is mind blowing.
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.
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 🙏🏾🙏🏾
Thanks Ben. you are my hero :)
Liked before watching. Thank you Ben
Fabulous Work Ben!! Always an admirer. Great Job too.
Thank you so much. Superb tutorial. Liked and subscribed. Please make more and more tutorials about advanced topics.
I love this guide Ben. Thank you for making it.
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
duuude, please keep up... you are awesome... thank you sooo much... greetings from Brazil
A very good tutorial.
Thank you @Ben Awad!
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.
So complicated but interesting video, thank you!
Superb Ben!
Excellent tutorial Ben. Cheers
1:21:02
in mongodb its
async RevokeRefreshTokensForUser(userId: number) {
UserModel.updateOne(
{ _id: userId },
{
$set: {
tokensVersion: { $inc: 1 },
},
}
);
return true
}
excellent jwt auth method. thank you very much. :)
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 video, would love to see another one with mongoose and jwt
24:00 What's the point of using a salt if you don't store a different salt per user?
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
@24:40 you should generate a different salt for each user, use bryptjs built in function for that
AWESOME stuff, Ben
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 ben! have a nice day
Thanks Ben, what approach do you suggest for doing this with a REST API?
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..
I wonder whether it's still available for XSS/CRSX attack? What if the attacker call /refresh_token to get JWT token?
Thanks, Ben for this!
Big like for you! It really helped me
2:04:00 Why use cors package when you can pass the exact same object to apolloservers cors option?
apolloserver cors only applies to that route, I like to set the cors for all routes
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.
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
Hi, didnt understand the part from 1:15:00 with the "refresh the refreshToken". Every request to the "/refresh_token" will create a new refreshToken along with the accessToken ? Thank you for the tut by the way. Watched it like 100 times.
> Every request to the "/refresh_token" will create a new refreshToken along with the accessToken
yes
hell yeah! A meaty one. Love it!
Great stuff I really enjoyed it.
Keep going :)
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
Would it me more secure, to increment the refresh token version by a random number to revoke it? If it is only incremented by one, an attacker could possibly regenerate a valid token manually.
How would they get a secret stored in an env variable to generate a valid token?
@@Quenjii The secret was in this example not very long. So a brute force attack might be possible.
@@PsychoGod9898 Please... If you're using this kind of secret in a production app, you deserve to be hacked.
@@PsychoGod9898 if an attacker get's your jwt secret, they can just create access tokens for themselves
you'll want to hide your secret
You might as well also have the token version number inside the access_token, not just the refresh_token alone, to increase security
Very nice Ben :) I enjoyed all 3 hours of your session! How long did it take to shoot this?
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
how do you handle multiple tabs?
Great stuff, with richer details
Your video was very good, it helped me a lot, but for subscriptions the token is not updated, not even when logging in the subscriptions do not work, I have to pass the token in the headers, but when the token is refreshed the header of the subscriptions continues with the old token. What should be done in this case?
I would suggest only putting the cookie parser on the routes that need it and not "always put your middleware first"