As the popularity of web applications continues to grow, it has become increasingly important to implement robust authentication systems that can verify user identities. One critical aspect of user authentication is ensuring that users do not create multiple accounts using the same email address. In this blog, we will explore how to use Node.js and MySQL to check if an email address already exists in a database.
Create Working Directory
First we have to make Node.js working envrionment, so first we have goes to directory from where we have to run node.js application. So in command prompt we have to run following command.
f:
cd node
mkdir email_exists_or_not
So this command will first goes to F: drive and then after it will goes into node directory and after this it will create email_exists_or_not directory in which we will make node.js application for check email address exists or not in MySQL database.
Next we want to download Node.js Express module, so in command prompt we have to run following command.
npm install express
So this command will download Node.js Express module under this email_exists_or_not directory. Now we can open this email_exists_or_not directory in text editor for create Node.js Email Exists or not with MySQL Database.
MySQL database Structure
Below you can find MySQL database structure for create Node.js Email Exists or not Application with MySQL database.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` int(10) UNSIGNED NOT NULL,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Dumping data for table `users`
--
INSERT INTO `users` (`id`, `name`, `email`, `password`, `remember_token`, `created_at`, `updated_at`) VALUES
(1, 'John Smith', 'john_smith@gmail.com', '$2y$10$8am2/JEN1ARvndVsgl.YvegRpbrPZuhG0nA79k8sYNk5RdDNKNcS2', 'ksxo8HGQLFpUenlAFKfTfWMqk2cJuDhqrnoBa6ogZBf1ZbRwkNzAxE4AFn7o', '2018-03-05 00:29:44', '2018-03-05 00:29:44');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;
After this under email_exists_or_not directory, we have to create index.html file and under this file we have to create one HTML form for get email address details from user and after this we have to write JavaScript for send Ajax request to node.js application for check email exists or not in MySQL Database.
index.html - (Client-side (HTML with AJAX))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Email Availability Checker</title>
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5 mb-5">
<h3>How to check if email address is already in use or not in Node.js ?</h3>
<div class="mt-3 mb-3">
<div class="card">
<div class="card-header">Enter your eMail</div>
<div class="card-body">
<form id="email-form">
<div class="mb-3">
<label for="email-input">Enmail Address</label>
<input type="email" id="email-input" class="form-control" />
<span id="email-message"></span>
</div>
<button type="submit" class="btn btn-primary" id="submit-btn">Check Email</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
const form = document.querySelector('#email-form');
const message = document.querySelector('#email-message');
form.addEventListener('submit', (event) => {
event.preventDefault();
const email = document.querySelector('#email-input').value;
if(email != '')
{
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/check-email', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = () => {
if(xhr.status === 200)
{
const response = JSON.parse(xhr.responseText);
if(response.emailExists)
{
message.innerHTML = '<span class="badge bg-danger">Email is already in use</span>';
}
else
{
message.innerHTML = '<span class="badge bg-success">Email is available</span>';
}
}
else
{
message.innerHTML = '<span class="badge bg-info">Error checking email availability</span>';
}
};
xhr.onerror = () => {
message.innerHTML = '<span class="badge bg-info">Error checking email availability</span>';
};
xhr.send(JSON.stringify({ email }));
}
else
{
message.innerHTML = '<span class="badge bg-info">Please Enter Email</span>';
}
});
</script>
Below you can find description of JavaScript Code part.
const form = document.querySelector('#email-form');
This line of code selects the HTML form element with an id of email-form and stores it in the form variable.
const message = document.querySelector('#email-message');
This line of code selects the HTML element with an id of email-message and stores it in the message variable.
form.addEventListener('submit', (event) => {
});
This line of code adds a listener to the submit event of the form element. When the form is submitted, the anonymous function inside the parentheses will be executed.
event.preventDefault();
This line of code prevents the default behavior of the form when it is submitted. By default, the form would submit the data to a server and reload the page. This code prevents that behavior so that we can use AJAX to check if the email is already in use without reloading the page.
const email = document.querySelector('#email-input').value;
This line of code selects the HTML input element with an id of email-input, gets its value (the email entered by the user), and stores it in the email variable.
if(email != '')
This line of code checks if the email variable is not an empty string.
const xhr = new XMLHttpRequest();
This line of code creates a new instance of the XMLHttpRequest object, which allows us to make HTTP requests from the browser.
xhr.open('POST', 'http://localhost:3000/check-email', true);
This line of code initializes the AJAX request. We are sending a POST request to the URL http://localhost:3000/check-email, which is the endpoint that will check if the email is already in use. The true parameter specifies that the request should be asynchronous.
xhr.setRequestHeader('Content-Type', 'application/json');
This line of code sets the Content-Type header of the request to application/json, which tells the server that we are sending JSON data in the request body.
xhr.onload = () => {
This line of code sets the onload event handler for the AJAX request. When the request is complete and a response has been received, the anonymous function inside the parentheses will be executed.
if (xhr.status === 200) {
This line of code checks if the response status code is 200, which means that the request was successful.
const response = JSON.parse(xhr.responseText);
This line of code parses the response text from JSON format into a JavaScript object and stores it in the response variable.
if (response.emailExists) {
This line of code checks if the emailExists property of the response object is true, which means that the email is already in use.
xhr.send(JSON.stringify({ email }));
This lines of code will send send data to http://localhost:3000/check-email this url.
After this, we have to create app.js file and under this file, we have to write Node JS Code for check Email Already exists or not in MySQL database.
app.js (Server-side (Node.js with Express and MySQL)))
const express = require('express');
const mysql = require('mysql');
const cors = require('cors');
const app = express();
const port = 3000;
const connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'testing'
});
connection.connect((error) => {
if(error)
{
console.log('Error connecting to MySQL database:', error);
return;
}
console.log('Connected to MySQL database');
});
app.use(cors());
app.use(express.json());
app.post('/check-email', (request, response) => {
const email = request.body.email;
const sql = 'SELECT COUNT(*) AS count FROM users WHERE email = ?';
connection.query(sql, [email], (error, results) => {
const count = results[0].count;
const emailExists = count === 1;
response.json({ emailExists });
});
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
In this code, we create an Express app, set up a connection to a MySQL database, and define a route to check the email availability. The route expects a POST request with a JSON payload containing an email property. We use the mysql library to query the database and check if the email already exists in the users table. We then send a JSON response with a emailExists property that indicates whether the email is already in use or not.
Now for run above application, first we have to run app.js file. So we have goes to command prompt and run following command.
node app.js
This command will start Node.js server and for check output in the browser, we have to open index.html file in the browser.
file:///F:/node/email_exist_or_not/index.html
So now you can check email address has been exists or not in MySQL database by entering email address in textbox by using Node.js with MySQL database.
Conclusion
In this blog, we explored how to use Node.js and MySQL to check if an email address already exists in a database. We discussed the steps involved in setting up a MySQL database, installing the mysql module for Node.js, connecting to the MySQL database, and checking if an email address exists in the database. With these tools and techniques, you can implement a robust user authentication system that ensures each user has a unique email address.
0 comments:
Post a Comment