Node.Js Login and Registration with Database | Login, Logout and User Authentication | 1/2 |
ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2022
- User authentication and login is the most important feature of many websites, and most likely a key component to your next project. In this video I will be covering absolutely everything you need to know about user login and authentication in the most concise and simple way. We will be using Express for our server backend and Passport to help us manage the logged in state of users. We will also be sure to properly encrypt and hash all user passwords so that our application is completely secure. By the end of this video you will have built a fully functional login system that you can use in any of your future projects.
.
Subscribe if you enjoyed this video for more amazing contents!!
💻 Source Code
👉github.com/desphixs/Node.Js-A...
___________________________
💻 Django TH-cam Clone Tutorial - www.udemy.com/course/fullstac...
___________________________
💻 Django TH-cam Clone Tutorial - www.udemy.com/course/create-a...
🔗 Social Medias 🔗
📱 Twitter: / desphixs
📸 Instagram: / desphixs__
⭐ Discord: / discord
📝 LinkedIn: / destiny-franks-18611120a
🌎 Website: www.desphixs.com
📂 GitHub: github.com/desphixs
🔊 Podcast: Coming Soon
💸 Donations 💸
💵 One-Time Donations: paystack.com/pay/desphixs
💰 Patreon: www.patreon.com/join/desphixs...
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
------------------------------------------------ About Me --------------------------------------------
My name is Destiny Franks, and I'm a Nigerian Web/Mobile App Developer. I truly enjoy coding, and since it's what I want to do in the long term, I decided to share my experience while teaching on TH-cam. So, via this channel, you'd learn programming, software engineering, machine learning, and everything IT. With a focus on Python and JavaScript, my channel seeks to provide you with free tools to help you learn to code and get started in the software engineering and programming business. My goal is to deliver the best programming and technology videos on the internet!
![[TH] VCT Pacific Stage 2 - Playoffs Grand Final // GEN vs DRX](http://i.ytimg.com/vi/Su6gA_UPs9s/mqdefault.jpg)
I don't normally comment on videos but I've been searching for a video like yours. I'm only 24 minutes into the video and I can tell you're a natural teacher. You talk fast, but not too fast. Enough to keep the listeners attention and not have them steer off in boredom. You explain everything you're doing in detail. Very well done! I have not looked at your other videos, but I would love to see you combine React with this project! You've earned a subscriber for sure. Well done.
Thank you very much for your support
you're the biggest contributor to my final year project, thank you so much for this!
I'm happy to help ❤️
no offence but.... this is my first year project i an not telling i am superior but i hate my self to chose such hard topic just spliting out my rage nothing else
Thank you for this video, You explained everything very well.
This tutorial is great, thought through and well paced.
Thank you very much, I really do appreciate
I’m doing a project for school and was wondering if I can do this but implement a search bar to use an API for this?
am so grateful i have been floating for days on understanding this. thumbs up
Thanks alot buddy
Bro you make really good videos and I actually learned a lot from your vids. Keep it up dude!! You’ve earn a new subscriber 😁😁
Thank you my friend, I appreciate that.
Sir, I tried running the project using npm run devStart but it popped out an error saying: [nodemon] app crashed - waiting for file changes before starting... I would so glad if you could please help.
Have you used mongo db?
Great video blood ❤
very helpful! thank you very much
I been trying to do the same exact idea except i have a readExcel file to read my excel sheet in my stack but i keep getting stuck, when i run node server.js instead of showing me username: underfined but when i run node readExcel.js it reads it and i see the values for username and password. 😅i been battling this for the past 3 weeks lol i need help sos
where do i find part 2?
Thanks for the tutorial. What is the chrome extension you used in the video for the auto name/email generator?
You're welcome, the extension is called form filler
You are amazing! Thanks man.
Thanks a ton pal ❤️
Excellente! Would love a tutorial on how you can require admin to approve registration before user can create an account and login?
Okay sure, that would be done soon
what a video man brilliant keep it up bro ❤
Glad you enjoyed. Thanks a lot.
Thank you for this Tutorial bro
Thanks alot ❤️
1:55
That is bad, you shouldn't let the end user know if a specific email exists or not in your database. That can drastically simplify the process of hacking. Because instead of having to guess 2 fields (email AND pass) you cut that in half since you know that email is correct. You are giving extra info to the user which is unnecessary and doesn't serve any real purpose.
Also, it would have been nice to also see that you have a "forgot password" button which lets you reset the password after you receive a specific email. That is very important for a decent login and registration form. It's not something which you can just avoid implementing and be cool with it.
Hey do you mind helping me with how to connect the server to react? I have my front end login and registration page in react, IDK how to connect it to the server you made?
You need to write a rest API using node.js to do that, I'm making a tutorial on this. Dropping soon...
🥺🥺🥺 Thank you so much for this.. I love the breakdown, the explanation it really helped.. Thank you so much ❤️❤️
Please can you make a tutorial on REST API with CRUD OPERATIONS using the MVC Structure... Please 🥺
Thanks alot , ❤️
I'm working on that now
Ohh okay... Thank you 🙇♂️🙇♂️🙇♂️... Please it should be NodeJs 🥺🥺
its awesome man, but after submitting details & clicking on register, it is not showing the results in the console, i have checked the method is post, action is /register submit button type is submit.
i dont what went wrong :( can you please help?
Can you share your code?
if im using postman to test the API, should i still make index.ejs like in your video?
It's all upto you, if you need other users to make use of your application , then yes you need to create a frontend for users to interact with, if you're building only an API, then NO, you do not need to create the index.ejs.
Just Awesome
Thanks
You're welcome
dude ur awesome man
Thank you very much ♥️
How can I add my css to the Index.ejs
And also my js files
You can add it in he public folder, look it up on google
Hello! Thanks so much for this tutorial. I appreciate your effort
You're welcome buddy, thanks for the comment I do appreciate it ❤️
If i have js files and css files where do i put them ?
Put the js files in the place where css is staying
pls have u finish the Instagram tutorial clone using Django.
No I haven't, new episode coming tmr
Please I need your help. I followed your tutorial but got hooked in a particular place, need your help to get back on track
Where did you get hooked?
in which database the data is storing?....i.e login credentials
For now, we just used an array
Where can I get the contination of this video? It not the full video
The full videos have been posted here on the channel
Hey, what a beautiful video !! Im at 30:00 and when i hit the sign up button, nothing happens. What is the link between the sign up button (in the register.ejs) and the server ? I hope you can help me :) thanks
A couple of things might be happening.
First, are you using a POST method?
Secondly, where is your actions pointing too?
Thirdly, what is type of button, submit??
If all these are okay, then it'll be a server error.
@@desphixs thanks for the reply, the problem was that i didnt use a . No its it and it works
Alright, kudos you fixed it.
you can make a curd opretion in nodejs express nodejs
Sure, I'll do that as soon as possible.
Hey thanks for the video
I have a problem i already had html css and js file link to my html but now using the render of ejs files all the styling are lost it is like the css and the js files are not anymore connected to the my ejs files
I have tried to look on stackoverflow and have seen some stuff related to app.use and express.static but I am still stuck can I have a help please
I'd be glad to help you with the issue you're facing with EJS, CSS, and JS files.
When you switch from serving static HTML files to rendering EJS files using a server-side technology like Express, you need to make sure that your CSS and JS files are still accessible and linked correctly. Here's a step-by-step guide to resolving the issue:
1. Set up Express and EJS:
Make sure you have Express and EJS installed in your project. You can install them using npm if you haven't already:
``` Install express like we already did
npm install express
```
2. Set the view engine:
In your Express app configuration, set EJS as the view engine:
```javascript
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
```
3. Create a "views" folder:
Create a folder named "views" at the root level of your project. Inside this folder, place your EJS files. For example, if you had an HTML file named "index.html", you would create a file called "index.ejs" inside the "views" folder.
4. Link CSS and JS files in your EJS templates:
In your EJS templates (e.g., index.ejs), link the CSS and JS files using the `express.static` middleware provided by Express.
Assuming you have a folder named "public" where your CSS and JS files are located, add the following code to your Express app:
```javascript
app.use(express.static('public'));
```
This code tells Express to serve static files from the "public" folder, making them accessible to your EJS templates.
In your EJS template (e.g., index.ejs), link your CSS and JS files like this:
```html
My EJS Page
```
Make sure to replace "styles.css" and "script.js" with the actual paths to your CSS and JS files.
5. Start the server:
Finally, start your Express server:
```javascript
app.listen(3000, () => {
console.log('Server is running on localhost:3000');
});
```
Now, your EJS templates should correctly link to the CSS and JS files, and the styling and interactivity should work as expected.
Remember to check that your file paths and folder structure are correct. The "public" folder should contain your CSS and JS files, and the "views" folder should contain your EJS templates.
If you've followed these steps and are still encountering issues, double-check the file paths and make sure your server is running correctly without any errors. If you can provide more details about the folder structure and the code you've implemented, I can help you further debug the problem.
@@desphixs thank you it worked yesterday I found out about express.static
I got stuck when you copy pasted the index.ejs file my terminal just shows errors like name not found etc…
Can you upload a screenshot shot of the error to imgbb and paste the image link here so I can see the error myself
I also got same error if your error is solved pls help me
What database did you use?
I would be using a postgresl database, video dropping soon.
Hello brother, do you have a tutorial for this type of HTML and CSS page?
Not yet, but right now I'm making tutorial for html and css
@@desphixs Thank you, I look forward to seeing it the page looks very nice so far.
It’s just I understand more when I visually build a entire project myself, then we could step by step dive into a more in-depth line by line comparison or I can do due diligence with AI to learn.
Cheers again my brother!
Informative, can you please guide on how to connect to mysql. I am trying but data is not getting inserted to my database.
It'll be quite long, but hopefully it'll give you some idea on how to connect mysql with your application and save data to the db.
1. Install the required dependencies:
- Open your terminal or command prompt.
- Navigate to your project directory.
- Run the following command to install the `mysql` package:
```bash
npm install mysql
```
2. Import the `mysql` module and create a connection:
- In your Node.js script, require the `mysql` module:
```javascript
const mysql = require('mysql');
```
- Create a connection to your MySQL database:
```javascript
const connection = mysql.createConnection({
host: 'localhost', // Replace with your MySQL host
user: 'your_username', // Replace with your MySQL username
password: 'your_password', // Replace with your MySQL password
database: 'your_database' // Replace with your MySQL database name
});
```
3. Connect to the MySQL server:
- Use the `connect` method of the connection object to establish a connection:
```javascript
connection.connect((error) => {
if (error) {
console.error('Error connecting to MySQL database:', error);
} else {
console.log('Connected to MySQL database!');
}
});
```
4. Perform database operations:
- Once the connection is established, you can execute SQL queries to perform various operations.
For example, to insert data into a table:
```javascript
const data = { name: 'John', age: 30 }; // Example data
connection.query('INSERT INTO your_table SET ?', data, (error, results) => {
if (error) {
console.error('Error inserting data:', error);
} else {
console.log('Data inserted successfully:', results);
}
});
```
5. Close the database connection:
- It's essential to close the database connection when you're done using it:
```javascript
connection.end((error) => {
if (error) {
console.error('Error closing MySQL connection:', error);
} else {
console.log('MySQL connection closed successfully!');
}
});
```
Make sure to replace the placeholder values (`localhost`, `your_username`, `your_password`, `your_database`, `your_table`) with the actual values specific to your MySQL database setup.
By following these steps, you should be able to connect to your MySQL database using Node.js and perform database operations. Remember to handle errors appropriately and ensure the correctness of your SQL queries and data.
@@desphixs Thank you so much for your help🤝
Everything have explained awesome but in passport I have confused little bit
How can I help you? Just tell me the part that you don't understand using timestamp okay?
@@desphixs it looking lengthy and confuseable why not to use jsonwebtoken ?
Tq sir
Welcome
❤️❤️❤️❤️
Thanks brother ❤️🙂
how can i add mongodb withi this ??
I'll complete it soon with a DB connection
@@desphixs will it be with mongodb atlas? I’d definitely appreciate it if it was a cloud storage
i can't get the source code please !
Have you checked the repo?
Haha nice copy from Web dev simplified. But actually you explained it better ❤😊
Haha, it's was the first tutorials I took on node.js, so I thought; how about I teach what I learnt? In the future I'll make my own projects from scratch.
No database connection 😢
I'll complete the tutorial soon with a database connection
Can you show us how to connect this to a database like mongodb
I'm making a video about that topic
Unable to subscribe
How about now? where you later able to subscribe?
that it brother teach us the way evirrrrrreviiiirrrr coderrss
in the title of the video you mentioned the word database, but after 21 minutes you decide to make it in a simple list , just for the simplicity, honestly i consider this cheating and misleading title 👎👎👎👎
My apologies, I would update the title to clearly convey what we’ll be doing in the tutorial.
Plagiarism. There could be some plagiarism going on here. How come this code is very close to Kyles work: th-cam.com/video/Ud5xKCYQTjM/w-d-xo.html . Out of interest - who did the original work? Whoever did the work first deserves the monetisation and not the copier. Or did you both work on this together?
This was the first node.js course I took, so I decided to make a tutorial explaining what I learnt in my own way.
He is the original owner of the video, I just taught what I learnt in my own way.
did you copy this from webdevsimplified channel ☺
Yes, That was my first node.js tutorial, so I had to teach what I learnt from the tutorial here 😅😅
@@desphixs ok , I have a question they say the ejs is not used anymore they say we can use like react.js as an alternative is that right?
Yes, that’s right; but you can still use ejs, it’s just not recommended again. Use react or angular instead
you didn't explain almost nothing, just telling us what to write and what options do we have .. dude, in a tutorial you need to explain what is happening and why it's happening, how do you expect a beginner to understand all of this ?
That was my first node.js tutorial, I've learnt alot in node.js since then and when I start making the next tutorials, there will be even be more better explanation