Build a Fullstack Login & Register Page with MERN (react.js, mongo, express, bcrypt, jwt & more)

[@phoney_the_Hypo]

Normally, I don't digest most of the tutorials. You've earned a spot on my list of favorites

[@brettwestwooddeveloper]

Awesome! I feel honored!

[@yashsolanki9925]

As a beginner in react, it is was really helpful to me. I appreciate your efforts and make this kind of videos in future best of luck buddy for upcoming projects and happy coding 😊

[@brettwestwooddeveloper]

No problem, glad you enjoyed it!

[@arizona2233]

This was amazing, thank you. I haven't seen a video to explain exactly step by step, with checks along the way. Backend makes alot more sense now

[@ayodejionayinka9215]

Your guidance was incredibly helpful, and I really appreciate the time and effort you put into this.

[@brettwestwooddeveloper]

No problem! Glad I could help you out!

[@moh_idreesmohammadi9118]

I would like to express my gratitude for your invaluable tutorial, which has greatly aided me, particularly in understanding and implementing middlewares. Despite my recent transition to backend development, I have spent an entire month diligently working on this seemingly straightforward project without success.

[@brettwestwooddeveloper]

No problem! Glad I can help you and appreciate the support!

[@rudolphboshoff1545]

Thanks for this video, it was overall excellent. I especially loved that you rolled with the mistakes/typos and take us through the process of how you identify the issue and correct it.

[@brettwestwooddeveloper]

No problem and thanks for the support and the sub!

[@williambarajas8090]

Explained everything very well in detail, learned so much in under 2 hours. Best video I have watched on MERN, also a great re watch for a refresher on MERN.

[@brettwestwooddeveloper]

Thank you!

[@marcelomatheus3959]

The best video of MERN in YT

[@brettwestwooddeveloper]

Thank you Marcelo!

[@michaelscofield2469]

you look like a model than a software engineer

[@MenyeMC]

A Software Rizzard

[@alabitemitope7236]

wow, this tutorial video is an absolute gem! The clarity of instruction, the depth of knowledge shared, and the engaging presentation truly set it apart. Thank you for making complex concepts so accessible and for empowering learners like me to enhance our skills.

[@brettwestwooddeveloper]

Thank you so much! Glad you are enjoying my content!

[@danielsimi5865]

this has to be the best video that has broken down all the concept of user interaction with a server

[@jonathanalbert920]

i want to say how grateful i am when i found this tutorial making login, register page with mern. you taught us step by step. i have no other words to say. i am speechless. Thank you so much and SUBSCRIBED :)

[@yagneshacharya2461]

Trust me bro u have great potential on this platform , you will definetly reach millions of subscribers

[@brettwestwooddeveloper]

Thank you! Hopefully that happens!

[@yagneshacharya2461]

@@brettwestwooddeveloper and yes there is a little thing you can improve is : your screen is so zoom out , things are not seen clearly

[@harkiratsingh763]

I am halfway through the video and the video is very easy to follow along Thanks a lot for the tutorial

[@brettwestwooddeveloper]

Thanks for the kind words! Glad I could help you!

[@rayyazdi7744]

Hats off to you for teaching these important items so complete. Please do more related MERN stuff in the future.

[@brettwestwooddeveloper]

Thank will do!

[@FaridDiraf-l1b]

8:10 , if you want to import a component automatically, you should just keep this component open in your VS code tabs bar. You managed to import automatically only login and register components because they were open

[@brettwestwooddeveloper]

Thanks for the tip and tuning into my channel!

[@macenth_k]

Pulled it off! Now I can use this anywhere!

[@toobataqi]

Bro, you don't know how you saved my life. stay blessed

[@brettwestwooddeveloper]

No problem! Glad I could!

[@sherifelsherif7332]

Brett, You are a blessing mate!, Explaining everything in exact details, Words won't describe how thankful we are for you!! Keep it Up!!

[@williammaroon4568]

Great video. Followed it all the way through and with some rewatches I got it all to work. I think you would get a lot of views with some quicker "follow up" videos. Adding a log-out button, making multiple user role types, and editing data within the dashboard would be logical next steps. There also seems to be a lot of people asking for source code, I think that is because most of the other MERN stack guides are older and don't work anymore. Maybe you could sell the source code, get a buy me a coffee link or something. Great start!!

[@OnlyJavascript]

