Creating a Login Form with OTP Verification through Email in PHP Tutorial

Submitted by oretnom23 on Saturday, February 12, 2022 - 16:08.

In this tutorial, I will show how to create a simple 2 Factor Authentication when logging in using PHP Language. This will help you to create a more secure authentication for your system users in your current or future PHP Projects. The system will generate an OTP or the One-Time-PIN every time the users attempt to login into the system. Here, the OTP will be through an email using GMail SMTP.

The application that we'll be crating in this tutorial has simple functionalities such registration, login, verification, home page, and logout. I hope this will help you.

Getting Started

Download and Install XAMPP as your virtual server in your local machine. Also, download Bootstrap and jQuery for the design of the application that we will be creating.

Setting-Up the XAMPP to send Mail

First, locate your XAMPP's php.ini file and open it with your favorite text editor such as notepad++ or sublime text. Next, in your text editor find the mail configuration by searching it using "[mail function]". Then, follow the configuration shown in the image below.

Next, setup the XAMPP's sendmail configuration. Locate and open the sendmail.ini file in your text editor. Then, follow the configuration shown in the image below.

Note: Use your gmail credential of the account you want use to send mail.

Allowing Less Secure Apps

Next, allow your gmail to be access by less secure apps so you can send mail locally using the app that we'll be creating. Follow the steps below.

Step 1

Open you google account's settings.

Step 2

Navigate the page into the 'security' and click the link on turning on less secure apps.

Step 3

Toggle to allow less secure apps.

Creating the Database

