MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
![ลักพาตัว เอาลูกเอิร์นกลับมา...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/f4NVKlZ5qkk/mqdefault.jpg)
![[SUB] 베몬이 교관님 멘탈을 탕탕 후루후루~٩(๑❛ᴗ❛๑)۶ FOREVER 웃게 되는 갓기들의 수련회 | 돌들의침묵 | BABYMONSTER(베이비몬스터) 'FOREVER'](http://i.ytimg.com/vi/FISAO7BwIxE/mqdefault.jpg)
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).
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 .
Yeah I thought the same "why not nextjs" but without react there is no next
@@zunnoorainrafi5985 I’m also feel the same, support ticket method is much easier than above method
@@mohamedjaffir2776 what's that? Can u explain little bit?
Are you gonna create a nextjs tutorial in near future?
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
why dont you donate him some money?
@@blackboxbs8642 by buying jis courses you can support
thanks for the appreciations
thanks for the appreciations
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.
One of the most soothing tutorial I have ever seen. No confusion just straightforward. The guide on web is amazing
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.
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!
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.
3hr course 7 time within 1hr 🤣🤣 you are classic bro
@@surajjha5623 🤣🤣🤣😂😂😂💀
Only 7 times? I completed this course 20 times.
@@cryptoboy1461 by building it 20 times or just watching?
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!
Brad, you are such a legend. Thanks for uploading this.
Thankyou brad i got a job in Canada, i am from India. Only because of your this amazing TH-cam channels, really a big thanks 👍. Keep doing you have lots of developer best wishes.
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.
Love from Philippines brad . I'm now working as a front end developer because of you and your videos .
Thats awesome, You have summarized my 2 years lesson in 3 hours 🤩
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! 🌟
This is best Explanation ever. specially how you have handles error by express-handler stuff at starting. 🙂
Grateful for this Project.
I am learning a lot from you.
Thanks!
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😂
He is a master. I love the tutorials very up to date and easy wasy of teaching hard topics. Love from Pakistan
I was searching for this. Thank you once again!
Out of all the others on TH-cam 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!
finally the king is back please keep us updated with new mern stack videos
This is a production level tutorial. Thank you
Brad Traversy, you giving me great updates regularly
Most Awaited crash course
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 :)
This was such a good in depth tutorial of full stack software development covering a lot of necessary fundamentals. Thank you
Really amazing, thorough and helpful work. Thank you so much.
This is why I buy your courses... Thank you Brad
wel come mr am happy to get your latest videos.
Thank you for this video. Just finished that and learnt a lot.
This is really awesome, Brad.
Thank you Brad, you're a wonderful teacher!
Thanks for amazing work Brad
Great presentation and thank you! One question, did you skip the log out part for the header popup?
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.
Thank you Brad. I owe you a lot !
Thank you Mr. Brad, i learn from you a lot keep going bro.
Brad… legendary. Thank for for this!
It was really great, although I didn't understand the redux part. I was mainly here for JWT so I still thank you !
Thank you Brad, I 've learned a lot from your video. you are a great man.
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 :(
Wow my thought today was how can i work in mern and now you saved me 🎉❤
This video is extraordinary, thank you I was able to recall all methods..
Thank you so much for the project!
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?
Great one. Would love to see something with next-auth and/or Clerk (compared) and Next 13
you and jonas are really really great teachers, you put professors in to shame mode...
Traversy Media changed my life
even I'm interested Artificial Intelligence but I always follow along Traversy Media's channel and contents )))
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? 😊
Great video Brad. Thanks
Thank you for this awesome video but I would like to know about the validation in backend side.
Best Tutorial I've seen on TH-cam 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
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?
This will be good, gotta watch asap
A video on the chrome extension u use would be great 😃
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
Great video Brad
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
Thank you so much for the project video
Just finished this, coming from Laravel background where everything is out of the box, this journey was overwhelming! Nevertheless the tutorial was bomb!
Favourite instructor❤
Two things MERN Authentication/Authorization tutorials should have:
1. Http-only cookies; no data saved on frontend
2. TypeScript
is it not used here?
Yea he saved user data on local shortage.
what if I sperate backend and fronted by using cors there is HTTP-Only cookies still work?
Hi Brad.
Thank you very much for the course!
When connecting to the database an error occurs:
Server started on port 5000
Error: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.
How to solve it?
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)
Please help me. I have problem when i send data from frontent to backend it shows req.body empty why?
sir got one question
how are you able to make request form the frontend to the backend without adding that cors() package (in server) 🤯
when I tried to do it I got messed up
I have one doubt...you stored userInfo in localstorage and used Http only cookies for authentication.. after sometime cookie will expire but localstorage would be filled with userinfo and I can still navigate to protected routes...and if I make any api calls then it would show that token has expired and bythat time localstorage should be cleared.....How to handle this..or am I wrong somewhere??
Someone help me out ..
The King is back!
Does anyone know why some people create just 2 folders. client/server or frontend/backend. But here we are also using init for the root?
I mean isn't it more organized if we have only 2 folders frontend and backend and install the dependencies each of them require rather than having a some dependency in root and some in backend and some in frontend
Can someone explain to me how to add a sidebar there?
Because of the way the router is configured, I can't figure it out.
I am a beginner
Does this have to be deployed on lnode? Could vercel work? Or what are some other alternative deploy platforms for this
Thanks again brad :)
I just want to thank you even before watching the tutorial.
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?
Thank you so much for the project Brad, Love from pakistan
Great video as always. Thanks. What happened to having guest content on your channel? Not continuing that anymore?
Thank You so much brad ❤
Great content. Thank you 😊
Do you have any videos on role base authentication and routing ?
I'm getting an error at 2:22:45, because the baseUrl is empty and I need to provide at least one end point
Im at the end 3:22, and trying to install node on ubuntu and it keeps failing. What could cause this?
Excellent work... Bro thanks
I can't see the jwt or any cookie in the application tab, otherwise it is working perfect except for update feature since i jwt cookie is not present. I can see the cookie when i was trying it in postman, but after trying to login or register through frontend, jwt token is not showing in cookies. I am use CRA for frontend. If anyone know what is the problem please let me know
guys, can you tell me why people generate a token in both register and log in ? (other reason than to have access to the dashboard imediatly after you register)
hey Brad! Awesome work! Is Udemy course updated with redux toolkit by any chance?
hello brad, what if the http only cookie expired, what is the best way to reflect this in the frontend and how to check for it's validity?
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.
what theme do you use in vscode?
hello brad, i need to ask a question. Can i also apply these authentication steps on a React Native project.
Thank you, Brad.
yeaaaa, exactly, that one course every one wants.
❤ Thnkx brad, how can we structure the Mongo DB database incase of an e commerce web app that involves multiple collections and relationships, am also having issues with uploading an image in mern, can u please make a simple crud in mern that involves image upload and update, thankx🎉
Is the E-commerce application you mention in the video available in youTube?
2:19:00 my Redux tree says "unidentified" instead of "auth" and I can't seem to fix it. Any ideas?
i'm getting this error " const error = new Error(`Not Found - ${req.originalUrl}`);
^
TypeError: Cannot read properties of undefined (reading 'originalUrl')"
Anybody know why I'm still able to get returned data on a PROTECTED route? I'm using the PROTECT middleware on this route. I first hit the logout route, which is successfull and you can see in POSTMAN that the cookie is gone. But when I hit the PROTECTED route with the same token, I'm still getting data???
For a freelance client, manual auth or auth0 service ? what should I prefer for more security?
Please on my login.jsx I do not see or get errors on the console, and can’t move to Home Screen after adding the useEffect script on the login page anyone experienced that???