i have production grade code. do u wanna buy me a cafe. it costs 1000USD.

[@OnlyJavascript]

[@chmod666-p]

Thank you for the fantastic tutorial! I appreciate the clarity in your explanation and the attention you put into the video. Keep up the great work! I hope your channel continues to grow even more!

[@brettwestwooddeveloper]

Thank you so much Lucas!

[@chmod666-p]

@@brettwestwooddeveloper I just have one question, I just finish your tutorial and works fine, but When I change user, I need to refresh to render the Hello `new user`.. How can I make this dynamic, in case I back to login page and when I log in, I dont need to refresh the page to display the "updated" data?

[@onigbindedavid6630]

​@lucassilverio8923 are u adding d status code while logging in??

[@bhoamikhona2480]

This is the best video on the topic! Thank you so much! Also, could you please make a video for the logout part as well?

[@mehemmedhezerxanli8228]

If you're facing an issue where cookies aren't showing up in the header, try removing the 'return res.json(user)' line from the last part of the 'try' block within the 'loginUser' function.

[@Your-Majesty]

Thank you bro

[@dalarcoin6851]

That isn't in the loginUser, it's in the registerUser function. Taking it out of the registerUser function also had no effect.

[@mehemmedhezerxanli8228]

@@dalarcoin6851 you are talking about another part and problem, if you watch carefully you can see the problem that I mentioned

[@dilshanwickramasinghe3633]

thank you man that really helped me

[@mayanksh219]

Just Completed This Tutorial and feedback is that Well explained, Any begineer can also understand this complex procuedure. Thank you very much

[@sourabhpatole5300]

Bro you are good instructor everything you explained in very smoothly

[@brettwestwooddeveloper]

Thank you very much!

[@asasas1820]

​@@brettwestwooddeveloperplease help me , I'm getting network error in axios

[@stevenmackey6346]

Great video, still working through it. Any chance you could share the finished code?

[@tylerdurden4563]

Hi everyone! I think I fixed the need to refresh the page to render the elements based on the user. In the Login component page add the following code: Import the context file: import { UserContext } from "../context/UserContext" Deconstruct the setUser from the context: const { setUser } = useContext(UserContext); Then, right below the axios.post to login and above the setData({}), set the user to data.user: setUser(data.user); Took me a couple of days of trial/error and it might not be the best fix, but I hope it helps! If anyone has additional comments, please comment it and lets improve together Apart from this small issue, great tutorial! Thanks to the creator :D

[@seif9923]

thats really awesome man, thanks for helping, I had the same issue and this fixed it, its better if you just paste the whole code here though.

[@abirdutta1357]

Thanks man was stuck for 2 days

[@adc.99]

Thanks a bunch, brother. Such a fantastic tutorial for beginners.

[@philippeauguste1516]

Thanks from France, a very good tutorial

[@brettwestwooddeveloper]

You are welcome! Thanks for tuning in!

[@johannesabate3089]

honestly, this is the only tutorial that works. plus tnx for details

[@valoriebroderick]

Thank you for the clarity! This tutorial saved my life! 😋

[@jayabharath03]

1:33:32 in this place i get an error "jsx attributes must be only assigned a non-empty 'expression'."

[@luisatejada6218]

Brett, I have to say that everything is amazing to follow and very easy to understand, I am wondering for a bit more info about the port connection from the beginning, and how I can connect it with my actual page, it would be awesome to have some more ideas or videos about it bro. happy to learn from you amazing job!

[@biankgriffin5103]

Saved my life! The only tutorial that i just got a click on my head.. thank u!! I subscribed to your page 😉 u deserved it 100000000

[@heraditestreamingarchive1100]

Good class. Very helpful. Only thing I wish there was a github repo of the class so I could check my work with yours when I do a mistake. Thanks for the lesson though!

[@TheDiegoP12]

thanks for the tutorial! After the login how can i avoid having to refresh the page in order to see the data?

[@brettwestwooddeveloper]

First off thanks for the sub! And yes I will have to make another video demonstrating this because you shouldn't have to refresh the page manually.

[@aljongabrielambasvaldez]

Hi Glad that I found your tut, hoping to have more regarding MERN CRUD, thanks

[@brettwestwooddeveloper]

I will in the bear future, just been busy with Next.js

[@chefnabil171]

Nice work Brett thank you so much

[@brettwestwooddeveloper]

