MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More

In this project, we will create a MERN stack app with a React SPA frontend. The main focus is authentication, but you will learn how to create a full-featured API, manage state with Redux Toolkit, and more.
Linode/Akamai - Get $100 Free For 60 Days
linode.com/traversy
Code:
github.com/bradtraversy/mern-...
Blog Post - Part 1 (Backend):
www.traversymedia.com/blog/me...
Blog Post - Part 2 (Frontend):
www.traversymedia.com/blog/me...
12-Hour MERN Course:
www.traversymedia.com/mern-st...
Timestamps:
0:00 - Intro
2:58 - Linode Sponsor
4:18 - Getting Started
6:45 - Dependencies & Express Server
9:51 - Scripts & Nodemon
10:59 - .env File
12:52 - User Routes & Controller Setup
18:15 - Postman Workspace Setup
21:10 - Async Handler
22:37 - Custom Error Middleware
30:23 - User Controller Functions
33:14 - Connect To User Routes
37:20 - MongoDB Database Setup
44:50 - User Model
48:32 - Register User Endpoint
58:50 - Generate JWT & Save Cookie
1:06:29 - Auth User Endpoint
1:11:33 - Logout & Destroy Cookie
1:13:13 - Auth Protect Middleware
1:23:30 - Update User Profile Endpoint
1:28:11 - Starting The Frontend
1:34:15 - Concurrently Setup
1:37:43 - React Bootstrap Setup
1:40:00 - Header Component
1:42:30 - HomeScreen & Hero
1:44:54 - React Router Setup
1:53:21 - Login & Register Form UIs
2:05:47 - Redux Toolkit Setup
2:10:37 - Auth Slice
2:19:50 - API Slices
2:29:17 - Login Functionality
2:37:35 - React Toastify Setup
2:39:45 - Auth Header Links
2:44:01 - Logout Functionality
2:48:48 - Loader Component
2:51:52 - Register Functionality
2:57:39 - Start Profile
2:58:21 - PrivateRoute Component
3:02:50 - ProfileScreen Component
3:06:00 - Update Profile Functionality
3:11:15 - Prepare For Production
3:16:43 - Create A Linode/Server
3:18:32 - SSH Into Server & Provision
3:22:44 - Clone Files On To Server
3:28:07 - PM2 Setup
3:30:45 - NGINX Setup

[@TraversyMedia]

I mention it in the video, but I know people are going to ask "why not use Next.js"? Imo I think people should first learn how to build SPAs before moving to SSR-based frameworks. I think it gives them a lot of good foundational knowledge in React. Once they gain that, then move on to SSR (Next.js, Remix, etc).

[@zunnoorainrafi5985]

This tutorial is nice but the way you did authentication in your project of Support ticket System in React front to back course on udemy is more easy then this .

[@alwaysgrowww]

Yeah I thought the same "why not nextjs" but without react there is no next

[@mohamedjaffir2776]

@@zunnoorainrafi5985 I’m also feel the same, support ticket method is much easier than above method

[@vuelancer]

​@@mohamedjaffir2776 what's that? Can u explain little bit?

[@atanumojumdar]

Are you gonna create a nextjs tutorial in near future?

[@christostsm5795]

Brad, 4 years after i got my first dev job because of you, i am still here and i will forever be, wishing you and your family all the best

[@blackboxbs8642]

why dont you donate him some money?

[@TannerBarcelos]

Almost 3 years into my career and still love coming back to videos / tutorials like there. You are very senior and have lots of knowledge, and I always learn something new / remember things I forgot / don't use much these days (due to different work projects). Another solid, well structured video! Thanks Brad, hope you are doing good with your mental and physical health - that burnout was very real.

[@LoveEachDay94]

I’ve been working through your JavaScript course side by side with my college work and it’s so frighten useful. Such a huge bang for your buck.

[@Answerx32]

Brad, you are such a legend. Thanks for uploading this.

[@EarlLewis]

Love the way you approach things and build things up piece by piece, so it's easy to follow how an app develops over time. Thank you!

[@wingmanup7368]

Thanks Brad, because of your helpful tutorials Ive been able to learn full stack web development and I am currently in the process of starting a business!

[@rabahalishah5124]

One of the most soothing tutorial I have ever seen. No confusion just straightforward. The guide on web is amazing

[@blue_berry_pie64]

Thank Brad so much for this mearn auth video, I am learning backend nodejs and express and still need to solidify the knowledge in backend mern.

[@Amar11115]

Grateful for this Project. I am learning a lot from you. Thanks!

[@JahidHasan-zl7om]

