Login with OTP using PHP & MySQL
- Tech Area
- April 17, 2023
In this tutorial, we have discuss how to login with OTP (One Time Password) using PHP and MySQL. You can use OTP functionality in login form to make more secure. When user enter email address then One Time Password generated and send to user email address to verify OTP to complete login process.
If you are working on a project and want to make secure login form with OTP using PHP and MySQL. then this tutorial will help you to achieve this task easily.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (login form to send OTP)
3- otpverify.php (OTP verification form)
4- dashboard.php
5- logout.php
Below are the step by step process of login system with OTP using PHP and MySQL.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create Login Form
Now create a new file index.php This is the main file used to create login form to implement login functionality. First, we will create an HTML form which have email address field.
This screenshot shows the UI for login form.
index.php
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<style>
.box
{
width:100%;
max-width:600px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:0 auto;
}
.error
{
color: red;
font-weight: 700;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<h3 align="center">Login Form</h3><br/>
<div class="box">
<form method="post" >
<div class="form-group">
<label for="email">Enter Your Login Email</label>
<input type="text" name="email" id="email" placeholder="Enter Email" required class="form-control"/>
</div>
<div class="form-group">
<input type="submit" id="login" name="login" value="Submit" class="btn btn-success" />
</div>
<p class="error"><?php if(!empty($msg)){ echo $msg; } ?></p>
</form>
</div>
</div>
</div>
</body>
</html>Step 3: User Verify and Send OTP
In this step, we will verify user via email address if everything is correct than send OTP on that email address and redirected to otpverify.php page.
<?php
session_start();
include_once('connection.php');
if(isset($_REQUEST['login']))
{
$email = $_REQUEST['email'];
$select_query = mysqli_query($connection,"select * from tbl_student where email='$email'");
$res = mysqli_num_rows($select_query);
if($res>0)
{
$data = mysqli_fetch_array($select_query);
$name = $data['name'];
$_SESSION['name'] = $name;
$otp = rand(10000, 99999); //Generate OTP
include_once("SMTP/class.phpmailer.php");
include_once("SMTP/class.smtp.php");
$message = '<div>
<p><b>Hello!</b></p>
<p>You are recieving this email because we recieved a OTP request for your account.</p>
<br>
<p>Your OTP is: <b>'.$otp.'</b></p>
<br>
<p>If you did not request OTP, no further action is required.</p>
</div>';
$email = $email;
$mail = new PHPMailer;
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "tls";
$mail->Host = 'smtp.gmail.com';
$mail->Port = 587;
$mail->Username = ""; // Enter your username
$mail->Password = ""; // Enter Password
$mail->FromName = "Tech Area";
$mail->AddAddress($email);
$mail->Subject = "OTP";
$mail->isHTML( TRUE );
$mail->Body =$message;
if($mail->send())
{
$insert_query = mysqli_query($connection,"insert into tbl_otp_check set otp='$otp', is_expired='0'");
header('location:otpverify.php');
}
else
{
$msg = "Email not delivered";
}
}
else
{
$msg = "Invalid Email";
}
}
?>Step 4: Create OTP Verify Form
Now create a new file otpverify.php in which we will create form for OTP verification.
This screenshot shows the UI for OTP Verify form.
otpverify.php
<html>
<head>
<title>OTP Verify</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<style>
.box
{
width:100%;
max-width:600px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:0 auto;
}
.error
{
color: red;
font-weight: 700;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<h3 align="center">Login Form</h3><br/>
<div class="box">
<form method="post" >
<div class="form-group">
<label for="otp">Enter OTP</label>
<input type="text" name="otp" id="otp" placeholder="One Time Password" required
data-parsley-type="otp" data-parsley-trigg
er="keyup" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="otp_verify" value="Submit" class="btn btn-success" />
</div>
<p class="error"><?php if(!empty($msg)){ echo $msg; } ?></p>
</form>
</div>
</div>
</div>
</body>
</html> Step 5: OTP Verification
In this step, we will check that OTP is expired or not and check not more than five minutes old then validate otherwise error display “Invalid OTP!” if everything is correct then redirected to dashboard.php page.
<?php
session_start();
if(empty($_SESSION['name']))
{
header('location:index.php');
}
include_once('connection.php');
if(isset($_REQUEST['otp_verify']))
{
$otp = $_REQUEST['otp'];
$select_query = mysqli_query($connection,"select * from tbl_otp_check where otp='$otp' and is_expired!=1 and NOW()<=DATE_ADD(create_at,interval 5 minute)");
$count = mysqli_num_rows($select_query);
if($count>0)
{
$select_query = mysqli_query($connection, "update tbl_otp_check set is_expired=1 where otp='$otp'");
header('location:dashboard.php');
}
else
{
$msg = "Invalid OTP!";
}
}
?>Download Source Code
Join 10,000+ subscriber