No problem! Thanks for the support!

[@crnomudi7499]

This actually helped me a lot thanks!

[@brettwestwooddeveloper]

Glad I could help you out there!

[@kumar_sanjeevdutta1069]

Great, I liked your step by step approach

[@brettwestwooddeveloper]

Thank you!

[@rogerwinright2290]

Thank you so much for this tutorial! It gives such an awesome basis for projects and loads of understanding about Node and Express!

[@hendyboy]

Sir in this video the login and registration form is created. Sir please make a video on how to show that data in the profile and why to put the image as well. Please sir

[@tylerdurden4563]

Great tutorial! Thanks for making it!!! I was just wondering if you could continue with this project adding Google Authentification 2.0. Or if you know any other good tutorial or resources where they show you how to add Google Auth to the already existing context and jwt

[@brettwestwooddeveloper]

Hi Tyler and thanks for the support and watching my content. I don't know a good video about Google Authentication with MERN stack. However, I do have a Google Authentication video using Next Auth. Which is with Next.js. kzbin.info/www/bejne/f5C8dHaVo6unbZI

[@Mouldy7890]

Thanks so much for the tutorial, this was really really helpful. Clear and concise explanations! I have subbed and look forward to more videos.

[@brettwestwooddeveloper]

Thank you for the support and glad I can help!

[@macenth_k]

Ok now I need some help guys. I want to add other things to the Dashboard as well! I want to add a sidebar and nav bar, two divs and all. Problem is, I don't know where to add it. If I add anything else, it stops working

[@christopherdsmd]

awesome tutorial I watched the whole thing. Exactly what I was looking for Thank you

[@maanas_sehgal]

Thanks a lot brett for this amazing tutorial, really loved it, although I am getting an error that I am not receiving the data of user on the dashboard, could you please help me somehow?

[@arunavgupta1629]

hyy , i am getting error of intermediate object undefined while making register page try and catch section

[@ixMutant]

I have been stuck on it for a day now... 1:28:10 i have the same problem but it doesnt resolve on refreshing

[@dhruvyadav6635]

In App.js set "axios.defaults.withCredentials = true"

[@dalarcoin6851]

Did you ever find the fix for this?

[@asasas1820]

It was great learning and coding together . please provide the css part also !!

[@brettwestwooddeveloper]

Thank you but unfortunately I don't have the source code for this anymore.

[@destocot1729]

only half way through the video but i love the react toast its so clean

[@syedmasum8131]

Wow this was really good video. I really liked it. A little bit explanation how logout works is missing other than that its a real good tutorial. simple and easy for beginners like me.

[@Olhaccord]

That was very cool, easy to follow the tutorial, super useful information, thank you very much!

[@brettwestwooddeveloper]

Thank you so much, glad I can help!

[@aziznaufalll5600]

This is a very good tutorial, thank you sir. i subbeddd

[@sharcodes]

A github repo could be cherry on the top. Anyway Great content.

[@brettwestwooddeveloper]

Thank you and yea I wish I had one for this. I am going to recreate this video anyways!

[@andresmejia3371]

De los mejores videos que he visto para aprender a realizar un MERN completo felicitaciones!!! por mejorar un poco la pantalla grande del lado izquiero para ver y observar mejor las validaciones que realizas con las Developer tools , Continua asi exitos y bendiciones

[@dragx26]

You deserve more subscribers ✅💯 You explained it in very understanding way, point to point 😍🤩 Subscribed 👍❤

[@brettwestwooddeveloper]

Thank you!

[@dws-7]

Is there any way to implement the dashboard that it loads user data without refreshing manually? 🙂

[@co4160]

GREEAAAT TUTORIAL!!

[@brettwestwooddeveloper]

Thank you! Glad you liked it!

[@shaokhan-i8k]

broo its the best video on this topic!!!!!!!! Subscribed🤩🤩

[@brettwestwooddeveloper]

Thank you so much for the sub! Means a lot!

[@kamdi_dev]

Please help me am stuck i was even add imgFile so when I click login I receive an error message from imgFile I will send the code here in the comments section

[@weebandkeeb1834]

Thanks for the video man! I have learnt a lot from it.

[@brettwestwooddeveloper]

Awesome! Glad you were able to. Appreciate the feedback!

[@MarkJosmilDegamo]

