🔐 Learn How to Create a Secure Website with User Authentication using the MERN Stack! | Tutorial
ฝัง
- เผยแพร่เมื่อ 28 ธ.ค. 2024
- In this comprehensive tutorial, I'll guide you through the process of building a feature-rich website with user authentication using the powerful MERN stack (MongoDB, Express.js, React, and Node.js). 🌐
🔑 What You'll Learn:
📌 Set up a MongoDB database to store user information securely.
📌 Build a user-friendly front-end using React for seamless user interactions.
📌 Create a robust back-end using Express.js and Node.js to handle user authentication.
📌 Implement user sign up, login, and logout features with clear step-by-step instructions.
📌 Enhance security with bcrypt: Learn how to hash user passwords to protect sensitive information.
📌 Utilize JSON Web Tokens (JWT) for secure user sessions and authentication.
📌 Best practices for handling errors, form validation, and user experience improvements.
By the end of this tutorial, you'll have a fully functional website that incorporates industry-standard security practices to safeguard user data. Whether you're a beginner or an experienced developer, the easy-to-follow instructions in this video will empower you to create your own web applications with confidence.
Twitter: / alancodes11
GitHub Repo: github.com/Aar...
#MERNStack #WebDevelopment #UserAuthentication #Bcrypt #JWT #Tutorial #FullStackDevelopment
Best video i've seen so far explaining the process of authentication, this was the one for me and i've seen a bunch of them! Keep the good work and thank you for sharing the knowledge!
There are so many comments that has already explained how great and rich this tutorial is and I'm adding on to them as I have watched the entire video and tried it out for myself.... this is by far the best tutorial that is rightly paced with explanation of every details that a beginner might look for . I had watched so many videos but they didn't help me to this extent . Sincerely, I thank you from the bottom of my heart !!!
@ruepic289 Thank you so much for the kind words! That really means a lot. I am super happy to hear that this video helped you tons! 🙂
This is not only authentication tutorial but also express😊 thanks man you explained everything
@bereketg5609 Thank you!!! 😊
I have seen many videos but they didn't teach us the last part of account section but now I understand the account section part with token and local storage thank you for creating this wonderful tutorial for us it really helped me a lot in understanding the MERN AUTH now I can easily implement this in all my projects ♥♥♥
@agntomega7220 I am sooo happy to hear that! Certain parts of MERN are a bit tricky to understand at first but once you get it, the possibilities for different projects are endless! Thank you so much for your awesome comment!! 😊
Thank you so much for this wonderful content, Alan! Looking forward for more content from you! 🙏
@clairebayoda8325 I really appreciate it! Thank you! I will try to get more out soon! 🙂
On point tutorial. Thanks for explaining every step in detail
he implemented secured routing in it???
Sweet and simple, thanks, I was not able to protect my page now I will try your technique
You know what, it worked, really grateful to you, thanks, and if possible, please make a small mern project including redux, just core not readux thunk ❤❤❤❤
Excellent video my dear friend
@byronloarte973 Thank you! I really appreciate the feedback!
I saw lot of mern authentication videos but ur explanation video is very clear to understand... thanks a lot😊
Amazing ! Really loved the video!👍
@mjylove2 I am thrilled! Thank you so much!! 😊
thank you bro i watch numerber of vedios but your vedios gives me very clear cut pxplanation even though i dont know thamil im am from telugu state
Better than most paid courses out there!
@the-boss-98 Thank you so much! I really really appreciate it! 😊
bro thank you so much for making a video in such an detailed manner I was struggling in how to authenticate the user but after watching this video I understood that how it's done .
@pramitsrivastava2579 I'm super glad to hear that!! 🙂 You got this! Now that you understand how it's done, keep building that muscle memory, and everything else will be so much easier 🙌🏼
Thank you so much I have seen so many vedios but I am not getting perfectly but this tutorial helps me a lot and got the exact output...kudoos to ur work😊
@majjisobhamadhuri9140 I'm happy to hear that! And thank you! That's definitely why I decided to make videos. Keep at it! 😊
great way of explaining thing and making project .keep it up bro.create a movie rating app or food order app
awesome tutorial thanks🙏
Thank you, let's go learn MERN stack
Great❤🎉🎉
Really great tutorial. Btw what theme are you using, looks clean.
@mojo382 Thank you so much! The theme I'm using is Monokai Pro Filter Spectrum
is it possible to use typescript for the code in node? if so, do we need to set it up or can we just touch server.tsx?
love from india 💗
@baraiyasachin9166 Thank You!!!
really good for beginners bro❤🔥
Great Video Man👏👏👏
@curtiss5982 Thank you so much! I really appreciate it! 🙏🏼
thank you very mach , very useful 🌹❤
Im super glad! 🙂
Thank you so much
do this method work in hosting platforms like vercel as i think localstorage wont work there
I have one issue,when I sign out it directly leads to a blank white page
Hello bro thanks, but if user login and token will expire then how to protect the account then i mean there is always token in local storage until i clicked on signout. Please can u tell me how to protect or redirect users to login if token expired.
@captain_11155 Hey! Thats a very good question! I don't have physical code, but one thing you can try is in the app.js file, make a function that helps check if the token is expired, then you can add it inside of the protected route logic (inside the curly brackets). you can try putting it in here {isUserSignedIn && }. Make sure to change up the code. Hope this helps!
@@AlanCodes ya I did already after punching the head to the code 🤯😅 but anyway thanks 👍
This is the kind of videos we need in MERN stack, Thanks brother fr the big effort, I would you to add the implementation of password reset and nodemailer 🙏🙏🙏
@alihassanhaji2830 thank you so much!! My pleasure! Those were definitely some ideas I had for upcoming videos! 🙂
Why at 51.02 we are comparing all the bycrypt passwords to that one user password , We were supposed to compare bycrypt password of that user with the original password of that user only?
We are comparing the password that has been recieved from body to the password that is being stored in db
Sir what to do if get "Error signing up " in postman
Hey @tarunlanka740 ! If your are receiving that 500 "Error signing up" error code, somethings you might want to double check are.
1- Making sure the connection to your mongoDB is successful
2 - Checking if the permissions in MongoDB allow you to readWriteAnyDatabase
3- Double check your HandleRegister function to make sure the endpoint for the submitted form is being sent to /register
4- In Postman, when you make a POST request to localhost:3001/register, make sure the "Body" tab is clicked, then "raw", then choose "json" and use format:
{
"email": "json@json.com",
"username": "json",
"password": "password"
}
Hope this helps!!
Awesome
please create role based login system with mern stack
Thank you
Very good work Sir. Thank you. Please teach us how to use auth0 in next video
@pranshuverma1645 Thank you! I'm not too familiar with auth0 but when I do get more familiarized with it , i'll def make a video!
@@AlanCodes Sure Sir
(node:28800) [MONGODB DRIVER] Warning: useUnifiedTopology is a deprecated option: useUnifiedTopology has no effect since Node.js Driver version 4.0.0 and will be removed in the next major version
(Use `node --trace-warnings ...` to show where the warning was created)
node:events:492
throw er; // Unhandled 'error' event
^
how can i fix this error
i am also getting the same error. did u rectify it? if yes, tell me how did u do it?
@@MARENO-vy4cx yes ,remove useUnifiedTopolgy
@@MARENO-vy4cx remove the useUnifiedTopology
just remove the those lines. mine worked perfectly without those.
Your login is not working man. You only save "token=undefined", you do not send token to frontend and on frontend you do not check it at all.. I can also set manually in Dev Tools. I've already posted such comment but I do not see it here, did you just delete it? If I am wrong, please correct me, do not just delete my comment.. That's not the way to gain trust hm? I was not any rude, I even gave you a shout out how simple and useful your tutorial is, only it's not completed.
@MikiStec Hey! Thank you for pointing it out. I will make sure to correct those errors in the future. I really appreciate you pointing it out! As far as your other comment goes, I haven't deleted any comments. Even if I make any mistakes, deleting comments won't help anyone who is trying to learn, especially if you are pointing out information that is super valuable and that will help others, and myself included. Thank you once again!
@@AlanCodes great. Your way of explaining and your simplified style is just brilliant, keep posting!
Hello, Apologies is this is a dumb question, but how does your JWT Token work here? like what does this line of code do: const token = jwt.sign({ userId: user._id }, SECRET_KEY, { expiresIn: '1hr' }), I dont see it being used in the frontend, so how is the token being used to protect?
Hi @abdulmuhsinbaksh8757 ! Its not a dumb question at all! In that line of code, we are using jwt to generate a token when a user successfully signs in with their username and password. The token is then attached or tied to the user's {user.id} or unique identifier, which was made for them at sign up. Then, in the backend server, the secret key helps validate the generated token to make sure the token is authentic. The token then is passed to your frontend, that way it can be stored in the browser for the signed in session. Lastly, we are setting the token to expire 'in 1hr', securing the session for automatically logging users out after 1 hour.
Hope this helped!
@AlanCodes how is the token beings stored into the frontend?