In your browser, browse the XAMPP's PHPMyAdmin [http://localhost/phpmyadmin] and create a new database naming login_otp_db. Next, navigate the page into the SQL Tab and copy/paste the mysql script below in the provided text field in the page. Then, click the 'GO'button.

  1. CREATE TABLE `users` (
  2.   `id` int(30) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  3.   `firstname` text NOT NULL,
  4.   `middlename` text DEFAULT NULL,
  5.   `lastname` text NOT NULL,
  6.   `email` text NOT NULL,
  7.   `password` text NOT NULL,
  8.   `otp` varchar(6) DEFAULT NULL,
  9.   `otp_expiration` datetime DEFAULT NULL,
  10.   `date_created` datetime NOT NULL DEFAULT current_timestamp()
  11. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Creating the PHP Main Class

The application that we are creating will be using an OOP Approach in writing the back-end scripts of the app. The class includes the database configuration and send mail function. Save the code file below as MainClass.php.

  1. <?php
  2. if(session_status() === PHP_SESSION_NONE)
  3. session_start();
  4. Class MainClass{
  5.     protected $db;
  6.     function __construct(){
  7.         $this->db = new mysqli('localhost','root','','login_otp_db');
  8.         if(!$this->db){
  9.             die("Database Connection Failed. Error: ".$this->db->error);
  10.         }
  11.     }
  12.     function db_connect(){
  13.         return $this->db;
  14.     }
  15.     public function register(){
  16.         foreach($_POST as $k => $v){
  17.             $$k = $this->db->real_escape_string($v);
  18.         }
  19.         $password = password_hash($password, PASSWORD_DEFAULT);
  20.         $check = $this->db->query("SELECT * FROM `users` where `email`= '$email}' ")->num_rows;
  21.         if($check > 0){
  22.             $resp['status'] = 'failed';
  23.             $_SESSION['flashdata']['type']='danger';
  24.             $_SESSION['flashdata']['msg'] = ' Email already exists.';
  25.         }else{
  26.             $sql = "INSERT INTO `users` (firstname,middlename,lastname,email,`password`) VALUES ('$firstname','$middlename','$lastname','$email','$password')";
  27.             $save = $this->db->query($sql);
  28.             if($save){
  29.                 $resp['status'] = 'success';
  30.             }else{
  31.                 $resp['status'] = 'failed';
  32.                 $resp['err'] = $this->db->error;
  33.                 $_SESSION['flashdata']['type']='danger';
  34.                 $_SESSION['flashdata']['msg'] = ' An error occurred.';
  35.             }
  36.         }
  37.         return json_encode($resp);
  38.     }
  39.     public function login(){
  40.         extract($_POST);
  41.         $sql = "SELECT * FROM `users` where `email` = ? ";
  42.         $stmt = $this->db->prepare($sql);
  43.         $stmt->bind_param('s',$email);
  44.         $stmt->execute();
  45.         $result = $stmt->get_result();
  46.         if($result->num_rows > 0){
  47.             $data = $result->fetch_array();
  48.             $pass_is_right = password_verify($password,$data['password']);
  49.             $has_code = false;
  50.             if($pass_is_right && (is_null($data['otp']) || (!is_null($data['otp']) && !is_null($data['otp_expiration']) && strtotime($data['otp_expiration']) < time()) ) ){
  51.                 $otp = sprintf("%'.06d",mt_rand(0,999999));
  52.                 $expiration = date("Y-m-d H:i" ,strtotime(date('Y-m-d H:i')." +1 mins"));
  53.                 $update_sql = "UPDATE `users` set otp_expiration = '{$expiration}', otp = '{$otp}' where id='{$data['id']}' ";
  54.                 $update_otp = $this->db->query($update_sql);
  55.                 if($update_otp){
  56.                     $has_code = true;
  57.                     $resp['status'] = 'success';
  58.                     $_SESSION['otp_verify_user_id'] = $data['id'];
  59.                     $this->send_mail($data['email'],$otp);
  60.                 }else{
  61.                     $resp['status'] = 'failed';
  62.                     $_SESSION['flashdata']['type'] = 'danger';
  63.                     $_SESSION['flashdata']['msg'] = ' An error occurred while loggin in. Please try again later.';
  64.                 }
  65.  
  66.             }else if(!$pass_is_right){
  67.                $resp['status'] = 'failed';
  68.                $_SESSION['flashdata']['type'] = 'danger';
  69.                $_SESSION['flashdata']['msg'] = ' Incorrect Password';
  70.             }
  71.         }else{
  72.             $resp['status'] = 'failed';
  73.             $_SESSION['flashdata']['type'] = 'danger';
  74.             $_SESSION['flashdata']['msg'] = ' Email is not registered.';
  75.         }
  76.         return json_encode($resp);
  77.     }
  78.     public function get_user_data($id){
  79.         extract($_POST);
  80.         $sql = "SELECT * FROM `users` where `id` = ? ";
  81.         $stmt = $this->db->prepare($sql);
  82.         $stmt->bind_param('i',$id);
  83.         $stmt->execute();
  84.         $result = $stmt->get_result();
  85.         $dat=[];
  86.         if($result->num_rows > 0){
  87.             $resp['status'] = 'success';
  88.             foreach($result->fetch_array() as $k => $v){
  89.                 if(!is_numeric($k)){
  90.                     $data[$k] = $v;
  91.                 }
  92.             }
  93.             $resp['data'] = $data;
  94.         }else{
  95.             $resp['status'] = 'false';
  96.         }
  97.         return json_encode($resp);
  98.     }
  99.     public function resend_otp($id){
  100.         $otp = sprintf("%'.06d",mt_rand(0,999999));
  101.         $expiration = date("Y-m-d H:i" ,strtotime(date('Y-m-d H:i')." +1 mins"));
  102.         $update_sql = "UPDATE `users` set otp_expiration = '{$expiration}', otp = '{$otp}' where id = '{$id}' ";
  103.         $update_otp = $this->db->query($update_sql);
  104.         if($update_otp){
  105.             $resp['status'] = 'success';
  106.             $email = $this->db->query("SELECT email FROM `users` where id = '{$id}'")->fetch_array()[0];
  107.             $this->send_mail($email,$otp);
  108.         }else{
  109.             $resp['status'] = 'failed';
  110.             $resp['error'] = $this->db->error;
  111.         }
  112.         return json_encode($resp);
  113.     }
  114.     public function otp_verify(){
  115.         extract($_POST);
  116.          $sql = "SELECT * FROM `users` where id = ? and otp = ?";
  117.          $stmt = $this->db->prepare($sql);
  118.          $stmt->bind_param('is',$id,$otp);
  119.          $stmt->execute();
  120.          $result = $stmt->get_result();
  121.          if($result->num_rows > 0){
  122.              $resp['status'] = 'success';
  123.              $this->db->query("UPDATE `users` set otp = NULL, otp_expiration = NULL where id = '{$id}'");
  124.              $_SESSION['user_login'] = 1;
  125.              foreach($result->fetch_array() as $k => $v){
  126.                  if(!is_numeric($k))
  127.                  $_SESSION[$k] = $v;
  128.              }
  129.          }else{
  130.              $resp['status'] = 'failed';
  131.              $_SESSION['flashdata']['type'] = 'danger';
  132.              $_SESSION['flashdata']['msg'] = ' Incorrect OTP.';
  133.          }
  134.          return json_encode($resp);
  135.     }
  136.     function send_mail($to="",$pin=""){
  137.         if(!empty($to)){
  138.             try{
  139.                 $email = '[email protected]';
  140.                 $headers = 'From:' .$email . '\r\n'. 'Reply-To:' .
  141.                 $email. "\r\n" .
  142.                 'X-Mailer: PHP/' . phpversion()."\r\n";
  143.                 $headers .= "MIME-Version: 1.0" . "\r\n";
  144.                 $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
  145.                 // the message
  146.                 $msg = "
  147.                 <html>
  148.                     <body>
  149.                         <h2>You are Attempting to Login in XYZ Simple PHP Web Application</h2>
  150.                         <p>Here is yout OTP (One-Time PIN) to verify your Identity.</p>
  151.                         <h3><b>".$pin."</b></h3>
  152.                     </body>
  153.                 </html>
  154.                 ";
  155.  
  156.                 // send email
  157.                 mail($to,"OTP",$msg,$headers);
  158.                 // die("ERROR<br>".$headers."<br>".$msg);
  159.  
  160.             }catch(Exception $e){
  161.                 $_SESSION['flashdata']['type']='danger';
  162.                 $_SESSION['flashdata']['msg'] = ' An error occurred while sending the OTP. Error: '.$e->getMessage();
  163.             }
  164.         }
  165.     }
  166.     function __destruct(){
  167.          $this->db->close();
  168.     }
  169. }
  170. $class = new MainClass();
  171. $conn= $class->db_connect();

Creating the System Authentication Check Script

The code below is a PHP Script that checks if the user is allowed to access the application page. This will make the user to redirect to the login page if they haven't logged in yet. Save the file as auth.php.

  1. <?php
  2. if(session_status() === PHP_SESSION_NONE)
  3. session_start();
  4. $link = $_SERVER['PHP_SELF'];
  5. if(!strpos($link,'login.php') && !strpos($link,'login_verification.php') && !strpos($link,'registration.php') && !isset($_SESSION['user_login'])){
  6. echo "<script>location.replace('./login.php');</script>";
  7. }
  8. if(strpos($link,'login_verification.php') && !isset($_SESSION['otp_verify_user_id'])){
  9.     echo "<script>location.replace('./login.php');</script>";
  10. }
  11. if(strpos($link,'login.php') > -1 && isset($_SESSION['user_login'])){
  12. echo "<script>location.replace('./');</script>";
  13. }

Creating the Interfaces

Next, create the login page of the application. Copy/Paste the code below and configure it the way you want the UI looks. Save the file as login.php.

  1. <?php
  2. require_once('auth.php');
  3. require_once('MainClass.php');
  4. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  5.     $login = json_decode($class->login());
  6.     if($login->status == 'success'){
  7.         echo "<script>location.replace('./login_verification.php');</script>";
  8.     }
  9. }
  10. ?>
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17.     <title>Login with OTP</title>
  18.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  19.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  20.     <script src="./js/jquery-3.6.0.min.js"></script>
  21.     <script src="./js/popper.min.js"></script>
  22.     <script src="./js/bootstrap.min.js"></script>
  23.     <script src="./Font-Awesome-master/js/all.min.js"></script>
  24.     <style>
  25.         html,body{
  26.             height:100%;
  27.             width:100%;
  28.         }
  29.         main{
  30.             height:calc(100%);
  31.             width:calc(100%);
  32.             display:flex;
  33.             flex-direction:column;
  34.             align-items:center;
  35.             justify-content:center;
  36.         }
  37.     </style>
  38. </head>
  39. <body class="bg-dark bg-gradient">
  40.     <main>
  41.        <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 mb-4">
  42.            <h1 class="text-light text-center">XYZ Simple PHP Web Application</h1>
  43.         </div>
  44.        <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
  45.            <div class="card shadow rounded-0">
  46.                <div class="card-header py-1">
  47.                    <h4 class="card-title text-center">LOGIN</h4>
  48.                </div>
  49.                <div class="card-body py-4">
  50.                    <div class="container-fluid">
  51.                        <form action="./login.php" method="POST">
  52.                        <?php 
  53.                             if(isset($_SESSION['flashdata'])):
  54.                         ?>
  55.                         <div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?> my-2 rounded-0">
  56.                             <div class="d-flex align-items-center">
  57.                                 <div class="col-11"><?php echo $_SESSION['flashdata']['msg'] ?></div>
  58.                                 <div class="col-1 text-end">
  59.                                     <div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a>
  60.                                     </div>
  61.                                 </div>
  62.                             </div>
  63.                         </div>
  64.                         <?php unset($_SESSION['flashdata']) ?>
  65.                         <?php endif; ?>
  66.                            <div class="form-group">
  67.                                <label for="email" class="label-control">Email</label>
  68.                                <input type="email" name="email" id="email" class="form-control rounded-0" value="<?= isset($_POST['email']) ? $_POST['email'] : '' ?>" autofocus required>
  69.                             </div>
  70.                            <div class="form-group">
  71.                                <label for="password" class="label-control">Password</label>
  72.                                <input type="password" name="password" id="password" class="form-control rounded-0" value="<?= isset($_POST['password']) ? $_POST['password'] : '' ?>" required>
  73.                             </div>
  74.                             <div class="clear-fix mb-4"></div>
  75.                             <div class="form-group text-end">
  76.                                 <button class="btn btn-primary bg-gradient rounded-0">LOGIN</button>
  77.                             </div>
  78.                             <div class="form-group text-cneter">
  79.                                 <a href="registration.php">Create a New Account</a>
  80.                             </div>
  81.                        </form>
  82.                    </div>
  83.                </div>
  84.            </div>
  85.        </div>
  86.     </main>
  87. </body>
  88. </html>

