JWT Authentication Node.js Tutorial with GraphQL and React

Links from video:

​
----
#benawad

[bawad]

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

[JoeMarGonzales]

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

[Daddytronics]

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

[diegogimbernat]

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

[Anonymose]

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!

[CoryTheSimmons]

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!

[coherentpanda]

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!

[adamreinmuller]

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

[anticom]

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

[yashojha]

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.

[dustinstone]

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.

[brechtve]

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

[robertnovo]

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!

[antoniwrobel]

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!

[sanzhar.danybayev]

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

[SushilSingh]

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

[skylersel]

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

[kotel]

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

[andrewribeiro]

The most enjoyable three hours of all watching YouTube.

Thank you.

[Luxcium]

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 !!!!