A simple and easy to use PHP snippet to password protect a single page or multiple pages. This is just a template with plain text password, don't forget to add your preferred hashing function to hash and verify your passwords. Each user is associated with a random token which is used as a cookie value, generate whatever token you like for each user, longer the better.
<?php
$user_info=[
'admin'=>['adminpassword','ynNYKWngfgW8gI0WX72g1tRq0RLpDiNz'],
'root'=>['rootpassword','16n2VZKFLI3inP3xS1dfdoY60pCOhFIZ'],
'manager'=>['managerpassword','ML7IZ0updvFCKtcdEECBf6qCmnX8u4lB']
];
if (!isset($_COOKIE['token']))
{
$login = true;
}
else
{
foreach ($user_info as $key => $value)
{
if ($value[1] == $_COOKIE['token'])
{
$login = false;
break;
}
else
{
$login = true;
}
}
}
if (isset($_POST['Submit']) && $login == true)
{
if (isset($_POST['username']) && isset($_POST['password']))
{
foreach ($user_info as $key => $value)
{
if ($key == $_POST['username'] && $value[0] == $_POST['password'])
{
setcookie("token", $value[1], ["expires" => "", "path" => '/', "domain" => "", "secure" => false, "httponly" => true, "samesite" => "Strict"]);
$login = false;
header('Location: '.$_SERVER['PHP_SELF']);
exit;
}
else
{
$login = true;
}
}
}
}
if ($login): ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Restricted Area</title>
<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
Html, body{
height:100%;
margin:0px;
padding:0px;
}
.grandParentContaniner{
display:table;
height:100%;
margin: 0 auto;
}
.parentContainer{
display:table-cell;
vertical-align:middle;
}
.parentContainer #loginForm{
padding:10px;
width:auto;
}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
line-height: 20px;
}
textarea:focus, input:focus{
outline: none;
}
.alert {
padding: 5px;
margin: 10px;
background-color: #f44336;
color: white;
}
.btn {
background-color: #2196F3;
color: white;
padding: 10px;
font-size: 16px;
border: none;
outline: none;
height: 40px;
}
.btn:hover, .dropdown:hover .btn {
background-color: #0b7dda;
}
svg {
display: inline-block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
@media screen and (max-width: 640px) {
.input {
margin: 5px 0;
}
.grandParentContaniner{
width: 100%;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
@media (prefers-color-scheme: dark) {
body{
background: #000;
color: #fff;
}
input[type="text"], input[type="password"], textarea {
background-color : #000;
color: #fff;
}
}
</style>
</head>
<body>
<div class="grandParentContaniner">
<div class="parentContainer">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div id='loginForm' class="form-inline">
<input type="text" placeholder="Username" name="username" class="input" required>
<input type="password" placeholder="Password" name="password" class="input" required>
<div style="display: flex;flex-flow: row wrap;">
<button class="btn" name="Submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
<?php
exit;
endif;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Success</title>
</head>
<body>
Hello <?php echo $key;?>, you are now logged in.
</body>
</html>
Let me know if you have any comments or if there is any error in this guide.