Тёмный

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

Traversy Media
Подписаться 2,2 млн
Просмотров 294 тыс.
50% 1

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

Наука

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 315   
@TraversyMedia
@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
@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
@alwaysgrowww Год назад
Yeah I thought the same "why not nextjs" but without react there is no next
@mohamedjaffir2776
@mohamedjaffir2776 Год назад
@@zunnoorainrafi5985 I’m also feel the same, support ticket method is much easier than above method
@vuelancer
@vuelancer Год назад
​@@mohamedjaffir2776 what's that? Can u explain little bit?
@atanumojumdar
@atanumojumdar Год назад
Are you gonna create a nextjs tutorial in near future?
@christostsm5795
@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
@blackboxbs8642 9 месяцев назад
why dont you donate him some money?
@saarza9991
@saarza9991 21 день назад
​@@blackboxbs8642 by buying jis courses you can support
@raymrash
@raymrash День назад
thanks for the appreciations
@raymrash
@raymrash День назад
thanks for the appreciations
@TannerBarcelos
@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.
@rabahalishah5124
@rabahalishah5124 10 месяцев назад
One of the most soothing tutorial I have ever seen. No confusion just straightforward. The guide on web is amazing
@EarlLewis
@EarlLewis 6 месяцев назад
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!
@Answerx32
@Answerx32 Год назад
Brad, you are such a legend. Thanks for uploading this.
@LoveEachDay94
@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.
@wingmanup7368
@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!
@davidmachek6801
@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
@surajjha5623 Год назад
3hr course 7 time within 1hr 🤣🤣 you are classic bro
@ngonidzashesendama2471
@ngonidzashesendama2471 Год назад
@@surajjha5623 🤣🤣🤣😂😂😂💀
@cryptoboy1461
@cryptoboy1461 Год назад
Only 7 times? I completed this course 20 times.
@blackboxbs8642
@blackboxbs8642 9 месяцев назад
@@cryptoboy1461 by building it 20 times or just watching?
@blue_berry_pie64
@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.
@JahidHasan-zl7om
@JahidHasan-zl7om Год назад
Thats awesome, You have summarized my 2 years lesson in 3 hours 🤩
@Amar11115
@Amar11115 Год назад
Grateful for this Project. I am learning a lot from you. Thanks!
@gauravsharma3610
@gauravsharma3610 Год назад
Thankyou brad i got a job in Canada, i am from India. Only because of your this amazing RU-vid channels, really a big thanks 👍. Keep doing you have lots of developer best wishes.
@ioanefaumui3556
@ioanefaumui3556 Год назад
I was searching for this. Thank you once again!
@bonchan4404
@bonchan4404 Год назад
Love from Philippines brad . I'm now working as a front end developer because of you and your videos .
@nirmesh44
@nirmesh44 Год назад
This is best Explanation ever. specially how you have handles error by express-handler stuff at starting. 🙂
@JohnDoe-to8vr
@JohnDoe-to8vr 2 месяца назад
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! 🌟
@CodeWithLu
@CodeWithLu Год назад
Brad Traversy, you giving me great updates regularly
@MuhammadUsman-gk7yx
@MuhammadUsman-gk7yx Год назад
He is a master. I love the tutorials very up to date and easy wasy of teaching hard topics. Love from Pakistan
@dbslqor
@dbslqor 11 месяцев назад
This was such a good in depth tutorial of full stack software development covering a lot of necessary fundamentals. Thank you
@dharmeshpoladiya9047
@dharmeshpoladiya9047 Год назад
Most Awaited crash course
@khalidelgazzar
@khalidelgazzar 11 месяцев назад
This is a production level tutorial. Thank you
@Coolgardt
@Coolgardt Год назад
Really amazing, thorough and helpful work. Thank you so much.
@kamichikora6035
@kamichikora6035 Год назад
This is why I buy your courses... Thank you Brad
@ishmaelnganga4070
@ishmaelnganga4070 Год назад
This is really awesome, Brad.
@user-wf4mo3mx2k
@user-wf4mo3mx2k Год назад
finally the king is back please keep us updated with new mern stack videos
@saman6199
@saman6199 Год назад
Thanks for amazing work Brad
@numanakhtersiddiqui6573
@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😂
@ayushrawat129
@ayushrawat129 11 месяцев назад
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 :)
@redaermich6615
@redaermich6615 Год назад
Thank you Mr. Brad, i learn from you a lot keep going bro.
@user-zn7fm1su8x
@user-zn7fm1su8x 2 месяца назад
Thank you Brad, you're a wonderful teacher!
@Soulofjazzman
@Soulofjazzman Год назад
Brad… legendary. Thank for for this!
@developwithindra
@developwithindra Год назад
Thank you for this video. Just finished that and learnt a lot.
@code_magpie
@code_magpie 28 дней назад
Out of all the others on RU-vid this was Amazingly Great. You and Dave Gray present difficult things look so easy. You should do this with TypeScript as soon as possible. My backend is in TypeScript and now converting it to JavaScript to implement the authentication you taught us here because there are some type issues like for req.user and few others. Please do this in TS. Thanks!
@SaptarshiMajumdar
@SaptarshiMajumdar 10 месяцев назад
Great video Brad. Thanks
@sharksean6363
@sharksean6363 8 месяцев назад
Thank you Brad, I 've learned a lot from your video. you are a great man.
@philippearras8154
@philippearras8154 Год назад
Thank you Brad. I owe you a lot !
@nicmackenzie
@nicmackenzie Год назад
Great video Brad
@nlburnr1
@nlburnr1 Год назад
Traversy Media changed my life
@eyuelkassahun7053
@eyuelkassahun7053 Год назад
wel come mr am happy to get your latest videos.
@blueasbloo
@blueasbloo Год назад
Thank you so much for the project!
@oliverp8006
@oliverp8006 Год назад
Great one. Would love to see something with next-auth and/or Clerk (compared) and Next 13
@mallikarjunsaravandi7428
@mallikarjunsaravandi7428 Год назад
This video is extraordinary, thank you I was able to recall all methods..
@mahmudabdi1363
@mahmudabdi1363 Год назад
Favourite instructor❤
@punithraj5478
@punithraj5478 Год назад
A video on the chrome extension u use would be great 😃
@lodashnotebook5390
@lodashnotebook5390 Год назад
Great presentation and thank you! One question, did you skip the log out part for the header popup?
@oriano-dev
@oriano-dev 11 месяцев назад
It was really great, although I didn't understand the redux part. I was mainly here for JWT so I still thank you !
@zachary.ramsumair
@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
@arikert3243
@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.
@marcosfitzsimons
@marcosfitzsimons Год назад
Thanks again brad :)
@eleah2665
@eleah2665 Год назад
The King is back!
@bencipherx
@bencipherx Год назад
This will be good, gotta watch asap
@ahnafabir4157
@ahnafabir4157 Год назад
Thank you so much for the project video
@imenekrs2584
@imenekrs2584 Год назад
Thank You so much brad ❤
@panosjapan7
@panosjapan7 Год назад
Two things MERN Authentication/Authorization tutorials should have: 1. Http-only cookies; no data saved on frontend 2. TypeScript
@FindYourWhyInLife
@FindYourWhyInLife 10 месяцев назад
is it not used here?
@zeroxff3166
@zeroxff3166 9 месяцев назад
Yea he saved user data on local shortage.
@khalidelgazzar
@khalidelgazzar Год назад
Great content. Thank you 😊
@UrCloud2
@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? 😊
@alihusain9033
@alihusain9033 Год назад
Thank you so much for the project Brad, Love from pakistan
@dayasanjay302
@dayasanjay302 6 месяцев назад
Excellent work... Bro thanks
@acs2777
@acs2777 Год назад
Wow my thought today was how can i work in mern and now you saved me 🎉❤
@tobibakz387
@tobibakz387 11 месяцев назад
Best Tutorial I've seen on RU-vid 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
@chriscastillo8068
@chriscastillo8068 Год назад
Here to juice the algo. Love the content brother.
@ashkanahmadi
@ashkanahmadi Год назад
Great video as always. Thanks. What happened to having guest content on your channel? Not continuing that anymore?
@aliksargsyan2782
@aliksargsyan2782 Год назад
even I'm interested Artificial Intelligence but I always follow along Traversy Media's channel and contents )))
@abubakarBello59
@abubakarBello59 Год назад
Thank you, Brad.
@filix6360
@filix6360 2 месяца назад
you and jonas are really really great teachers, you put professors in to shame mode...
@Racine14
@Racine14 Год назад
Thank you for this awesome video but I would like to know about the validation in backend side.
@Turbovv
@Turbovv Год назад
Hi Brad, a video on the MEVN stack would be nice too
@shlomominkowicz65
@shlomominkowicz65 Год назад
Yes indeed
@miguelemmara5046
@miguelemmara5046 Год назад
Just finished this, coming from Laravel background where everything is out of the box, this journey was overwhelming! Nevertheless the tutorial was bomb!
@nemanjadjoric8765
@nemanjadjoric8765 3 месяца назад
Thank you Brad.
@tanaysingh5348
@tanaysingh5348 Год назад
can't praise you enough
@codingwitheric
@codingwitheric Год назад
W MERN STACK. SHOUTOUT TO YOU TRAVERSY!!!
@eymeen
@eymeen Год назад
yeaaaa, exactly, that one course every one wants.
@GEGMr
@GEGMr 8 месяцев назад
hey Brad! Awesome work! Is Udemy course updated with redux toolkit by any chance?
@inspirationalquotes5840
@inspirationalquotes5840 2 месяца назад
I just want to thank you even before watching the tutorial.
@sujoykrhaldar
@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)
@dalziboy
@dalziboy Год назад
Can you make a tutorial for GSAP? PLEASE it would be very useful. Love your work, keep it up!
@blutube9916
@blutube9916 Год назад
greensock is easy compared to this tutorial. If you can follow this, then you can easily learn it yourself.
@NeedlessCushion
@NeedlessCushion Год назад
I would love to see react-query in one of your projects.
@sandip_kanzariya8476
@sandip_kanzariya8476 9 месяцев назад
Do you have any videos on role base authentication and routing ?
@sayedabdulkarim7086
@sayedabdulkarim7086 9 месяцев назад
we can also add a check , if enter the same email by other users. e.g "Email already in use."
@pinyinxingming1821
@pinyinxingming1821 3 месяца назад
Brand you have always be a father to me I thank you so much 💖
@ojingwachidiebere8487
@ojingwachidiebere8487 5 месяцев назад
@TraversyMedia you are just so good. You have really helped me in my career. Please Can I get the ecommers project link?
@mahmoudayoub9168
@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?
@merakli2022
@merakli2022 Год назад
Hi Brad, thank you for your time and effort making these great videos. I wonder why all tutorials use mongoose rather than native mongo db driver. Is mongoose really better? Thanks again.
@olowoniyidaniel
@olowoniyidaniel Год назад
Mongoose makes it easier
@OutSput
@OutSput 7 месяцев назад
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 ) .
@elhadiziat764
@elhadiziat764 Год назад
Have a question that concerned me for a long time; If someone choose to become a full stack developer; and decide to work for himself, online, maybe we call it freelancing or a contract job, my question is; can he do it alone? can you do the entire web development process alone? if yes, how? if not, how he can manage a small team? thank you for your videos.
@miladebrahimzade9674
@miladebrahimzade9674 Год назад
Hi brad. can you please create a video about state management and the tools that available? We are in hell especially with next 13 and lots of different options that out there
@ScriptRaccoon
@ScriptRaccoon Год назад
46:36 Notice that setting unique:true does not validate the emails to be unique. MongoDB has a doc page on this misconception.
@alisiddique9651
@alisiddique9651 Год назад
Can you make a MERN project with OAuth providers as well?
@joeprince7509
@joeprince7509 5 дней назад
Great tutorial as always Brad! I can't quite follow why the userID is stored in the jwt cookie with httpOnly AND in local storage. What is the reason it's also in local storage? I would think having the userID in the secure cookie would suffice, but maybe I'm not quite following why it's also in local storage. And depending on the answer to that, would Redux Persist be a more suitable option for storing that information instead? Additionally, is userID considered "sensitive" information in this case?
@akdrive1050
@akdrive1050 Год назад
Questions (updateUserProfile API): 1) Why check if user exists (findById) if its a protected API anyway? (auth Middleware does check if user exists by Id and returns a user if authenticated). 2) When changing the password, it doesn't seem like you hash the password with bcrypt, you save is directly from the body input, am I missing something?
@93kumite
@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
@quamzgraphix9826
@quamzgraphix9826 Год назад
We miss you Brad 😊hope you’re doing well?🎉
@hanesmitter1469
@hanesmitter1469 Год назад
Recently I have seen Nestjs become a thing, I'd wish to see a Nestjs crashcourse
@SZaferUlgur
@SZaferUlgur Год назад
Thank you bro.
@SuperFUTECH
@SuperFUTECH Год назад
is this the full courser or do we have to buy?
@muhammadubaid6576
@muhammadubaid6576 Год назад
Outstanding
@michelchaghoury9629
@michelchaghoury9629 Год назад
I would like to see an Angular beginner to advanced project please, can you considered it? and thanking for a new helpful tutorial
@osanyinbiyusuf7308
@osanyinbiyusuf7308 Год назад
I am looking forward to your tutorial written in Typescript
@khoroshoigra8388
@khoroshoigra8388 11 месяцев назад
convert it to typescript
@robertovidela7406
@robertovidela7406 11 месяцев назад
Is there any way to protect the routes in the front-end even more? If someones tries to set a userInfo on the local storage, the protected routes will show up to that user, just by having a random value. The good side is that the real data isn't being showed because of the 401 statuses that are being received for not having an valid JWT, but the template shows up still :(
Далее
Every React Concept Explained in 12 Minutes
11:53
Просмотров 397 тыс.
Аварийный выход
00:38
Просмотров 808 тыс.
Fudbol hozir vs avval😂
01:01
Просмотров 478 тыс.
АНДЖИЛИША в платье 😍
00:27
Просмотров 615 тыс.
Learning Rust! | Writing a 16bit Virtual Machine
1:37:34
Redux Tutorial - Learn Redux from Scratch
1:34:53
Просмотров 1 млн
How I would learn Leetcode if I could start over
18:03
Просмотров 220 тыс.
React JS Crash Course
1:48:48
Просмотров 3,4 млн
How to NOT Fail a Technical Interview
8:26
Просмотров 1,3 млн
Express Crash Course (2024 Revamp)
1:46:11
Просмотров 44 тыс.
#miniphone
0:16
Просмотров 3,1 млн
ТОП-5 культовых телефонов‼️
1:00