Thats awesome, You have summarized my 2 years lesson in 3 hours 🤩

[@bonchan4404]

Love from Philippines brad . I'm now working as a front end developer because of you and your videos .

[@ioanefaumui3556]

I was searching for this. Thank you once again!

[@nirmesh44]

This is best Explanation ever. specially how you have handles error by express-handler stuff at starting. 🙂

[@khalidelgazzar]

This is a production level tutorial. Thank you

[@gauravsharma3610]

Thankyou brad i got a job in Canada, i am from India. Only because of your this amazing KZbin channels, really a big thanks 👍. Keep doing you have lots of developer best wishes.

[@davidmachek6801]

After completing this course 7 times I confirm this is a certified Brad classic Edit: On a serious note, great course, Brad, keep it up.

[@surajjha5623]

3hr course 7 time within 1hr 🤣🤣 you are classic bro

[@ngonidzashesendama2471]

@@surajjha5623 🤣🤣🤣😂😂😂💀

[@cryptoboy1461]

Only 7 times? I completed this course 20 times.

[@blackboxbs8642]

@@cryptoboy1461 by building it 20 times or just watching?

[@Coolgardt]

Really amazing, thorough and helpful work. Thank you so much.

[@dharmeshpoladiya9047]

Most Awaited crash course

[@kamichikora6035]

This is why I buy your courses... Thank you Brad

[@lightifezulumba]

Brad Traversy, you giving me great updates regularly

[@Soulofjazzman]

Brad… legendary. Thank for for this!

[@SaptarshiMajumdar]

Great video Brad. Thanks

[@saman6199]

Thanks for amazing work Brad

[@user-wf4mo3mx2k]

finally the king is back please keep us updated with new mern stack videos

[@MuhammadUsman-gk7yx]

He is a master. I love the tutorials very up to date and easy wasy of teaching hard topics. Love from Pakistan

[@JohnDoe-to8vr]

Hey Brad, your tutorials are seriously amazing! Thanks to your guidance, I've learned coding with so much confidence. Your dedication to excellence is truly inspiring. Keep up the fantastic work, lighting the way for us aspiring developers! 🌟

[@numanakhtersiddiqui6573]

dk how this guy gets to know what i want to learn. Just in morning i was searching mern stack course, and in evening he posted😂

[@developwithindra]

Thank you for this video. Just finished that and learnt a lot.

[@philippearras8154]

Thank you Brad. I owe you a lot !

[@blueasbloo]

Thank you so much for the project!

[@sharksean6363]

Thank you Brad, I 've learned a lot from your video. you are a great man.

[@redaermich6615]

Thank you Mr. Brad, i learn from you a lot keep going bro.

[@ishmaelnganga4070]

This is really awesome, Brad.

[@user-zn7fm1su8x]

Thank you Brad, you're a wonderful teacher!

[@eyuelkassahun7053]

wel come mr am happy to get your latest videos.

[@mahmudabdi1363]

Favourite instructor❤

[@dbslqor]

This was such a good in depth tutorial of full stack software development covering a lot of necessary fundamentals. Thank you

[@ayushrawat129]

Amazing video, I don't really like or comment on any videos but it 100% deserved it. I got to learn a lot. I would like if you create part 2 where you, use this code to create another project :)

[@ahnafabir4157]

Thank you so much for the project video

[@nlburnr1]

Traversy Media changed my life

[@imenekrs2584]

Thank You so much brad ❤

[@mallikarjunsaravandi7428]

This video is extraordinary, thank you I was able to recall all methods..

[@marcosfitzsimons]

Thanks again brad :)

[@bencipherx]

This will be good, gotta watch asap

[@acs2777]

Wow my thought today was how can i work in mern and now you saved me 🎉❤

[@abubakarBello59]

Thank you, Brad.

[@nemanjadjoric8765]

Thank you Brad.

[@arikert3243]

I was looking for few days for a project that will implement the httponly cookie. You are certainly the best instructor for JS on the web.

[@nicmackenzie]

Great video Brad

[@lodashnotebook5390]

Great presentation and thank you! One question, did you skip the log out part for the header popup?

[@eymeen]

yeaaaa, exactly, that one course every one wants.

[@oriano-dev]

It was really great, although I didn't understand the redux part. I was mainly here for JWT so I still thank you !

[@eleah2665]

The King is back!

[@khalidelgazzar]

Great content. Thank you 😊

[@inspirationalquotes5840]

I just want to thank you even before watching the tutorial.

[@oliverp8006]

