How To Restric Html Page With Login Authentication

Log in here

Hey there! Today I want to talk about an important topic in web development: how to restrict access to an HTML page with login authentication. This is a common requirement when building web applications, as it allows you to protect sensitive information and ensure that only authorized users can access certain pages.

Restricting access to an HTML page involves creating a login system that authenticates users and grants them access based on their credentials. There are several ways to implement this, but in this article, I’ll focus on a simple method using JavaScript and a server-side language like PHP.

Setting up the login form

The first step is to create a login form in your HTML page. This form will collect the user’s credentials (usually a username and password) and send them to the server for authentication.

<form id="loginForm" method="POST" action="login.php">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>

<button type="submit">Login</button>
</form>

In the code above, we have a simple login form with fields for the username and password. The form is set to submit the data to a PHP script called “login.php” for authentication.

Implementing the server-side authentication

Now that we have the login form, let’s create the server-side script that will handle the authentication. In this example, we’ll use PHP to check the credentials and set a session variable to indicate that the user is logged in.

<?php
session_start();

if ($username === 'admin' && $password === 'password') {
$_SESSION['loggedIn'] = true;
header('Location: restricted.html');
exit;
} else {
header('Location: login.html');
exit;
}
?>

In the code above, we start a session and retrieve the submitted username and password from the POST data. We then perform the necessary authentication logic (e.g., checking against a database of users). If the credentials are valid, we set the $_SESSION[‘loggedIn’] variable to true and redirect the user to a restricted.html page. If the credentials are invalid, we redirect them back to the login page.

Restricting access to the restricted page

Now that we have the login form and authentication logic in place, let’s see how we can restrict access to the restricted.html page. We’ll use JavaScript to check if the user is logged in before allowing them to view the page.

<script>
if (!sessionStorage.getItem('loggedIn')) {
window.location.href = 'login.html';
}
</script>

In the code above, we use sessionStorage.getItem(‘loggedIn’) to check if the session variable is set. If it’s not set, meaning the user is not logged in, we redirect them to the login.html page.

Conclusion

In this article, I’ve shown you how to restrict access to an HTML page with login authentication. By implementing a login form, server-side authentication logic, and client-side access restriction, you can ensure that only authorized users can view certain pages of your web application.

Remember, this is just a basic implementation, and there are many ways to enhance security and improve the user experience. Consider using encryption for storing passwords, implementing password reset functionality, and adding a remember me feature. Security should always be a top priority when handling user authentication.

If you want to try out the code examples and see them in action, you can check out the live demo of this article.

Thanks for reading, and happy coding!