Login and Registration Form using React + Node + MySQL | Login and Sign Up Form with Validation
HTML-код
- Опубликовано: 12 мар 2023
- This video is a very simple beginner's version of a register/login page. It includes registering users, inserting data into a database, and reading the data to allow login. We also validated our forms with React JS. Login and Registration Form using React + Node + MySQL | Full Stack Login and Sign Up Form
Hi Yousaf, I want to express my appreciation for the wonderful job you've done. I have a small feedback regarding the code, and I would highly appreciate it if you could provide some explanation on why you chose to use these specific approaches instead of alternative ones.
this guy is a lifesaver for real !
Thank you so much, Yousaf. Nice tutorial.
Im having an issue with the data being stored on the DB, on the signup page im only able to create 1 user record. I cannot have more than 1 record, when i delete the existing record im left with none but then im able to create a new record that only amounts to 1. Is there any way to fix this?
Edit: resolved the issue, forgot to check the auto incrementation box on the ID field in database
Thank you for valuable time taken this video , you can properly explained this video and also once for very thank you for teaching
you are very helpful
Hello, thanks first for your exceptional video, but I have a small question, please how did you create the server.js cause if I saw it well, it seems to be outside to this reactjs environment app.
Make a part 2 of this and do CRUD Operations
Awesome video 😎👍
i fixed it (if click sign up button but no data added in your phpmyadmin)
change server.js
const sql = "INSERT INTO `login`(`name`, `email`, `password`) VALUES ('" + req.body.name + "', '" + req.body.email + "', '" + req.body.password + "')";
also add debug log like
console.log("SQL Query:", sql);
console.log(values);
console.log(req.body); (for test, debugging)
also trying to insert in phpmyadmin web not in backend
thank you yousaf,
it was long i stay up night and fixed it
love your contents
Possible to send your codes; I'm having the same issues
Thank you brother!!!
it is very useful
If you’re experiencing issues with data not being inserted into your database, it might be due to the maximum length of the ‘email’ column in your ‘login’ table being too short to accommodate the email addresses you’re trying to insert. To resolve the issue, you can increase the length of the ‘email’ column in your ‘login’ table. Thank me later😉
Backend starts at 28:33
Ta vidéo m'a beaucoup aidé du coup je m'abonne❤
please I have a question: is the information recorded in the database???
great tutorial. But no github link. I know there is code at blogpost. The code is not readable.
Thanks bro👍
Great vid, many thanx.
One question though
Seems like the green login as well as signup buttons need to be clicked twice in order for them to work.
Is there a way to fix this?
any leads ?
thank you so much ,its working♥
very helpful
Nice Video
everything okey but when i try to enter with email and password it says this record is not valid eventhough the record in database
best 🔥
love from india
great video can iask sir why you not save the file into a jsx?
bro why you use new database for signup? when you can also use login data base
Really, it's a nice video. First time submit button not working for login and signup. Kindy let me know how to clear values of input after form submitted...
use useRef hook for that
first import it then create an instance ot it then assign to input field finally in the submit fun clear the value of that.
Can i please get the source code please @@codewithyousaf
Good video! Could you make one just like it, nothing more than including JWT, Bcrypt and cookies?
Sir, if I put localhost:3000/home, it will open the url without login, is it good?
it was very easy guidence..!!
please I have a question: is the information recorded in the database???
first thanks bro for this video
2nd i update the code to
const err = Validation(values);
setErrors(err);
and i still need to click 2 time on signup
Check that code here:
www.buymeacoffee.com/codewithyousaf/login-registration-form-using-react-node-js-mysql
Thanks
Thank you for the tutorial. I have made a small fix on database post for user signup:
app.post("/signup", (req, res) => {
const q = "INSERT INTO login (`name`,`email`,`password`) VALUES (?)"
const values = [
req.body.name,
req.body.email,
req.body.password,
]
db.query(q, [values], (err, data) => {
if(err) return res.json(err);
return res.json("User created successfully.");
})
})
@codewithyousaf while i am trying my data was not inserting to the database can you help and not retrieving also
console.log(req.body) i tried with this data coming to server but not inserting
check the connection
hi yousaf,i followed each and every step but when i try to enter the password of length greater than 8 it shows password didnt match
Make this type video but give one field for user type
thank you very much
when I click sign up, it's taking me to login page but In db no records are getting created, when I console the res, the data says Error but status code is 200, any suggestions?
check server side coding once again after a cup of coffee you find the error.
please why..
i use your code copy paste
but click sign up then no data in phpmyadmin
my name, email, and password wont show in the database after pressing Sign Up
same bro
thanax yousuf
how do we change the password of an existing user, can you make a video on it please
Hi yousaf ,
Thank you very much for this nice tutorial. But when I run the code I get an error like:Module not found: Error: Can't resolve 'axios'
@konatesoumahila2806 Did u get it?
Good day. Do you have video starting from setting up the Crud operation in phpMyAdmin because i don't know how to do it please.
I have video for crud you can search in my channel
@@codewithyousaf I mean a video showing how you set up the database in the phpMyAdmin for the Login and Signup please
please I have a probleme the information has not recorded in the database
Bro I have problem:
Whenever I click on submit it will show "password didn't match"
I have given 1 small letter 1 capital letter and digits with length>=8
But it shows password didn't match?
you should use 1 number 1 small letter 1 capital letter and length should be >=8
@@rinaaiko5619 eventhough it's not working
try 1234asdfASDF, if it isn't work, check regular expression
Go online and get password regex
try the password pattern :
const password_pattern = /^.{8,}$/
it will allows you to enter a minimum of 8 characters
How to log out? what if i want to close my session?
hello i have a problem when i click on signup i have a problem in the console {data: 'error', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …} ?
check your server side code what did you return?
i faced that too, my solution is to check the query code, and make sure that there are enough data for not null columns, I have 4 not null column but I insert 3 values, so it running wrong
When I click on signup, it's navigating to login page but records are not getting inserted in the database
yes same here
I did everything I could, changed my routes, recreated the database, recreated some of my codes as well installed neccesary files, yet with all of this, the data added into the Sign Up formate does not show up into my database, I tried all possible ways yet this issue remains
First when you click submit button console the values you stored in variables if data printed then pass the data to server side in server side console the data if you got data from front-end then store it inside the database if not check your code.
@@codewithyousaf Thanks for replying but unfortunately I still have the problem, is there another way to fix it? Thanks in adance
@@soufinator3631 www.buymeacoffee.com/codewithyousaf/login-registration-form-using-react-node-js-mysql
How to get the default react js function?
Make a CRUD operation video
I did as you instructed but still cannot connect to the database. Please advise 🙏🙏🙏
Can you please send me the code I need it 🙏🏻🙏🏻
in frontend , after adding signup .js output page became white ..... what i can do
no error showing
any solution
same here
hi i have one issue not connecting to the data base
for the app.post((portnumber) How do you find the port number? it's making me confused
Thats from server side
and how to know where the portnumber is? i am having having no problem up until when submiting the data in sign in and it will not show up on the databas server, maybe it might have something to do with the portnumber?@@codewithyousaf
By clicking signup button it did not navigate ro login page
why do i keep getting [nodemon] app crashed - waiting for file changes before
starting... error ?
close it and run it again if you are using windows go to task manager end those tasks of nodejs
@@codewithyousaf still not working . Can you share the code on github ?
@@codewithyousaf Cannot GET /signup error
@@fatmanaoui5909 www.buymeacoffee.com/codewithyousaf/login-registration-form-using-react-node-js-mysql
I was not navigating to home page when i click on login and even it is showing any error ca you please help me what may be the error.
By Successfully login shows an alert in the code. If an alert happens then it is okay to use navigate otherwise check your code.
@@codewithyousaf yeah it is showing an alert msg whenever i try to login. i was unable to navigate to home page .By the way thanks for replying
@@Ns-vm6rs did you import useNavigate from react-router-dom
after importing create an instance of that then use it.
it will be Okay
36:34 I got problem while after adding nodemon server.js and starting npm start
@user-bq2qi6ky9j Did u get it??
when i click on signup it doesnt navigate to the root. any advice?
click twice?
thankyou so much, i will buy you a coffee
I get my password is "123456" in signup page but it say password didn't match?
Why?
password is validated that must be at least 8 char one smal, one capital and number
i follow your video when click on register button not redirect to login page why?
the registration done successfully then check navigate to go to the login route
@@codewithyousaf hello yousufbhai my i have checked my server is running fine but still i get error 'Failed to load resource: the server responded with a status of 404 (Not Found)' so what is the issue cors orogin or other
i getting error AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
@@codewithyousaf hello give replay
what ? the button are not responsive to functional
my code is running but when i use signup function then it is saying that the pasword ,email didn't match
Check your validation.
follow the video
bro share your source code @@codewithyousaf
Bro, i have problem why the data from register cant be entered in my mysql, i wish you can solve the problem, thaanks
i had a similar problem i fixed it by folowing these steps :
first in your register variable change in
============================================================================
.then((response) => {
console.log(response); // change response to response.data
})
=========================================================================
i the console it will give you the world 'Error' if that happens the problem is most likely in the index.js /server file
check the line
=============================================================================
const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?)";
=============================================================================
make sure the name , email and password are in ` ` not ' '
second check your axios importation vscode for some reason mixs between Axios and axios and ends up importing the two of them
third verify the port for localhost in
=============================================================================
.post("localhost:3001/register", {
name: name,
email: email,
password: pass,
})
============================================================================
==> hope this helps
@@outmanelbakkaoui1579 hey bro... Last solution... please explain in detail please
hello, nice tutorial! Can you please fix when i try to login or signup and when it shows error i need to click 2 ttimes to sign up.
I think the problem is that when you return the error and set them in setErrors so it is rendering again. 🤔
@@codewithyousaf but it is same in your video. You need to click 2 times to login or signup
@@trix7450 You are right bro. It was like this but the problem was that when we returned error it needs two now I will provide you 2 options:
1:
I created a new complete video for authentication and authorization I will upload it tomorrow.
2: I will check the video I uploaded and provide you a solution.
which one?
@@codewithyousaf thank you bro, i dont know if you saw my comment probobly got deleted because of pastebin link. I fixed the code and i can share code with you if you want tommorow
@@trix7450 I worked on it and fixed it right now also I will update this video just write like :
instead of {setErrors(Validation(values)}
write like this:
const err = Validations(values);
setErrors(err);
if(err.name === "" && err.email === "" && err.password === "")
my error is "useNavigate " is not defined what to do kindly response??
did you import it at the top from 'react-router-dom'?
I got user's information from database
And now I want pass user's information to Home
Can u give me a hint to do this task
@@ominhsang9824 The best way is redux to store user info and access from all components
4:00 haven't explained this rfce thing. It doesn't work for me
Create React Functional Component. It's a boilerplate for react
bro could you please tell me to solve CORS failed error in console
install cors in backend folder run this command npm install cors
any git link for code?
Hey ..... My data not store in database ..... anyone help me?
First when you pass the data to the server side console your data like this:
console.log(req.body)
if the data was existed then check your connection if not then check your code
@@codewithyousaf thank you so much sir..... You are such a good person 😊
need source code (could you provide git link) ?
Bro I have problem:
Whenever I click on submit it will show "password didn't match"
And I also give atleast one small charecter one upper character sapicial charecter and digits
But it shows password didn't match?
same problem i am facing
@@ClickCrafters95 bro i got solution: please don't use spacial characters like @ only use number and charecters: use password like this: asdfASD1234
had the same problem, check password_pattern it should look like this "const password_pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/" for me it was missing some * symbols
@@nestorjacinto6537 make password like this: asDF1234
It contents all your pattern
What database are you using??
MySQL
I have video for MongoDB also
@@codewithyousaf Thanks bro... but how to authenticate login user using json server???
I am getting cannot get signup error
Plz help
Getting AxiosError any solution would be helpful
import axios from 'axios';
please give replay asap
here we gooo
10:49 (done)
19:20 (done)
29:00 (done)
40:58 (done)
can u send me your code
20:30
Source code?
hpw to make this a mobile app
Дякую за відео, хоча мене це не дуже цікавить, але корисно було послухати
Can i get the code please
can you show login using redux...please...!!!
Ok I will do it
can you please provide codes of all files
source code bhi dal diya karo
😔
im getting axios error
when i will submit data
password field does not match
one thing I should recommend you that always use condole.log OK. when you get data from front-end check that in console you got the data or not also if your are getting from database check that the data received or not if didn't then check where is the problem.
console.log
@@codewithyousaf i have the same issue ... how can i make him get the email and password from database
@@yousraramadan4222 because the password field is validated the password should contain at lease on small char one capital and number at least 8 chars
@@codewithyousaf thank you for replaying so quickly ;) but my pass is 'ABCabc1236' .... when i run the code >>he gave me
"Password didn't match" and i dont know why can you help me plz
Can you please share the source code?
when i click Signup, but it doesn't execute
that has problem you can solve that like this :
instead of {setErrors(Validation(values)}
write like this:
const err = Validations(values);
setErrors(err);
if(err.name === "" && err.email === "" && err.password === "")
@@codewithyousaf yes, i have
Hey brother....you solve the error?
@@patelkeyur7240 yes
@@patelkeyur7240 your sign up button need to be pressed twice or it doesn't work.
If it need twice then check the above comment I provided the solution.
Why not use react (tsx)?
Well in you're working on a project with a team you must use it, but for React it doesn't matter 'cause by itself can understand what's inside the file, You should use appropriate extension when somebody else needs to know what type of code is inside
how to know what port number i should listen to?
check your code which one you written or check in the terminal
@@codewithyousaf Can u tell me how to check the port number ?
@@ominhsang9824 check your server side file which port you assigned there
You can use any port no
@@iamrabiabalouch Yes, what you assign you can use that
may i get this code?
www.buymeacoffee.com/codewithyousaf/login-registration-form-using-react-node-js-mysql
Aoa i want code any link for that?
www.buymeacoffee.com/codewithyousaf/login-registration-form-using-react-node-js-mysql
@@codewithyousaf while i am trying my data was not inserting to the database can you help and not retrieving also
@@singhsai9870check connection with db
bhai source code de sakte ho kya
Please share the code
www.buymeacoffee.com/codewithyousaf/login-registration-form-using-react-node-js-mysql
Give the source code 🌪️
Source code bro