How to create a login system with remember me feature in PHP
In this tutorial, we will create an authentication system with remember me feature which will allow web applications to save the user’s logged in status. When the user tries to log in by providing its user name and password, the application verifies the login credentials against the data stored in the database. If a match exists, the web application saves the user id and logged-in status before redirection the user to the dashboard.
Sound simple. Right?
But what is this remember me feature?
Remember me feature is a way to facilitate users of the web applications. Usually, when the user enters login information in the login form, there is a checkbox with a label Remember me. In case the user decides to click on this checkbox the web application will remember him even if he closes the web browser. Due to this feature, the user doesn’t have to re-login into the web application. The web application will save the user’s login information into cookies.
The Logic
To access the web application database, the user has to enter his login credentials in the web login form.
Now there could be two cases:
1. The user enters the correct information
2. The user enters the incorrect username or password
In case of incorrect username or password, the user will be redirected to login page again which will show an error message.
If the user enters the correct information, the login page will redirect him to the dashboard page from where he can log out as well.
If the user checks remember me checkbox while he logs in, the web application will save his login credentials in cookies for the 30 days. That means if he closes the browser instead of proper sign out he doesn’t have to re-login to access the application within 30 days.
If the user signs out, the web application will completely delete all session and cookie variables of the user.
The application has four pages: login.php, login_ac.php, dashboard.php, and logout.php. Any attempt to access inner pages will display an error message of unauthorized access.
Now, you have understood the logic let’s dive into the code.
Step 1
Let’s start with the database.
You can use MySQL console or PHPMyAdmin interface to create a database called login_system
Now create a table users to hold the user’s login information.
DROP TABLE IF EXISTS `users`;
CREATE TABLE IF NOT EXISTS `users` (
`user_id` int(11) NOT NULL,
`user_name` varchar(25) NOT NULL,
`user_pass` varchar(100) NOT NULL,
`join_date` timestamp NOT NULL,
PRIMARY KEY (`user_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
COMMIT;
Fill-in with the dummy data
While entering the data, we select MD5, a hashing algorithm which will encrypt the password. You can select any given hashing algorithm to encrypt the user’s password.
As this tutorial is only for educational purpose, you can choose a weak password like 123 for the user’s authentication system.
Step 2
We will be creating the following HTML form. The form is built using a responsive front-end framework called Materialize. To use materialize, you need materialize.min.css and materialize.min.js. You can download these files from its official website, or you can access these from the CDN.
https://materializecss.com/getting-started.html[T1]
I prefer the CDN method to include external CSS and JavaScript files.
To use Materialize, through CDN add the following lines of code in your login.php document. In the head section include:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Just before the body closing tag (</body>) add the following line of code.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
In the login form, we will have two input fields (username and password), one checkbox (remember me) and a submit button.
Use this link as an outbound link in the article.
After the user enters the username, password and select remember me checkbox, the form will look like the following.
The Code
Login.php
This will display the HTML login form.
<?php
session_start();
?>
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8">
<title>PHP Login System with Remember me feature</title>
<! — materialize CSS →
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href=”https://fonts.googleapis.com/css?family=Open+Sans" rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”form_div shadow”>
<div class=”row center-align”>
<h5>Login Form</h5>
</div>
<?php
if(isset($_GET[‘error’])){
?>
<p> You entered invalid user name or password.</p><br>
<?php
}
?>
<form class=”” action=”login_ac.php” method=”post”>
<div class=”row”>
<div class=”input-field col s12">
<input name=”user_name” type=”text” value=”admin” >
<label for=”user_name”>User Name</label>
</div>
<div class=”input-field col s12">
<input name=”user_pass” type=”password” >
<label for=”user_pass”>Password</label>
</div>
<div class=”input-field col s12">
<label>
<input type=”checkbox” name=”remember_me” />
<span>Remember Me</span>
</label>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12">
<button class=”btn waves-effect waves-light” type=”submit” name=”submit” value=”login”>Login </button>
</div>
</div>
</form>
</div>
</div>
<! — materialize JS →
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Login_ac.php
Login_ac.php will process the data send to it via PHP method. It will query the database against the data entered by the user. If a match found, it will set the session variables.
<?php
session_start();
include ‘config.php’;
?>
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8">
<title>PHP Login System with Remember me feature</title>
<link href=”https://fonts.googleapis.com/css?family=Open+Sans" rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body style=”padding:40px;”>
<?php
if(isset($_POST[‘submit’])){
$user_name = $_POST[‘user_name’];
$user_pass = $_POST[‘user_pass’];
$query = “select * from users where user_name = ‘“.$user_name.”’ and user_pass = ‘“. md5($user_pass) . “‘“;
$result = mysqli_query( $conn, $query);
$row = mysqli_fetch_array($result);
$num_rows = mysqli_num_rows($result);
if($num_rows==1){
$_SESSION[‘logged’] = 1;
$_SESSION[‘user’] = $user_name;
$_SESSION[‘valid_user’] =1;
if( ($_POST[‘remember_me’]==1) || ($_POST[‘remember_me’]==’on’)) {
$hour = time()+3600 *24 * 30;
setcookie(‘userid’, $row[‘user_id’], $hour);
setcookie(‘username’, $user_name, $hour);
setcookie(‘active’, 1, $hour);
}
header(“Location:dashboard.php”);
}//valid user
else{
header(“Location:login.php?error=1”);
}//invalid user
}else{
echo “Unauthorized access. Please <a href=’login.php’>Login</a>”;
die();
}
?>
</body>
</html>
Dashboard.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8">
<title>PHP Login System with Remember me feature</title>
<link href=”https://fonts.googleapis.com/css?family=Open+Sans" rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body style=”padding:40px;”>
<?php
if(isset($_COOKIE[‘username’])) $user = $_COOKIE[‘username’];
if(isset($_SESSION[‘user’])) $user = $_SESSION[‘user’];
if(!isset($user)){
echo “Unauthorized access. Please <a href=’login.php’>Login</a>”;
die();
}
?>
<p>
Welcome <?php echo $user; ?>
<br>
<a href=”logout.php”>Logout</a>
</p>
</body>
</html>
Logout.php
This will delete all session and cookie variables.
<?php
session_start();
unset($_SESSION[‘logged’]);
unset($_SESSION[‘user’]);
unset($_SESSION[‘valid_user’] );
$hour = time() — 3600 *24 * 30;
setcookie(‘userid’, “”, $hour);
setcookie(‘username’, “”, $hour);
setcookie(‘active’, “”, $hour);
header(“Location:login.php”);
?>
