How to make login with OTP Authentication in PHP

ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY

Publish perfectly-optimized content in 1-click




How to make login with OTP Authentication in PHP





Login with an OTP One Time Password. code is a very secure method for authenticating a user.
This method consists of dynamically generating a one-time password called OTP code.
which can be sent either to the user's email or to his mobile phone.



When the user enters the OTP code, the application will authenticate the user using this code.
In this tutorial, we will see an example to authenticate user login via an OTP code using email

In this example, when the registered user enters email to login, an OTP code is sent to the email address.
By using this OTP code the user will be authentificated. This code will be invalid once the user uses it.

You may choose to substitute this random code generation logic using your preferred mechanism.
This code is sent to the user’s email by using PHPmailer, see How to easily send an email with PHPMailer in PHP





The following code shows login form to the user to enter his email address.
On entering email, it shows an input to enter the OTP code sent to his email address.
After submitting the OTP code , PHP will validate the code and show authentication result to the user.

First we start by creating our tables.
These are the queries to create the tables 'users' and 'otp'


SQL

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL,
  `email` varchar(255) NOT NULL
)


CREATE TABLE IF NOT EXISTS `otp` (
  `id` int(11) NOT NULL,
  `otp` varchar(10) NOT NULL,
  `created_date` datetime NOT NULL
)

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL,
  `email` varchar(255) NOT NULL
)
</br>
CREATE TABLE IF NOT EXISTS `otp` (
  `id` int(11) NOT NULL,
  `otp` varchar(10) NOT NULL,
  `created_date` datetime NOT NULL
)
</br>



PHP Code ( with CSS and HTML)

<?php
require('phpmailer/class.phpmailer.php');
require('phpmailer/class.smtp.php');


if(!empty($_POST["email"])) {
	$result = mysqli_query($conn,"select * from users where email='" . $_POST["email"] . "'");
	$count  = mysqli_num_rows($result);
	if($count>0) {
		// generate OTP
		$otp = rand(50000,99999);
		// Send OTP
		$mail = new PHPMailer();
		$mail->IsSMTP();
		$mail->SMTPDebug = 0;
		$mail->SMTPAuth = TRUE;
		$mail->SMTPSecure = 'tls'; // tls or ssl
		$mail->Port     = "smtp_port";
		$mail->Username = "smtp_username";
		$mail->Password = "smtp_password";
		$mail->Host     = "smtp_host";
		$mail->Mailer   = "smtp";
		$mail->SetFrom($email_from, $name_from);
		$mail->AddAddress($_POST["email"]);
		$mail->Subject = " Your OTP to Login: it will be expired in an hour";
		$mail->MsgHTML("One time OTP:<br/><br/>" . $otp);
		$mail->IsHTML(true);		
		$status  = $mail->Send();


		if($status == 1) {
			$created_date=date("Y-m-d H:i:s");
   		   $result = mysqli_query($conn,"inser into otp(otp,created_date) values ('" . $otp . "', '" . date("Y-m-d H:i:s"). "')");
			$current_id = mysqli_insert_id($conn);
			if(!empty($current_id)) {
				$ok = 1;
			}
		}
	} else {
		$err_message = "Email not exists!";
	}
  }
}
	if(!empty($_POST["otp"])) {
		$result = mysqli_query($conn,"select * from otp where otp='" . $_POST["otp"] . "' and and now() <= date_add(create_at, interval 1 hour)");
		$count  = mysqli_num_rows($result);
		if(!empty($count)) {
			$success =1;
			$err_message = "expired OTP!";
		}	
	}
?>
<html>
<head>
<title>User Login</title>
<style>
body{
	font-family:  "Times New Roman", Times, serif;
}


.tblheader { 
	font-size: 20px;	
}
.tblrow { padding:20px; }




.container {
  max-width: 300px;
  max-height: 300px;
  position: relative;
  margin: auto;
  top:200px;
  background: #ffb5b5;
}


#login {
	border: #95bff6 2px solid;
    background: #CCCCFF;
    border-radius: 4px;
    max-width: 300px;
	padding:20px 30px 30px;
	text-align:center;
}


#err_message {
	color: #000;
    background: #FF5555;
    border: #FF0000 1px solid;
	width: 100%;
    max-width: 300px;
    padding: 10px 30px;
    border-radius: 4px;
    margin-bottom: 5px;    
}


#otp{
	border: #4A96D8 1px solid;
    padding: 10px 20px;
	border-radius:4px;
}


#email{
	border: #4A96D8 1px solid;
    padding: 10px 20px;
	border-radius:4px;
}
#submit {
	padding: 10px 20px;
    background: #000066;
    border: #d1e8ff 1px solid;
    color: #FFF;
	border-radius:4px;
	cursor:pointer;
}
</style>
</head>
<body>
	<?php
	$success=1;
		if(!empty($err_message)) {
	?>
	<div id="err_message"><?php echo $err_message; ?></div>
	<?php
		}
	?>