Output

Next, create the registration page of the application. Copy/Paste the code below and configure it the way you want the UI looks. Save the file as registration.php.

  1. <?php
  2. require_once('auth.php');
  3. require_once('MainClass.php');
  4. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  5.     $register = json_decode($class->register());
  6.     if($register->status == 'success'){
  7.         $_SESSION['flashdata']['type']='success';
  8.         $_SESSION['flashdata']['msg'] = ' Account has been registered successfully.';
  9.         echo "<script>location.href = './login_verification.php';</script>";
  10.         exit;
  11.     }else{
  12.         echo "<script>console.error(".json_encode($register).");</script>";
  13.     }
  14. }
  15. ?>
  16. <!DOCTYPE html>
  17. <html lang="en">
  18. <head>
  19.     <meta charset="UTF-8">
  20.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  21.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  22.     <title>Login with OTP</title>
  23.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  24.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  25.     <script src="./js/jquery-3.6.0.min.js"></script>
  26.     <script src="./js/popper.min.js"></script>
  27.     <script src="./js/bootstrap.min.js"></script>
  28.     <script src="./Font-Awesome-master/js/all.min.js"></script>
  29.     <style>
  30.         html,body{
  31.             height:100%;
  32.             width:100%;
  33.         }
  34.         main{
  35.             height:calc(100%);
  36.             width:calc(100%);
  37.             display:flex;
  38.             flex-direction:column;
  39.             align-items:center;
  40.             justify-content:center;
  41.         }
  42.     </style>
  43. </head>
  44. <body class="bg-dark bg-gradient">
  45.     <main>
  46.        <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 mb-4">
  47.            <h1 class="text-light text-center">XYZ Simple PHP Web Application</h1>
  48.         </div>
  49.        <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
  50.            <div class="card shadow rounded-0">
  51.                <div class="card-header py-1">
  52.                    <h4 class="card-title text-center">Create an Account</h4>
  53.                </div>
  54.                <div class="card-body py-4">
  55.                    <div class="container-fluid">
  56.                        <form action="./registration.php" method="POST">
  57.                        <?php 
  58.                             if(isset($_SESSION['flashdata'])):
  59.                         ?>
  60.                         <div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?> my-2 rounded-0">
  61.                             <div class="d-flex align-items-center">
  62.                                 <div class="col-11"><?php echo $_SESSION['flashdata']['msg'] ?></div>
  63.                                 <div class="col-1 text-end">
  64.                                     <div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a>
  65.                                     </div>
  66.                                 </div>
  67.                             </div>
  68.                         </div>
  69.                         <?php unset($_SESSION['flashdata']) ?>
  70.                         <?php endif; ?>
  71.                             <div class="form-group">
  72.                                <label for="firstname" class="label-control">First Name</label>
  73.                                <input type="text" name="firstname" id="firstname" class="form-control rounded-0" value="<?= isset($_POST['firstname']) ? $_POST['firstname'] : '' ?>" autofocus required>
  74.                             </div>
  75.                             <div class="form-group">
  76.                                <label for="middlename" class="label-control">Middle Name</label>
  77.                                <input type="text" name="middlename" id="middlename" class="form-control rounded-0" value="<?= isset($_POST['middlename']) ? $_POST['middlename'] : '' ?>" required>
  78.                             </div>
  79.                             <div class="form-group">
  80.                                <label for="lastname" class="label-control">Last Name</label>
  81.                                <input type="text" name="lastname" id="lastname" class="form-control rounded-0" value="<?= isset($_POST['lastname']) ? $_POST['lastname'] : '' ?>" required>
  82.                             </div>
  83.                            <div class="form-group">
  84.                                <label for="email" class="label-control">Email</label>
  85.                                <input type="email" name="email" id="email" class="form-control rounded-0" value="<?= isset($_POST['email']) ? $_POST['email'] : '' ?>" required>
  86.                             </div>
  87.                            <div class="form-group">
  88.                                <label for="password" class="label-control">Password</label>
  89.                                <input type="password" name="password" id="password" class="form-control rounded-0" value="<?= isset($_POST['password']) ? $_POST['password'] : '' ?>" required>
  90.                             </div>
  91.                             <div class="clear-fix mb-4"></div>
  92.                             <div class="form-group text-end">
  93.                                 <button class="btn btn-primary bg-gradient rounded-0">Create Account</button>
  94.                             </div>
  95.                        </form>
  96.                    </div>
  97.                </div>
  98.            </div>
  99.        </div>
  100.     </main>
  101. </body>
  102. </html>