1:39:15 ill be saving this timestamp for future. i hope i can fully understand this soon. :)

[@brettwestwooddeveloper]

Glad you are enjoying it

[@deepkodes4434]

why did u need vite ? could u have done the same w npx create-react-app stuff

[@gurajb52]

Great tutorial ! Can this be built upon whereby there is an admin side to see which users have signed up?

[@FADIK1987]

very great tutorial, I have a question about redirection on the localhost with CORS, for some reason it did not work for me

[@vighneshbhat7375]

Really helpful tutorial. One remark, you could've also added a logout part to this tutorial. Really helpful tho

[@olamidealiyu4504]

Amazing job!!!! It was an amazing build

[@brettwestwooddeveloper]

Thank you!

[@atheel5678]

Thank you for your tutorials ❣

[@brettwestwooddeveloper]

You are so welcome!

[@DaniCodigoLatino]

Tienes un nuevo seguidor! Increíble el video! : )

[@yashwavare4609]

1:48:54 , you have refreshed the page to show name in the dashboard. How to do it without refreshing the page

[@leonardocoelho-xp1tw]

Top notch content!

[@brettwestwooddeveloper]

Thank you!

[@alaricshiran9189]

Awesome but some . were , and some , were dots drove me crazy but it helped me understand the code much better thank you check the Auth file if anthing went wrong if you are trying to compare hashedpassword with password

[@alaricshiran9189]

hope you would have added a logout as well,

[@ryanpereira7687]

Great tutorial, I just had a question, whenever I login and land on the dashboard page I am not able to see the username right away, I have to refresh the page to see it. I have checked the response from the server and I am getting the data to react its just not displaying it unless i refresh it. Ypur help would be appreciated on this. Thanks

[@arandomuser11]

Hi there, were you able to figure out a solution to this bug? I just finished this video yesterday and have been trying to solve the bug myself since then, but without success. I suspect it has to do with the useNavigate() hook, but I haven't gotten any further than that.

[@denizyldz1860]

Thanks for the video and I don't know if it is a stupid question but which mouse are you using? I just really like the click sound.

[@floramerano6293]

Again, why do you need to refresh the page to show the greeting message "Hi Brett!"? couldn't you have just shown that greeting the moment the user logs in?

[@tylerdurden4563]

did you find any solution for this? I have been struggling with this problem for days

[@dest5218]

Very very easy to understand, i just subscribed. I wanna ask thou, if i have for example a simple todo list app and the a todoschema in the db, will each users todo list be different or still the same? Saw a comment avout you redoing this project, if you could add a feature like this it would be greatly appreciated and also a git repo. Thanks again.

[@learntocode2877]

Such a great tutorial man!!....

[@tukojs]

Hi! thanks for the video. I have a problem, i cannot see the cooki on the request headers. Can you help me?

[@sanika5924]

I also cannot see

[@TheNatsuniidragneel]

Great video, I have some questions, when I type the password in React, if I Login and inspect the login Network Payload, I can see the password before it is hashed, how can I fix that?

[@meghpriyaacharya4728]

Thank you so much this helped a lot.

[@brettwestwooddeveloper]

Glad it helped!

[@bestclips3481]

hello bro, i'm sorry for disturbing you, i noticed a problem with my own, if i login with a different username, after i've logged in with one particular user, it still displays the old username untill i refresh please do you have any idea how to fix that

[@malekbaouindi4]

Hey there, thanks for the tutorial mate, im having my end of studies project and am following your video to create a video, the single difference is that in the final dashboard file i'll be integrating a power BI dashboard and i was wondering how is that doable ?

[@brettwestwooddeveloper]

Thanks for the sub! When talking about the dashboard are you talking about the UI or getting the user information to display on the screen?

[@malekbaouindi4]

