Build a Fullstack Login & Register Page with MERN (react.js, mongo, express, bcrypt, jwt & more)
HTML-код
- Опубликовано: 12 июн 2024
- Private 1 on 1 Help 👇
calendly.com/dabrettwestwood/...
Join my FREE Discord to talk and network about web development! 👇
/ discord
Welcome to our tutorial on how to build a full-stack login and register page using MERN stack. In this video, we will cover step-by-step instructions on how to create a secure and functional login and register page using React.js, MongoDB, Express, Bcrypt, JWT, and more.
Whether you're a beginner or an experienced developer, this tutorial is designed to help you gain a deeper understanding of the MERN stack and how it can be used to build powerful and secure web applications.
Understand the folder structure of a Full Stack MERN project, authentication, authorization, encrypting user's passwords for extra security, tracking user's with a cookie using JSONwebtoken, utilize React-hot-toast package for professional looking notifications and much more.
So, join us now and learn how to build a full-stack login and register page with MERN! Don't forget to subscribe to our channel for more tutorials on web development, and feel free to leave any questions or comments in the section below. Thank you for watching!
Timestamps:
0:00 Intro
0:51 Setting up folders/vite app
2:55 Set up frontend folders
5:12 React Router Dom setup
10:47 Create the login and register page
19:10 Set up backend folders/environment
24:39 Set up a GET endpoint route to test
33:54 Set up MongoDB database and connect it
44:00 Create a POST request for Register Page
54:43 Using React-Hot-Toast for notifications
1:02:58 Bcrypt Implementation
1:10:04 Create a POST request for Login Page
1:20:36 JSONWebToken
1:29:04 Create User Context with React Hook so we can track user
1:41:12 Create Mock User Dashboard
1:47:42 Testing out everything and outro 
Развлечения
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
you look like a model than a software engineer
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 :)
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.
Thank you!
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.
No problem! Glad I can help you and appreciate the support!
Hats off to you for teaching these important items so complete. Please do more related MERN stuff in the future.
Thank will do!
Brett, You are a blessing mate!, Explaining everything in exact details, Words won't describe how thankful we are for you!!
Keep it Up!!
Thank you so much for this tutorial!
It gives such an awesome basis for projects and loads of understanding about Node and Express!
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!
Thank you so much Lucas!
@@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?
@lucassilverio8923 are u adding d status code while logging in??
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 😊
No problem, glad you enjoyed it!
Thanks a bunch, brother. Such a fantastic tutorial for beginners.
Just Completed This Tutorial and feedback is that Well explained, Any begineer can also understand this complex procuedure. Thank you very much
Thank you for the clarity! This tutorial saved my life! 😋
Your guidance was incredibly helpful, and I really appreciate the time and effort you put into this.
No problem! Glad I could help you out!
I am halfway through the video and the video is very easy to follow along
Thanks a lot for the tutorial
Thanks for the kind words! Glad I could help you!
Thanks so much for the tutorial, this was really really helpful. Clear and concise explanations! I have subbed and look forward to more videos.
Thank you for the support and glad I can help!
honestly, this is the only tutorial that works. plus tnx for details
awesome tutorial I watched the whole thing. Exactly what I was looking for Thank you
Bro, you don't know how you saved my life. stay blessed
No problem! Glad I could!
You deserve more subscribers ✅💯
You explained it in very understanding way, point to point 😍🤩
Subscribed 👍❤
Thank you!
Bro you are good instructor everything you explained in very smoothly
Thank you very much!
@@brettwestwooddeveloperplease help me , I'm getting network error in axios
This is a very good tutorial, thank you sir. i subbeddd
This actually helped me a lot thanks!
Glad I could help you out there!
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!
Thank you very much, very well explained.
Great, I liked your step by step approach
Thank you!
That was very cool, easy to follow the tutorial, super useful information, thank you very much!
Thank you so much, glad I can help!
Pulled it off! Now I can use this anywhere!
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
Thank you for your tutorials ❣
You are so welcome!
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.
Such a great tutorial man!!....
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?
Thanks for the video man! I have learnt a lot from it.
Awesome! Glad you were able to. Appreciate the feedback!
Top notch content!
Thank you!
Hi Glad that I found your tut, hoping to have more regarding MERN CRUD, thanks
I will in the bear future, just been busy with Next.js
Amazing job!!!! It was an amazing build
Thank you!
thanks for the video man!!
broo its the best video on this topic!!!!!!!!
Subscribed🤩🤩
Thank you so much for the sub! Means a lot!
Trust me bro u have great potential on this platform , you will definetly reach millions of subscribers
Thank you! Hopefully that happens!
@@brettwestwooddeveloper and yes there is a little thing you can improve is : your screen is so zoom out , things are not seen clearly
only half way through the video but i love the react toast its so clean
subscribed! amazing vid
thank you for this tutorial!,very helpful!
Glad it was helpful! Thanks for the sub!
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
Thank you so much this helped a lot.
Glad it helped!
Tienes un nuevo seguidor! Increíble el video! : )
Hats off to you!!! Thank you✌✌
Thank you! and no problem!
great explanation
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!!
i have production grade code. do u wanna buy me a cafe. it costs 1000USD.
its helped a lot bro thanks...
😍
No problem you are welcome!
super useful, thank you very much.
You are welcome! Thanks for tuning in!
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!
Thanks a lot
🎉
Thanks Brother !!
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.
Great tutorial ! Can this be built upon whereby there is an admin side to see which users have signed up?
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?
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.
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
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. ruclips.net/video/I_YCC_nFt70/видео.html
hyy , i am getting error of intermediate object undefined while making register page try and catch section
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
great video @brettwesrwooddeveloper nice concept and easy to follow but could you please do a follow up video on styling it and if possible use tailwind css
It was great learning and coding together . please provide the css part also !!
Thank you but unfortunately I don't have the source code for this anymore.
1:33:32 in this place i get an error "jsx attributes must be only assigned a non-empty 'expression'."
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
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?
Is there any way to implement the dashboard that it loads user data without refreshing manually? 🙂
is anyone having a problem with Axios? the git and post request keeps throwing errors for me in register, login and userContext
why did u need vite ? could u have done the same w npx create-react-app stuff
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
so helpful, sir how can i set stay user logged in even user close the browser and reopen it.
Really helpful tutorial. One remark, you could've also added a logout part to this tutorial. Really helpful tho
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
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?
Hey I encountered a problem at 31:00 getting error message [nodemon] app crashed - waiting for file changes before starting... Any suggestions
why we need to reload page to show username in dashboard
what we can do to directly show username without refreshing it
A github repo could be cherry on the top.
Anyway Great content.
Thank you and yea I wish I had one for this. I am going to recreate this video anyways!
Кайф, спасибо мужик)
Sorry don't understand
@@brettwestwooddeveloper It's Russian: Cool, thanks man)
Great video, still working through it. Any chance you could share the finished code?
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 ?
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?
@@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
Hi! I have an issue and Issue is name is not displaying on the dashboard. Why?
thanks for the tutorial! After the login how can i avoid having to refresh the page in order to see the data?
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.
Why do I have to refresh the page multiple times to get the cookies?
no tengo cookies en el header :C trate de todos, hay un repositorio ?
Hi Brett amazing tutorial. Can you make a video about how to handle logout?
Yes I can add that to my list
Were you able to figure out how to add a logout?
I have been stuck on it for a day now... 1:28:10 i have the same problem but it doesnt resolve on refreshing
I mistakenly deleted all the file by using git I'm unable to undo it , can you please provide link if you have saved it in any repo please.
I'm using it in my project.
It took me whole day to watch your video and do it piece by piece
I got a server less function error when try to deploy server on vercel.any one know how to solve this
Thank you. The bug at last was not solved in my code
1:39:15 ill be saving this timestamp for future. i hope i can fully understand this soon. :)
Glad you are enjoying it
One issue that during register we can register without email though , so a required parameter should be there to avoid that issue
How can we implement role based authentication in this?
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
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.
Hi! thanks for the video. I have a problem, i cannot see the cooki on the request headers. Can you help me?
I also cannot see
How would you add role based authentication to this
does this include authorization and authentication?
thanks
No problem!
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
hope you would have added a logout as well,
Just one thing, If you are creating an account why you should login again to get a jwt token. if someone is creating an account why not send it at that time
Hi, is MERN good for quick development?