Output

Next, create the verification page of the application. This page will the one where the user will be redirected after successfully login the correct registered user credentials. This is where user will submit the OTP to confirm his/her identity. Copy/Paste the code below and configure it the way you want the UI looks. Save the file as login_verification.php.

  1. 	<?php
  2. require_once('auth.php');
  3. require_once('MainClass.php');
  4. $user_data = json_decode($class->get_user_data($_SESSION['otp_verify_user_id']));
  5. if($user_data->status){
  6.     foreach($user_data->data as $k => $v){
  7.         $$k = $v;
  8.     }
  9. }
  10. if(isset($_GET['resend']) && $_GET['resend'] == 'true'){
  11.     $resend = json_decode($class->resend_otp($_SESSION['otp_verify_user_id']));
  12.     if($resend->status == 'success'){
  13.         echo "<script>location.replace('./login_verification.php')</script>";
  14.     }else{
  15.         $_SESSION['flashdata']['type']='danger';
  16.         $_SESSION['flashdata']['msg']=' Resending OTP has failed.';
  17.         echo "<script>console.error(".$resend.")</script>";
  18.     }
  19. }
  20. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  21.     $verify = json_decode($class->otp_verify());
  22.     if($verify->status == 'success'){
  23.         echo "<script>location.replace('./');</script>";
  24.     }
  25. }
  26. ?>
  27. <!DOCTYPE html>
  28. <html lang="en">
  29. <head>
  30.     <meta charset="UTF-8">
  31.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  32.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.     <title>Login with OTP</title>
  34.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  35.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  36.     <script src="./js/jquery-3.6.0.min.js"></script>
  37.     <script src="./js/popper.min.js"></script>
  38.     <script src="./js/bootstrap.min.js"></script>
  39.     <script src="./Font-Awesome-master/js/all.min.js"></script>
  40.     <style>
  41.         html,body{
  42.             height:100%;
  43.             width:100%;
  44.         }
  45.         main{
  46.             height:calc(100%);
  47.             width:calc(100%);
  48.             display:flex;
  49.             flex-direction:column;
  50.             align-items:center;
  51.             justify-content:center;
  52.         }
  53.         a.disabled {
  54.             pointer-events: none;
  55.             cursor: default;
  56.         }
  57.     </style>
  58. </head>
  59. <body class="bg-dark bg-gradient">
  60.     <main>
  61.        <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 mb-4">
  62.            <h1 class="text-light text-center">XYZ Simple PHP Web Application</h1>
  63.         </div>
  64.        <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
  65.            <div class="card shadow rounded-0">
  66.                <div class="card-header py-1">
  67.                    <h4 class="card-title text-center">LOGIN - Verification</h4>
  68.                </div>
  69.                <div class="card-body py-4">
  70.                    <div class="container-fluid">
  71.                        <form action="./login_verification.php" method="POST">
  72.                            <input type="hidden" name="id" value="<?= isset($id) ? $id : '' ?>">
  73.                         <?php 
  74.                                 if(isset($_SESSION['flashdata'])):
  75.                             ?>
  76.                             <div class="dynamic_alert alert alert-<?php echo $_SESSION['flashdata']['type'] ?> my-2 rounded-0">
  77.                                 <div class="d-flex align-items-center">
  78.                                     <div class="col-11"><?php echo $_SESSION['flashdata']['msg'] ?></div>
  79.                                     <div class="col-1 text-end">
  80.                                         <div class="float-end"><a href="javascript:void(0)" class="text-dark text-decoration-none" onclick="$(this).closest('.dynamic_alert').hide('slow').remove()">x</a>
  81.                                         </div>
  82.                                     </div>
  83.                                 </div>
  84.                             </div>
  85.                             <?php unset($_SESSION['flashdata']) ?>
  86.                             <?php endif; ?>
  87.                             <div class="form-group">
  88.                                 <p class="">We have sent an OPT in your Email [<?= isset($email) ? $email : '' ?>].</p>
  89.                             </div>
  90.                             <div class="form-group">
  91.                                <label for="otp" class="label-control">Please Enter the OTP</label>
  92.                                <input type="otp" name="otp" id="otp" class="form-control rounded-0" value="" maxlength="6" pattern="{0-9}+" autofocus required>
  93.                             </div>
  94.                             <div class="clear-fix mb-4"></div>
  95.                             <div class="form-group text-end">
  96.                                 <a class="btn btn-secondary bg-gradient rounded-0  <?= time() < strtotime($otp_expiration) ? 'disabled' : '' ?>" data-stat="<?= time() < strtotime($otp_expiration) ? 'countdown' : '' ?>" href="./login_verification.php?resend=true" id="resend"><?= time() < strtotime($otp_expiration) ? 'Resend in '.(strtotime($otp_expiration) - time()).'s' : 'Resend OTP' ?></a>
  97.                                 <button class="btn btn-primary bg-gradient rounded-0">Confirm</button>
  98.                             </div>
  99.                        </form>
  100.                    </div>
  101.                </div>
  102.            </div>
  103.        </div>
  104.     </main>
  105. </body>
  106. <script>
  107.     $(function(){
  108.         var is_countdown_resend = $('#resend').attr('data-stat') == 'countdown';
  109.         if(is_countdown_resend){
  110.             var sec = '<?= time() < strtotime($otp_expiration) ? (strtotime($otp_expiration) - time()) : 0 ?>';
  111.             var countdown = setInterval(() => {
  112.                 if(sec > 0){
  113.                     sec--;
  114.                     $('#resend').text("Resend in "+(sec)+'s')
  115.                 }else{
  116.                     $('#resend').attr('data-stat','')
  117.                                 .removeClass('disabled').text('Resend OTP')
  118.                     clearInterval(countdown)
  119.                 }
  120.             }, 1000);
  121.         }
  122.     })
  123. </script>
  124. </html>

