Node.js is a powerful runtime environment for building server-side applications using JavaScript. One common use case for Node.js is creating login pages, which allow users to securely authenticate themselves before accessing a website or application. In this article, I will guide you through an example of creating a login page using Node.js.
Setting Up the Project
To get started, we need to set up a new Node.js project. Open your terminal and navigate to the directory where you want to create the project. Run the following command to initialize a new Node.js project:
npm init -y
This command will create a new package.json file, which is used to manage our project dependencies and settings. Next, we need to install the necessary packages for our login page. Run the following command:
npm install express ejs express-session
We are installing the express, ejs, and express-session packages. The express package will allow us to set up a web server, ejs will help us render HTML templates, and express-session will handle user session management.
Creating the Login Form
Now that our project is set up, let’s create the login form. In your project directory, create a new file called index.js. Open the file in your favorite text editor and add the following code:
const express = require('express');
const session = require('express-session');
const app = express();
// Set up the session middleware
app.use(session({
secret: 'my-secret-key',
resave: false,
saveUninitialized: true
}));
// Set up the form route
app.get('/', (req, res) => {
res.render('login');
});
// Start the server
app.listen(3000, () => {
console.log('Server started on port 3000');
});
In this code, we are importing the necessary packages and setting up the Express app. We also configure the session middleware, which is required for managing user sessions. The get route is set up to render the login template, which we will create in the next step. Finally, we start the Express server on port 3000.
Next, create a new folder called views in your project directory. Inside the views folder, create a new file called login.ejs. Open the file and add the following code:
This code defines a simple login form with inputs for the username and password. When the form is submitted, it will send a POST request to the /login route.
Processing the Login Request
Now that we have the login form, let’s set up the route for processing the login request. Add the following code to the index.js file:
// Process the login request
app.post('/login', (req, res) => {
const { username, password } = req.body;
// Check if the username and password are correct
if (username === 'admin' && password === 'password') {
req.session.loggedIn = true;
res.redirect('/dashboard');
} else {
res.send('Invalid username or password');
}
});
In this code, we define a post route for the /login path. Inside the route handler, we retrieve the username and password from the request body. We then check if the provided credentials match our expected values (in this case, ‘admin’ and ‘password’). If the credentials are correct, we set the loggedIn flag in the session and redirect the user to the dashboard page. Otherwise, we send an error message.
Creating the Dashboard
Finally, let’s create the dashboard page that the user will see after successfully logging in. Create a new file called dashboard.ejs inside the views folder. Open the file and add the following code:
Welcome to the Dashboard!
You are now logged in.
This code defines a simple dashboard page with a welcome message and a logout link. The logout link points to the /logout route, which we will implement next.
Implementing Logout
To complete our login page example, let’s implement the logout functionality. Add the following code to the index.js file:
// Log out the user
app.get('/logout', (req, res) => {
req.session.destroy();
res.redirect('/');
});
In this code, we define a get route for the /logout path. Inside the route handler, we destroy the user’s session and redirect them back to the login page.
Conclusion
Creating a login page in Node.js is a crucial step in building secure web applications. By following the example provided in this article, you can quickly set up a login page with user authentication and session management. Remember to always handle user credentials securely, using techniques like password hashing and salting, to protect user data.
Now that you have a basic understanding of how to create a login page in Node.js, feel free to explore further and add more functionality to your login system. Happy coding!
