January 16, 2025

Building a Simple No-Database Login System Using JavaScript

In this blog post, we'll create a basic login system using HTML and JavaScript without the need for a database. This tutorial will demonstrate how to use hardcoded user credentials for simplicity.

Why Use a No-Database Login System?

A no-database login system is useful for small projects, testing purposes, or learning how to implement basic authentication. In a production environment, you would typically use a database for storing user credentials securely. However, for simplicity and demonstration, we'll use hardcoded credentials in this tutorial.

HTML and CSS for the Login Form

We'll start by creating the HTML and CSS for our login form. The HTML will include input fields for the username and password, and a button to trigger the login function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login System</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username"><br>
        <input type="password" id="password" placeholder="Password"><br>
        <button onclick="login()">Login</button>
        <p id="message"></p>
    </div>
    <script src="login.js"></script>
</body>
</html>

JavaScript for Handling the Login Logic

Next, we'll create a JavaScript file (login.js) that contains the logic for handling the login process. This script will include hardcoded user credentials and a function to verify the entered credentials.

// Hardcoded user credentials
const users = [
    { username: 'user1', password: 'password1' },
    { username: 'user2', password: 'password2' }
];

function login() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const message = document.getElementById('message');

    // Check if the entered credentials match any user
    const user = users.find(user => user.username === username && user.password === password);

if (user) {
        message.textContent = 'Login successful!';
        message.style.color = 'green';
    } else {
        message.textContent = 'Invalid username or password';
        message.style.color = 'red';
    }
}

Explanation of the Code

HTML and CSS

HTML Structure: The HTML code creates a simple login form with fields for the username and password. It also includes a button to trigger the login function and a paragraph to display messages.
CSS Styling: Basic styling is applied to make the login form look presentable. The form is centered on the page, and some styling is added to the input fields and button for better aesthetics.

JavaScript

Hardcoded User Credentials: The users array contains hardcoded usernames and passwords for demonstration purposes.
Login Function: The login function retrieves the values entered in the username and password fields and checks if they match any of the hardcoded credentials. If the credentials are valid, it displays a success message; otherwise, it shows an error message.

Cons of a No-Database Login System

While a no-database login system can be useful for small projects and learning purposes, it has several security and scalability issues:

Security Risks: Hardcoding user credentials in the JavaScript file is highly insecure. If someone gains access to the code, they can easily see and misuse the credentials.
Lack of Encryption: This system does not encrypt the user credentials, making it vulnerable to interception and theft.
Scalability Issues: Hardcoding credentials is not scalable. As the number of users grows, managing and updating the credentials becomes cumbersome.
No Persistence: The credentials are stored in the client's browser session, meaning any changes or logins will not persist across sessions or different devices.

Conclusion

This simple no-database login system provides a basic understanding of how authentication can be implemented using HTML and JavaScript. While this method is not suitable for production environments due to the security and scalability issues mentioned above, it serves as a great starting point for beginners to learn about authentication. For real-world applications, consider using secure methods for storing and verifying credentials, such as databases and hashed passwords.

I hope you found this tutorial helpful! If you have any questions or need further assistance, feel free to leave a comment below. Happy coding!

Javascript , Tools

29 0