Great one. Would love to see something with next-auth and/or Clerk (compared) and Next 13

[@alihusain9033]

Thank you so much for the project Brad, Love from pakistan

[@punithraj5478]

A video on the chrome extension u use would be great 😃

[@dayasanjay302]

Excellent work... Bro thanks

[@miguelemmara5046]

Just finished this, coming from Laravel background where everything is out of the box, this journey was overwhelming! Nevertheless the tutorial was bomb!

[@pinyinxingming1821]

Brand you have always be a father to me I thank you so much 💖

[@tanaysingh5348]

can't praise you enough

[@aliksargsyan2782]

even I'm interested Artificial Intelligence but I always follow along Traversy Media's channel and contents )))

[@zachary.ramsumair]

Hi brad. Very happy to see u made a video on this. I see u just have one token. How much more secure will using access token and refresh tokens make it? And also Ben award says in memory is best. Anything to clear that will be be appreciated

[@tobibakz387]

Best Tutorial I've seen on KZbin about Redux RTK...Nice one bro, God bless you and keep up the good work. However, I have a Question/Help: How do I decode JWT when user login with your approach?.. Thank you

[@muhammadubaid6576]

Outstanding

[@filix6360]

you and jonas are really really great teachers, you put professors in to shame mode...

[@UrCloud2]

So helpful tips in making methods and using pre (save) or (validate) in mongodb schema. Do you have a crash course on making oracle database? 😊

[@GEGMr]

hey Brad! Awesome work! Is Udemy course updated with redux toolkit by any chance?

[@serhatzaferulgur4805]

Thank you bro.

[@ashkanahmadi]

Great video as always. Thanks. What happened to having guest content on your channel? Not continuing that anymore?

[@Racine14]

Thank you for this awesome video but I would like to know about the validation in backend side.

[@codingwitheric]

W MERN STACK. SHOUTOUT TO YOU TRAVERSY!!!

[@Salah-YT]

thank u so much

[@labialkosta261]

Thank you so much

[@jaymarpabayo]

This is f*cking amazing

[@NeedlessCushion]

I would love to see react-query in one of your projects.

[@chriscastillo8068]

Here to juice the algo. Love the content brother.

[@panosjapan7]

Two things MERN Authentication/Authorization tutorials should have: 1. Http-only cookies; no data saved on frontend 2. TypeScript

[@FindYourWhyInLife]

is it not used here?

[@zeroxff3166]

Yea he saved user data on local shortage.

[@sandip_kanzariya8476]

Do you have any videos on role base authentication and routing ?

[@sujoykrhaldar]

Hello brad, after this, can you make tutorial of same topic but this time use next 13 + prisma or mongoose . So it will give better understanding for diff tech stack ( without or with next-auth)

[@sesmaniraj7]

Thanks ❤

[@tabish__ali]

many thanks

[@daraksason3897]

Wow thank you

[@sayedabdulkarim7086]

we can also add a check , if enter the same email by other users. e.g "Email already in use."

[@josephwong2832]

your the greatest

[@Turbovv]

Hi Brad, a video on the MEVN stack would be nice too

[@shlomominkowicz65]

Yes indeed

[@maxbogdan9298]

Thanks

[@mahedihassanshawon4821]

Thanks a lot

[@FantasyInfo]

Thanks Man...

[@OutSput]

16:57 Thank you for your effort making these great tutorial videos - can please make a video about how to upload Images to Cloudinary (using REACT JS & Node JS ) .

[@dalziboy]

Can you make a tutorial for GSAP? PLEASE it would be very useful. Love your work, keep it up!

[@blutube9916]

greensock is easy compared to this tutorial. If you can follow this, then you can easily learn it yourself.

[@mahmoudayoub9168]

Hi Brad I am taking the js course on Oreilly and I noticed that it is missing some content that is available in the udemy version. are you planning to update it soon?

[@quamzgraphix9826]

We miss you Brad 😊hope you’re doing well?🎉

[@zazvuth9632]

Thank u for this but I have some problem which I can store the cookie in postman but in client I didn’t get it and I’m also use different port between server and client.

[@alisiddique9651]

Can you make a MERN project with OAuth providers as well?

[@ojingwachidiebere8487]

@TraversyMedia you are just so good. You have really helped me in my career. Please Can I get the ecommers project link?

[@michelchaghoury9629]

I would like to see an Angular beginner to advanced project please, can you considered it? and thanking for a new helpful tutorial

[@93kumite]

Hey Brad I've a question According to you, what are the fundamental concepts of Computer science a web developer ( let's say full stack developer) should know ? Thanks