Output

Next, create the index page of the application where the user will be redirected after the successful 2 Factor Authentication. Copy/Paste the code below and configure it the way you want the UI looks. Save the file as index.php.

  1. <?php
  2. require_once('auth.php');
  3. require_once('MainClass.php');
  4. ?>
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title> Home | Login with OTP</title>
  12.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  13.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  14.     <script src="./js/jquery-3.6.0.min.js"></script>
  15.     <script src="./js/popper.min.js"></script>
  16.     <script src="./js/bootstrap.min.js"></script>
  17.     <script src="./Font-Awesome-master/js/all.min.js"></script>
  18.     <style>
  19.         html,body{
  20.             height:100%;
  21.             width:100%;
  22.         }
  23.         main{
  24.             height:100%;
  25.             display:flex;
  26.             flex-flow:column;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <main>
  32.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
  33.         <div class="container">
  34.             <a class="navbar-brand" href="#">
  35.                 XYZ Simple PHP Web Application
  36.             </a>
  37.         </div>
  38.     </nav>
  39.     <div class="container py-3" id="page-container">
  40.         <div class="row justify-content-center">
  41.             <div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
  42.                 <div class="card shadow rounded-0">
  43.                     <div class="card-body py-4">
  44.                         <h1>Welcome <?= ucwords($_SESSION['firstname'].' '.$_SESSION['middlename'].' '.$_SESSION['lastname']) ?></h1>
  45.                         <hr>
  46.                         <p>You are logged in using <?= $_SESSION['email'] ?></p>
  47.                         <div class="clear-fix mb-4"></div>
  48.                         <div class="text-end">
  49.                             <a href="./logout.php" class="btn btn btn-secondary bg-gradient rounded-0">Logout</a>
  50.                         </div>
  51.                     </div>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56.     </main>
  57. </body>
  58. </html>

Output

Here's the Sample Snapshot of the OTP Mail

DEMO VIDEO

There you go. You can now test the application on your end and check if it is working properly and achieves the goal I stated above. If there's an error occurred on your end, review your codes with the codes I provided above. You can also download the source code I created for this tutorial. The download link/button is located after this article.

That ends this tutorial. I hope this will help you with what you are looking for and you'll find it useful with your current or future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Related Links:

Happy Coding :)

Tags

Comments

Submitted bySome Random Guy (not verified)on Thu, 12/01/2022 - 21:21

Yow bro, upon check your code I found a possible typo in 'MainClass.php' in line 20 where the '$email}' in the query should not have a closing curly bracket. This probably will bypass the checking of existing email.
Submitted byuknown (not verified)on Sun, 01/22/2023 - 00:10

not getting any emails cuz cant turn on the secured etc on google account

Add new comment

About text formats