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 .
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.
Thankyou brad i got a job in Canada, i am from India. Only because of your this amazing RUclips channels, really a big thanks 👍. Keep doing you have lots of developer best wishes.
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!
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! 🌟
Out of all the others on RUclips 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!
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 :)
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?
Just finished this, coming from Laravel background where everything is out of the box, this journey was overwhelming! Nevertheless the tutorial was bomb!
@1:35:32 I went looking and found you can name the outputs from concurrently (the [0] [1]'s you see at the start of each line. add this before the commads: (hyphen)n \"C..,..S\" (I had to use (hyphen) instead of the character, else the comment inteprets it as a strikethrough markup here, and those are 2 periods, a comma and 2 more periods between the C & S) I do C.. and ..S, so when they scroll not only are they showing C(lient) and (S)erver, the letters are in different colums for easier distinction.
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.
I think I made a comment a few days ago about Network Errors using either axios or node fetch to express apis. I used ngrok on the react app client side and not express, and I got network errors. However, if you fire up ngrok on the express port, the network error goes away (at least on android). I watched another coding instructor do this, and it did work.
The network error only happened when i scanned that qr code on expo go while trying to access the express routes on android/ios (even though no network errors were present in android studio or xcode many times). Axios would call external apis good on the react client side though. ngrok was not needed for that for me. this may help someone. I fought with this for a while.
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)
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?
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 ) .
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.
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 ..
Hey Gyan, am not sure if you are still looking for an answer, but still I will post it In Server.js add cors package and add this code app.use( cors({ origin: "localhost:3000", // Replace with your frontend's origin credentials: true, // Enable credentials (cookies, authorization headers) }) ); In usersApiSlice.jsadd this just add property credentials : "include" will do the trick logout: builder.mutation({ query: () => ({ url: `${USERS_URL}/logout`, method: "POST", credentials: "include", }), }),
29:30 Hey Brad, I didn't understand the custom error middleware part. How is express handling and catching the error when you have not even defined the error types? For example why error goes directly into the errorHandler function when the notFound was defined first?
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
Hi bro, I'll need you to mentor and guide me on how to get my first dev job. I'd really appreciate if you'd help me. Thanks a lot.
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.
Thankyou brad i got a job in Canada, i am from India. Only because of your this amazing RUclips channels, really a big thanks 👍. Keep doing you have lots of developer best wishes.
😮
Brad, you are such a legend. Thanks for uploading this.
One of the most soothing tutorial I have ever seen. No confusion just straightforward. The guide on web is amazing
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!
Love from Philippines brad . I'm now working as a front end developer because of you and your videos .
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!
Most Awaited crash course
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.
Brad Traversy, you giving me great updates regularly
He is a master. I love the tutorials very up to date and easy wasy of teaching hard topics. Love from Pakistan
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.
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! 🌟
Thats awesome, You have summarized my 2 years lesson in 3 hours 🤩
Grateful for this Project.
I am learning a lot from you.
Thanks!
finally the king is back please keep us updated with new mern stack videos
I was searching for this. Thank you once again!
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.
Out of all the others on RUclips 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!
This is best Explanation ever. specially how you have handles error by express-handler stuff at starting. 🙂
This is a production level tutorial. 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?
Thank you Brad, you're a wonderful teacher!
you and jonas are really really great teachers, you put professors in to shame mode...
Traversy Media changed my life
This was such a good in depth tutorial of full stack software development covering a lot of necessary fundamentals. Thank you
Wow my thought today was how can i work in mern and now you saved me 🎉❤
I just want to thank you even before watching the tutorial.
Great video Brad. Thanks
A video on the chrome extension u use would be great 😃
Thank you Mr. Brad, i learn from you a lot keep going bro.
wel come mr am happy to get your latest videos.
Thank you Brad, I 've learned a lot from your video. you are a great man.
Thanks for amazing work Brad
even I'm interested Artificial Intelligence but I always follow along Traversy Media's channel and contents )))
Thank you Brad. I owe you a lot !
Really amazing, thorough and helpful work. Thank you so much.
It was really great, although I didn't understand the redux part. I was mainly here for JWT so I still thank you !
This is really awesome, Brad.
yeaaaa, exactly, that one course every one wants.
thank u so much
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 video is extraordinary, thank you I was able to recall all methods..
Do you have any videos on role base authentication and routing ?
The King is back!
Can you make a tutorial for GSAP?
PLEASE it would be very useful.
Love your work, keep it up!
greensock is easy compared to this tutorial. If you can follow this, then you can easily learn it yourself.
46:36 Notice that setting unique:true does not validate the emails to be unique. MongoDB has a doc page on this misconception.
Thank you so much for the project Brad, Love from pakistan
Thank you so much for the project!
We miss you Brad 😊hope you’re doing well?🎉
Favourite instructor❤
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?
Hi Brad, a video on the MEVN stack would be nice too
Yes indeed
Vue is for lazy inexperienced toddlers
This will be good, gotta watch asap
Just finished this, coming from Laravel background where everything is out of the box, this journey was overwhelming! Nevertheless the tutorial was bomb!
we can also add a check , if enter the same email by other users. e.g "Email already in use."
Thank you so much for the project video
Here to juice the algo. Love the content brother.
Hi Brad,
this is a great tutorial! Thx
I have a little problem.
The cookie is not created in the browser, but is created in the Postman.
did you figure this out?
Same issue here
@@korngsamnang I figured it out with chat gpt; I think you gotta add include credentials or something
add this line in apiSlice file --- credentials: "include",
adding a proxy will solve it
Great video Brad
Excellent work... Bro thanks
Can you make a MERN project with OAuth providers as well?
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.
can't praise you enough
Thank You so much brad ❤
Thanks again brad :)
I am looking forward to your tutorial written in Typescript
convert it to typescript
Waiting for the eCommerce course to be updated on Udemy
Thank you, Brad.
W MERN STACK. SHOUTOUT TO YOU TRAVERSY!!!
after the 2, hour everything began more complex
@1:35:32 I went looking and found you can name the outputs from concurrently (the [0] [1]'s you see at the start of each line. add this before the commads: (hyphen)n \"C..,..S\" (I had to use (hyphen) instead of the character, else the comment inteprets it as a strikethrough markup here, and those are 2 periods, a comma and 2 more periods between the C & S) I do C.. and ..S, so when they scroll not only are they showing C(lient) and (S)erver, the letters are in different colums for easier distinction.
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.
Thank you for this awesome video but I would like to know about the validation in backend side.
Great content. Thank you 😊
I think I made a comment a few days ago about Network Errors using either axios or node fetch to express apis. I used ngrok on the react app client side and not express, and I got network errors. However, if you fire up ngrok on the express port, the network error goes away (at least on android).
I watched another coding instructor do this, and it did work.
The network error only happened when i scanned that qr code on expo go while trying to access the express routes on android/ios (even though no network errors were present in android studio or xcode many times). Axios would call external apis good on the react client side though. ngrok was not needed for that for me.
this may help someone. I fought with this for a while.
how to setup this monorepo with typescript
Recently I have seen Nestjs become a thing, I'd wish to see a Nestjs crashcourse
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)
@TraversyMedia you are just so good. You have really helped me in my career. Please Can I get the ecommers project link?
Damn! Thank you @traversy🎉
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?
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? 😊
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 ) .
Outstanding
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.
Mongoose makes it easier
Great video as always. Thanks. What happened to having guest content on your channel? Not continuing that anymore?
I would love to see react-query in one of your projects.
thanks
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 ..
many thanks
Someone tell me which one is better among these
1. Mobile computing
2. Web technology
3. Information management
4. ERP systems
5. Graph theory
It would be great if you will transform this React into NextJS 13 btw thanks for the video.
On logout cookies is not clearing.
Please help me someone.
Hey Gyan, am not sure if you are still looking for an answer, but still I will post it
In Server.js add cors package and add this code
app.use(
cors({
origin: "localhost:3000", // Replace with your frontend's origin
credentials: true, // Enable credentials (cookies, authorization headers)
})
);
In usersApiSlice.jsadd this
just add property credentials : "include" will do the trick
logout: builder.mutation({
query: () => ({
url: `${USERS_URL}/logout`,
method: "POST",
credentials: "include",
}),
}),
29:30 Hey Brad, I didn't understand the custom error middleware part. How is express handling and catching the error when you have not even defined the error types? For example why error goes directly into the errorHandler function when the notFound was defined first?
yes bro, even I am having the same confusion
This is f*cking amazing
Thank you bro.
Thank you so much