Login and Registration using MERN Stack | Mongo, Express, React and Node Authentication
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- #mernstack #login #registrationform
Lets build Login and Registration with MERN (MongoDB, Express, React, Node). This login and sign up system is made with react and mongo database. We used react for front-end and node for backend also, the mongo database. This is complete Authentication system with MERN.
how to do login and register authentication in react node js
TimeStamp:
00:00 Demo of Authentication
01:26 Create React app and Node App
04:43 Sign Up Form Design
06:23 React Router Dom for Routing
10:30 Store Register Values in Variables
13:25 MongoDB
14:24 Start Server Side Code
17:00 Register API code in server side
22:58 Design of Login Form
23:45 Login API code in server side
Bro believe me You're doing a great job for beginners like us by creating these simple apps using MERN thank you!!!!!
Hi bro have you did this project, i need a source code of it
Yes you are right
Thank you bro, this is really very helpful for beginners ❤🎉
This helped so much and was very clear, thanks
اخيرا شرح براسة حظ تعبت واني ادور هيج شرح يااخي شكرا
first ever video that i watched and coded perfectly without facing any extreme issues or errors. thanks a lot. it worked perfectly. SUBSCRIBED
How did you get the signup.jsx source code ??
hey can you please share me the source code , i am unable to navigate to home.js even after success message in console
@@KartikSharma-mv8vi same problem how did u solve it please tell me thanks
Thank you! Everything is worked as you guided!
literally the simplest video of authentication by mongo db, hats of to you sir 😌😌
Hi can you help me, If i try to do npm init vite it default take the project name like vite-project i can't able to change into client. There is no issues with the name of vite-project
@@happy_vlogs_sk just start typing your project name over it
bc the cursor won't actually work over it
Thank you very much bro. The tutorial was so resourceful.
Great work brother keep it up.
This is the next big Channel
um a begginer this really help full to me brother thank you!
Thank you .This is very helpful video furthermore interesting for coders
Thank you so much 😊 for making so easy.
You are amazing 😊
Thankyou so much bhai please make videos like this It was my first mern project and I am very happy again thankyou bro
Thankyou Youasf, the project is very helpful for beginers.
thank you so much.. this is exactly what i need as a beginner
Hi bro thanks for your help and we appreciate a lof. we learned much from these videos
really beginner friendly, thanks
this is very helpful and direct to the point, thank you very much
Very nice explanation sir, Thank you!
very good video for understanding the basics behind the login signup in MERN STACK. Thanksss bro.. You helped much for my project
Super helpful for beginners ❤
Thank you so much duuuude, you really helped me !!
Thank you brother for this video. It helped me very much !
Thank you so much for this amazing video🎉.. bcz you keep in mind like as a student visualisation...
I must say, I am really impressed. This is exactly what I needed as a beginner. I will definitely recommend it to my noob friends like Ashutosh. BTW, if u r seeing this Ashutosh, do like this comment.
Ashutosh ko q toda
very great tutorial teach in a simple way
Thank you bro this is very helpful.
Bro is too good. Thank u so much.🙏
Thank you so much sir,u helped alot.🤗
Very helpful indeed thank you ❤❤
I think this is the best video, & that's because it's shows top first on the search
Thank you bro, really great 🎉
Thank you soooooooooooo much. This worked.🥰
Thanks Bro, Your Code Worked in my system in first Attempt. Your teaching methodology is epic. #WellDone!
LOGIN COMPONENT NOT WORKING CODE
import axios from "axios";
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
function Login() {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
console.log("Login Button Pressed!");
axios
.post("localhost:3001/login", { email, password })
.then((result) => {
console.log(result);
if (result.data === "Login Successful") {
navigate("/component");
}
})
.catch((err) => console.log(err));
};
return (
Login Here!
Email address
setEmail(e.target.value)}
/>
We`ll never share your email with anyone else.
Password
setPassword(e.target.value)}
/>
Log Me In
);
}
export default Login;
SERVER => PAKAGE.JSON WORKING CODE
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"cars": "^1.1.6",
"cors": "^2.8.5",
"express": "^4.19.2",
"mongoose": "^8.4.4",
"nodemon": "^3.1.4"
}
}
i learned alot from this video Thank you ❤
i need a source code of it
@@gnanu3530 Did you get it ?
crisp and clear
thankyou bro, it's worked for me bro, keep it up bro
yrr mera code run nhi ho raha ek baar aap check krloge error bhi show nhi ho raha hai koi
what amazing tutorial !
thank you for this vidio and plz add logout logic as well
Excellent tutorial.
your teaching method is very unique plz also bring full mern stack project tutorial like job portal,ecommerce,LMS etc it will be very benefit for us thank you
Thank you, bro, I am working on a small e-commerce project.
Next Week inshallah
Good Explanation ♥♥
mashallah brother maza aa gaya
god bless u, u saved my days
Thank you very much❤❤
thank you very much :)
Thanks brother you are greate
unable to see the created table in atlas and data was shown [] like this
thank you bro :)
how we can add about us page after home i'm trying but giving children parents error .i dont want to open it direct without login
Thank Your Sir 🤗
I am wondering why you did all that locally? I was looking to do it all on Mongoose online and live.
very helpful buddy.
How do we add error message if the input is incorrect.
I'm a beginner and I'm still stuck at the signup page
My bootstrap i don't know why it has an error
awesome tut,
what is user in the at 25:07 at 17th line
Thank you bro,
If i input correct password i got "incorrect password" to my console how could that possible and can you tell me how to fix
bro do you have the regulation signup code?
Worth bro works fine
Hello, Yousaf! You have a great channel, thanks a lot! I have frontend html+css+js file that I want to link to backend Java files, but this method uses jsx, can you please help me? It is really important for me
Have a small doubt. Why can't the button "Login" be a part of the form tag?
Very nice
Great
Brother I am a beginner in this field
What should I learn first before watching this video ?
getting Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
i have updated my code still coming same warning. how can i resolve ? could you pleas help
I think you were trying to write but you mistakenly wrote .
I tried to copy your code however employee was created in mongodb but collection data are not included prompting 500 internal server error...how to fix it?
check adding a record API code
Where can I check a record API code and what will I do...tnx
your explanation is very good and simple .....i request you please provide source code
Sir Apne MERN fullstack Development kaise Shikha ???
Apaka kay mindset our Rodmap tha???
If i deploy my project so its work ???
Hello sir, uhmm can you try the mongodb atlas next? Cause i am having difficulties trying it on mongodb atlas using your code😅
I am using this mathod but cannot find data in user \
Thank You
can you please provide the source code link of github
how to run this project
getting errors Localhost refuse to connect i did everything same
Bro we need source code for signupform can you provide???
It will be great help if you can provide source code for this project bro
please i have a problem can someone assist me? why useState is underlined in red in my code?
did u import it?
can someone please help me i got axios error
thanks
where can i get the signup.jsx code please tell
but bruh how to secure the home page ?. i mean only that user can access the home page who has logged in .
exactly.
Bro this code is not working
Where is source code man
I GOT axios NETWORK ERROR ? PLEASE GIVE SOLUTION i tried three more time
Hi bro please give source code link i am practicing devops so automate it into deployment
respect++
Where is source code
Don't Look for source code A Good programmer Create own self ❤👍🏻
❤🎉❤
where is the github source code????
nice video bro
can you provide the code or gitlink
i face the password is incorect erorr
bro i dont know how to run please could u help me with it
what do you want to run?
it's good explantion sir but id not get data it shoeing empty data
{
"_id": {
"$oid": "65c9a6c0fdc2b71ce384a46c"
},
"__v": 0
} just like that but how to solve issue here
the database id name is like: (_id) use it when you deal with database
put the code in the discription please
Here you can find the source code link:
codewithyousaf.blogspot.com/2023/06/login-and-registration-using-mern-stack.html
Regaring SERVER if u get error like:
node:internal/modules/cjs/loader:1080
throw err;.....code: 'MODULE_NOT_FOUND',....
install these packages in /server
npm install bcrypt
npm install jsonwebtoken
npm install cookie-parser
then
npm run start
the server starts and no further issues
Npm init vite command is not working for me pls help anyone
npm create vite
Code?