@@brettwestwooddeveloper thanks for replying, no no, since am studying in the "Data analysis " field, i made a powerBI report, and i successfully integrated it in the mock Dashboard page we made in the tutorial ( thnx again for the vid you're a life saver) now I just need to customize the home page and make it beautiful ( Am still a bit lost on how to do that) and eventually add a logout feature

[@Pr0Cre]

Thank you very much, very well explained.

[@adoptedpotato4132]

Thank you for the tutorial, very well made. Can I use MySQL instead of mongo? What are the trade-offs and the difficulty level please

[@brettwestwooddeveloper]

Yes, you can use any database you want. But the MERN stack specifically uses MongoDB and if you don't use MongoDB then its not technically a MERN stack anymore. I have never used MySQL but I have heard its not as scalable compared to Postgres SQL or MongoDB. Still a good option for personal or small projects.

[@adoptedpotato4132]

@@brettwestwooddeveloper Thank you very much for the response and information, greatly appreciated ☺️. This may be a silly question but what would it be called instead of MERN? Yes I want to start off with my first small project but the recommendation is to use MySQL. I will definitely look into learning and using MongoDB in the future.

[@spandanmarathe7002]

Hats off to you!!! Thank you✌✌

[@brettwestwooddeveloper]

Thank you! and no problem!

[@lostinthenarrativve]

mind if I ask why you moved on from plain MERN to nextjs for your apps ?

[@toniantoine572]

Hi, I am getting a Cannot Get/ error around 1:01:06, also I am also not seeing my data in mongodb. My network tab is showing 204, no content. Any help?

[@williammaroon4568]

did you change the MONGO_URI to MONGO_URL like he did in the tutorial? I'm not sure why he changed the convention, but make sure they match.

[@harex7336]

Great video! Can u make other Models for example "gadgets" and connect them with users (one to one relation). Thanks

[@brettwestwooddeveloper]

Thanks for the kind words. I have been using Prisma and Next.js to create one to one relations. Haven't been using the MERN stack for a little bit now.

[@lovejoy9445]

BRO i have followed your video carefully...after login sucess response header show setcookie....but in next request my request header still not show cookie...can u help me?

[@dhruvyadav6635]

In App.js set "axios.defaults.withCredentials = true"

[@blackstormgaming3779]

Please also create admin login and dashboard which shows all users data who logged in with there name and the email only

[@brettwestwooddeveloper]

Will do! Great suggestion!

[@aryanmehta7001]

I followed your video and I am getting a weird result at the end. When I log in with one user it shows their name, but after when I back out to the login page and log in with another user, it shows the name of the previous user on the dashboard until i refresh it. After refreshing the page, the name of the current user that's logged in shows up. Can you help me with this please?

[@brettwestwooddeveloper]

the page isn't rerendering, you can use a window.location.reload() or other methods as well. Make sure your path is revalidated.

[@losarihetze]

thank you for this tutorial!,very helpful!

[@brettwestwooddeveloper]

Glad it was helpful! Thanks for the sub!

[@solidadosLive]

Thank you for your tutorial. Yet, I have a question: I did compare the code and follow through three times 1:20:36 `JSONWebToken`, however, while trying login in a browser, and check `Network > Headers` tab, - in your case Cookie appears in `Response Header`, in my case - it does not... (I see only Cookie: in `Request Headers`).. How so?!

[@tukojs]

could you solve it?

[@yutian2721]

i can't see any cookies

[@dhruvyadav6635]

do you mean in request header? if so the in App.js set "axios.defaults.withCredentials = true" @JulianReDev @yutian2721

[@shashankpandey374]

why we need to reload page to show username in dashboard what we can do to directly show username without refreshing it

[@jacobswiney9977]

subscribed! amazing vid

[@Vaibhavparmar-i3e]

thanks for the video man!!

[@andresilveiracastanho5618]

Hi Brett, my dashboard doesn't refresh the old login name on the screen? could you kindly help me? thanks!

[@brettwestwooddeveloper]

You can use a window.location.reload(). That would be an easy fix. Thanks for the sub!

[@ash730ify]

is anyone having a problem with Axios? the git and post request keeps throwing errors for me in register, login and userContext

[@siphembambo6872]

I'm having the same issue,did you manage to resolve this?

[@beardedraider4751]

So i am getting the issue with the user not displaying to at 1:46:00 i have gont over the code and its the same, i am however getting an error with line six and the children just a big red line import axios from 'axios'; import { createContext, useState, useEffect } from 'react'; export const UserContext = createContext({}); export function UserContextProvider({children}) { const [user, setUser] = useState(null); useEffect(() => { if(!user) { axios.get('/profile').then(({data}) => { setUser(data); }) } }, []) return ( {children} ) } Its saying its missing in props validation? How can i fix this and will this make it work?

[@beardedraider4751]

I was missing a { } around the token on authController line 80, but i am still getting the red line for the children :(

[@AadarshLokhande]

could you provide me the code I am also getting same issue