<div class="container">
<form name="frmUser" method="post" action="">
	<div id="login">
		<?php 
		if(!empty($success == 1)) { 
		?>
		<div class="tblheader">Enter the received OTP</div>
		<p style="color:#AC0600;">Check your email for the OTP</p>


		<div class="tblrow">
			<input type="text" id="otp" placeholder="One Time Password"  required>
		</div>
		<div class="tblheader"><input type="submit" id="submit" value="Submit" ></div>
		<?php 
			} else if ($success == 2) {
        ?>
		<p style="color:#AC0600;">Welcome, You have successfully logged in!</p>
		<?php
			}
			else {
		?>
		<div class="tblheader">Enter Email to get the OTP code</div>
		<div class="tblrow"><input type="text" id="email" placeholder="Email"  required></div>
		<div class="tblheader"><input type="submit" id="submit" value="Submit"></div>
		<?php 
			}
		?>
	</div>
</form>
</div>
</body>
</html>

<?php
require('phpmailer/class.phpmailer.php');
require('phpmailer/class.smtp.php');
</br>
if(!empty($_POST["email"])) {
	$result = mysqli_query($conn,"select * from users where email='" . $_POST["email"] . "'");
	$count  = mysqli_num_rows($result);
	if($count>0) {
		// generate OTP
		$otp = rand(50000,99999);
		// Send OTP
		$mail = new PHPMailer();
		$mail->IsSMTP();
		$mail->SMTPDebug = 0;
		$mail->SMTPAuth = TRUE;
		$mail->SMTPSecure = 'tls'; // tls or ssl
		$mail->Port     = "smtp_port";
		$mail->Username = "smtp_username";
		$mail->Password = "smtp_password";
		$mail->Host     = "smtp_host";
		$mail->Mailer   = "smtp";
		$mail->SetFrom($email_from, $name_from);
		$mail->AddAddress($_POST["email"]);
		$mail->Subject = " Your OTP to Login: it will be expired in an hour";
		$mail->MsgHTML("One time OTP:<br/><br/>" . $otp);
		$mail->IsHTML(true);		
		$status  = $mail->Send();
</br>
		if($status == 1) {
			$created_date=date("Y-m-d H:i:s");
   		   $result = mysqli_query($conn,"inser into otp(otp,created_date) values ('" . $otp . "', '" . date("Y-m-d H:i:s"). "')");
			$current_id = mysqli_insert_id($conn);
			if(!empty($current_id)) {
				$ok = 1;
			}
		}
	} else {
		$err_message = "Email not exists!";
	}
  }
}
	if(!empty($_POST["otp"])) {
		$result = mysqli_query($conn,"select * from otp where otp='" . $_POST["otp"] . "' and and now() <= date_add(create_at, interval 1 hour)");
		$count  = mysqli_num_rows($result);
		if(!empty($count)) {
			$success =1;
			$err_message = "expired OTP!";
		}	
	}
?>
<html>
<head>
<title>User Login</title>
<style>
body{
	font-family:  "Times New Roman", Times, serif;
}
</br>
.tblheader { 
	font-size: 20px;	
}
.tblrow { padding:20px; }
</br>
</br>
.container {
  max-width: 300px;
  max-height: 300px;
  position: relative;
  margin: auto;
  top:200px;
  background: #ffb5b5;
}
</br>
#login {
	border: #95bff6 2px solid;
    background: #CCCCFF;
    border-radius: 4px;
    max-width: 300px;
	padding:20px 30px 30px;
	text-align:center;
}
</br>
#err_message {
	color: #000;
    background: #FF5555;
    border: #FF0000 1px solid;
	width: 100%;
    max-width: 300px;
    padding: 10px 30px;
    border-radius: 4px;
    margin-bottom: 5px;    
}
</br>
#otp{
	border: #4A96D8 1px solid;
    padding: 10px 20px;
	border-radius:4px;
}
</br>
#email{
	border: #4A96D8 1px solid;
    padding: 10px 20px;
	border-radius:4px;
}
#submit {
	padding: 10px 20px;
    background: #000066;
    border: #d1e8ff 1px solid;
    color: #FFF;
	border-radius:4px;
	cursor:pointer;
}
</style>
</head>
<body>
	<?php
	$success=1;
		if(!empty($err_message)) {
	?>
	<div id="err_message"><?php echo $err_message; ?></div>
	<?php
		}
	?>
</br>
<div class="container">
<form name="frmUser" method="post" action="">
	<div id="login">
		<?php 
		if(!empty($success == 1)) { 
		?>
		<div class="tblheader">Enter the received OTP</div>
		<p style="color:#AC0600;">Check your email for the OTP</p>
</br>
		<div class="tblrow">
			<input type="text" id="otp" placeholder="One Time Password"  required>
		</div>
		<div class="tblheader"><input type="submit" id="submit" value="Submit" ></div>
		<?php 
			} else if ($success == 2) {
        ?>
		<p style="color:#AC0600;">Welcome, You have successfully logged in!</p>
		<?php
			}
			else {
		?>
		<div class="tblheader">Enter Email to get the OTP code</div>
		<div class="tblrow"><input type="text" id="email" placeholder="Email"  required></div>
		<div class="tblheader"><input type="submit" id="submit" value="Submit"></div>
		<?php 
			}
		?>
	</div>
</form>
</div>
</body>
</html>