Creating a Forgot and Reset Password Feature in PHP and MySQL Tutorial

Submitted by oretnom23 on Thursday, April 27, 2023 - 14:26.

In this tutorial, you can learn how to create a Forgot and Reset Password feature in PHP and MySQL Database. This tutorial aims to provide students and beginners with a reference for learning to create and implement useful features of web applications or websites. Here, I will be providing simple web application scripts that demonstrate the creation of an application with Forgot and Reset Password Feature.

What is Forgot and Reset Password?

The Forgot and Reset Password is one of the common and often implemented features of the software or web applications that allows registered users who may forget their account password to retrieve it. The Forgot Password is the way to trigger resetting or retrieving the user's account. Some web applications provide multiple options to retrieve the user account such as sending OTP PIN by email or Text message, answering questions that users selected and provided with an answer to when they created their account, and sending an email with a reset link to allow the users set their new password.

How to create a Forgot and Reset Password Feature in PHP?

To create a Forgot and Reset Password Feature, we can simply develop and implement pages that allow the user to set new passwords or retrieve their accounts. Also, we need to secure these pages so that will only allow real users to access and retrieve the account. Check out the source scripts of a simple web application that I created and provided below to understand it more or to have an idea of how to create a Forgot and Reset Password Feature.

Sample Web Application Source Code

The scripts that I am providing below result in a simple web application that has the following features and functionalities:

  • Page Authentication
  • Login Page
  • Profile Page
  • Forgot Password Page
  • Send Mail with Reset Password Link
  • Reset Password Page

Before we continue to the coding part of this tutorial, please make sure that you have already set up your server or local machine to allow sending emails. For those who are using XAMPP and want to use Gmail SMPT, you can learn to set up sendmail XAMPP package and GMail SMTP by clicking the link.

Let's Get Started

Creating the Database

In your MySQL Server, create a new database named dummy_db. Then, copy and paste the following database schema for the DB table and data. Kindly, change to provided emails with emails that you have access to for testing. All of the user account passwords is password&123

  1. CREATE TABLE `users` (
  2.     `id` int(11) NOT NULL,
  3.     `fullname` text NOT NULL,
  4.     `contact` text NOT NULL,
  5.     `email` text NOT NULL,
  6.     `password` text NOT NULL,
  7.     `about` text NOT NULL
  8.     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  9.  
  10.     INSERT INTO `users` (`id`, `fullname`, `contact`, `email`, `password`, `about`) VALUES
  11.     (1, 'Mark Cooper', '09123456798', '[email protected]', '$2y$10$EV6xjIC478dLe.YDxUoaEedj/J.MGsf65ciVfJkknFldlH0SkBxX6', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla lacus nec velit hendrerit molestie. Ut nec aliquam arcu. Duis ut libero nec risus egestas viverra non ac risus.'),
  12.     (2, 'Claire Blake', '09123654456', '[email protected]', '$2y$10$EV6xjIC478dLe.YDxUoaEedj/J.MGsf65ciVfJkknFldlH0SkBxX6', 'Vestibulum sem dui, venenatis eu eleifend nec, placerat ut enim. Phasellus luctus, lectus aliquet ullamcorper vulputate, justo magna fermentum est, vel vulputate tortor augue vel ex.'),
  13.     (3, 'John Smith', '09759874562', '[email protected]', '$2y$10$EV6xjIC478dLe.YDxUoaEedj/J.MGsf65ciVfJkknFldlH0SkBxX6', 'Vivamus dictum rutrum dolor, ut pretium mauris tempor elementum. Pellentesque facilisis neque ut efficitur tincidunt.');
  14.  
  15.     ALTER TABLE `users`
  16.     ADD PRIMARY KEY (`id`);
  17.  
  18.     ALTER TABLE `users`
  19.     MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

Creating the Database Connection

Next, let's create the PHP file that creates a connection between the application and the database. In your source code directory, create a new PHP file named db-connect.php. Then, copy and paste the script below.

  1. <?php
  2. $host = "localhost";
  3. $username = "root";
  4. $password = "";
  5. $dbname = "dummy_db";
  6.  
  7. try{
  8.     $conn = new MySQLi($host, $username, $password, $dbname);
  9. } catch (Exception $e){
  10.     die($e->getMessage());
  11. }

Creating the Page Authentication

Next, we will create a PHP script that handles the logged-in and not logged-in users for accessing the web pages. The script below redirects the user to the login page when he is trying to access the home or profile page by logging in first and vice versa. Save the script below as auth.php

  1. <?php
  2. session_start();
  3. $_self = $_SERVER["PHP_SELF"];
  4. if(stripos($_self, 'index.php')){
  5.     if(!isset($_SESSION['id']) || (isset($_SESSION['id']) && $_SESSION['id'] <= 0)){
  6.         header('location: login.php');
  7.     }
  8. } elseif(stripos($_self, 'login.php') || stripos($_self, 'reset-password.php') || stripos($_self, 'forgot-password.php')){
  9.     if(isset($_SESSION['id']) && $_SESSION['id'] > 0){
  10.         header('location: index.php');
  11.     }
  12. }

Creating the Page Headers

Next, the following script contains the head tag of the web pages. This file is included in each web page so that we don't need to rewrite the script in each page and we can edit only one file for any changes we wanted. Save the file as header.php.

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Reset Password in PHP</title>
  5.     <link rel="stylesheet" href="style.css">
  6.     <link rel="preconnect" href="https://fonts.googleapis.com">
  7.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8. </head>

Creating the Pages Stylesheet

The following file is script is known as style.css. The script contains the web application page stylesheet codes for the design of the page template and some elements.

  1. @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet');
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     font-family: 'Dongle', sans-serif;
  7.     font-family: 'Roboto Mono', monospace;
  8. }
  9. ::selection{
  10.     color: #fff;
  11.     background: #4db2ec;
  12. }
  13. body{
  14.     display: flex;
  15.     flex-direction: column;
  16.     flex-wrap: wrap;
  17.     align-items: center;
  18.     justify-content: center;
  19.     min-height: 100vh;
  20.     /* background: #0B2447;
  21.     background-image: linear-gradient(to right, #2E4F4F 0%, #0B2447 100%); */
  22.     background-color: #21D4FD;
  23.     background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
  24.  
  25.     padding: 2em 0;
  26. }
  27. .text-center{
  28.     text-align:center;
  29.     justify-content: center;
  30. }
  31. .mx-auto{
  32.     margin: 0 auto;
  33. }
  34. #page-title{
  35.     color: #fff;
  36.     text-align: center;
  37.     font-weight: 500;
  38. }
  39. #title_hr{
  40.     width:60px;
  41.     border: 2px solid #ffffff;
  42.     margin: .35em auto;
  43. }
  44. .container{
  45.     margin: 5rem 3rem;
  46. }
  47. /* Text color */
  48. .text-muted{
  49.     color: #585858;
  50. }
  51. .input-label{
  52.     display: block;
  53.     font-weight: 500;
  54.     color: #444444;
  55.     margin-bottom:.35em
  56. }
  57. /* form input-field */
  58. .input-field{
  59.     margin: .5em .35em; 
  60. }
  61. /* form input-field */
  62. .input-field input{
  63.     padding: .5em 1em;
  64.     outline:none;
  65.     border: 1px solid #c4c4c4;
  66.     width: 100%;
  67. }
  68. .input-field input:focus{
  69.     border: 1px solid #0098fd;
  70.     box-shadow: 0px 0px 10px #0098fd;
  71. }
  72. .login-btn, .reset-btn{
  73.     text-decoration: none;
  74.     padding: .5em 1em;
  75.     border: none;
  76.     background-color: #02a3ee;
  77.     color: #fff;
  78.     font-weight: 500;
  79.     display: block;
  80.     margin: .35em auto;
  81.     border-radius: 3px;
  82.     text-align: center;
  83.     min-width: 100px;
  84.     cursor: pointer;
  85. }
  86. .login-btn:hover,
  87. .reset-btn:hover,
  88. .login-btn:active,
  89. .reset-btn:active{
  90.     background-color: #048eff;
  91.     box-shadow: 0px 0px 10px #048eff3b;
  92.  
  93. }
  94. .logout-btn{
  95.     text-decoration: none;
  96.     padding: .5em 1em;
  97.     border: none;
  98.     background-color: #f8390a;
  99.     color: #fff;
  100.     font-weight: 500;
  101.     display: block;
  102.     margin: .35em auto;
  103.     border-radius: 3px;
  104.     text-align: center;
  105.     min-width: 100px;
  106.     cursor: pointer;
  107. }
  108. .logout-btn:hover,
  109. .logout-btn:active{
  110.     background-color: #f81a0a;
  111.     box-shadow: 0px 0px 10px #f81a0a36;
  112.  
  113. }
  114. /* Login Wrapper */
  115. #login-wrapper{
  116.     width: 350px;
  117.     margin: 1em auto;
  118.     padding: 1em 1.5em;
  119.     background-color: #fff;
  120.     border: 1px solid #d4d4d4;
  121.     box-shadow: 0px 0px 10px #00000069;
  122. }
  123. /* Profile Wrapper */
  124. #profile-wrapper{
  125.     width: 400px;
  126.     margin: 1em auto;
  127.     padding: 1em 1.5em;
  128.     background-color: #fff;
  129.     border: 1px solid #d4d4d4;
  130.     box-shadow: 0px 0px 10px #00000069;
  131. }
  132. .message-success,
  133. .message-error{
  134.     width: 100%;
  135.     padding: 1em;
  136.     margin: 1em .5em;
  137. }
  138. .message-success{
  139.     background-color: #04bd60;
  140.     color: #d9ffec;
  141. }
  142. .message-error{
  143.     background-color: #ff2e12;
  144.     color: #f9dbd8;
  145. }
  146.  
  147.  
  148. /* Mobile View */
  149. @media (max-width: 480px){
  150.     #login-wrapper{
  151.     width: 95%;
  152.     }
  153.     #profile-wrapper{
  154.     width: 95%;
  155.     }
  156. }
  157. dl{
  158.     margin-bottom: 1.5em;
  159. }
  160. dt{
  161.     color: #4e4e4e;
  162. }
  163. dd{
  164.     color: #292929;
  165.     padding-left: 1em;
  166. }

Creating the web pages

The following scripts are the PHP file scripts of the web pages and the email template of the web application we are building. Each action script such as the login process is written on the same file script of the web page interface. Save the files according to the filename above each script.

login.php

The file contains the page interface and PHP scripts of the web application login feature.

  1. <?php 
  2. require_once('auth.php');
  3. require_once('db-connect.php');
  4. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  5.     extract($_POST);
  6.     $stmt = $conn->prepare("SELECT * FROM `users` where `email` = ?");
  7.     $stmt->bind_param('s', $email);
  8.     $stmt->execute();
  9.     $result = $stmt->get_result();
  10.     if($result->num_rows > 0){
  11.         $data = $result->fetch_assoc();
  12.         if(password_verify($password, $data['password'])){
  13.             foreach($data as $k => $v){
  14.                 if($k != 'password'){
  15.                     $_SESSION[$k] = $v;
  16.                 }
  17.             }
  18.             $_SESSION['msg']['success'] = "You have login successfully.";
  19.             header('location: ./');
  20.             exit;
  21.         }else{
  22.             $error = "Incorrect Email or Password";
  23.         }
  24.     }else{
  25.         $error = "Incorrect Email or Password";
  26.     }
  27. }
  28. ?>
  29. <!DOCTYPE html>
  30. <html lang="en">
  31. <?php include_once('header.php') ?>
  32. <body>
  33.     <h1 id="page-title" class="text-center">Login Page</h1>
  34.     <hr id="title_hr" class="mx-auto">
  35.     <div id="login-wrapper">
  36.         <div class="text-muted"><small><em>Please Fill all the required fields</em></small></div>
  37.         <?php if(isset($error) && !empty($error)): ?>
  38.             <div class="message-error"><?= $error ?></div>
  39.         <?php endif; ?>
  40.         <?php if(isset($_SESSION['msg']['success']) && !empty($_SESSION['msg']['success'])): ?>
  41.         <div class="message-success">
  42.             <?php 
  43.             echo $_SESSION['msg']['success'];
  44.             unset($_SESSION['msg']);
  45.             ?>
  46.         </div>  
  47.         <?php endif; ?>
  48.         <form action="" method="POST">
  49.             <div class="input-field">
  50.                 <label for="email" class="input-label">Email</label>
  51.                 <input type="email" id="email" name="email" value="<?= $_POST['email'] ?? "" ?>" required="required">
  52.             </div>
  53.             <div class="input-field">
  54.                 <label for="password" class="input-label">Password</label>
  55.                 <input type="password" id="password" name="password" value="<?= $_POST['password'] ?? "" ?>" required="required">
  56.             </div>
  57.             <div class="input-field ">
  58.                 <a href="forgot-password.php" tabindex="-1"><small><strong>Forgot Password?</strong></small></a>
  59.             </div>
  60.             <button class="login-btn">Login</button>
  61.         </form>
  62.     </div>
  63. </body>
  64. </html>

index.php

This file script contains the page interface of the application home page or the user profile page.

  1. <?php 
  2. require_once('auth.php');
  3. require_once('db-connect.php');
  4. ?>
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <?php include_once('header.php') ?>
  8. <body>
  9.     <h1 id="page-title" class="text-center">Home Page</h1>
  10.     <hr id="title_hr" class="mx-auto">
  11.     <div id="profile-wrapper">
  12.         <?php if(isset($_SESSION['msg']['success']) && !empty($_SESSION['msg']['success'])): ?>
  13.         <div class="message-success">
  14.         <?php 
  15.             echo $_SESSION['msg']['success'];
  16.             unset($_SESSION['msg']);
  17.         ?>
  18.         </div>  
  19.         <?php endif; ?>
  20.         <h2 class="text-center"><strong>Profile</strong></h2>
  21.         <hr width="25px" style="margin: .35em auto">
  22.         <br>
  23.         <dl>
  24.         <dt><strong>Fullname:</strong></dt>
  25.         <dd><?= $_SESSION['fullname'] ?? "" ?></dd>
  26.         <dt><strong>Contact No.:</strong></dt>
  27.         <dd><?= $_SESSION['contact'] ?? "" ?></dd>
  28.         <dt><strong>Email:</strong></dt>
  29.         <dd><?= $_SESSION['email'] ?? "" ?></dd>
  30.         <dt><strong>About:</strong></dt>
  31.         <dd><?= $_SESSION['about'] ?? "" ?></dd>
  32.         </dl>
  33.         <a href="logout.php" class="logout-btn">Logout</a>
  34.     </div>
  35. </body>
  36. </html>

forgot-password.php

The script below contains the codes that allow the user to enter their account email. The script verifies the provided email if it is registered on the system and if does, the system will generate a reset link and send it to user's email.

  1. <?php 
  2. require_once('auth.php');
  3. require_once('db-connect.php');
  4. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  5.     extract($_POST);
  6.     $stmt = $conn->prepare("SELECT * FROM `users` where `email` = ?");
  7.     $stmt->bind_param('s', $email);
  8.     $stmt->execute();
  9.     $result = $stmt->get_result();
  10.     if($result->num_rows > 0){
  11.         $data = $result->fetch_assoc();
  12.         $email= $data['email'];
  13.  
  14.         $subject = "Sample Website - Reset Password";
  15.         $message = "";
  16.         ob_start();
  17.         include("reset_mail-template.php");
  18.         $message = ob_get_clean();
  19.         // echo $message;exit;
  20.         $eol = "\r\n";
  21.         // Mail Main Header
  22.         $headers = "From: [email protected]" . $eol;
  23.         $headers .= "Reply-To: [email protected]" . $eol;
  24.         $headers .= "To: <{$email}>" . $eol;
  25.         $headers .= "MIME-Version: 1.0" . $eol;
  26.         $headers .= "Content-Type: text/html; charset=iso-8859-1" . $eol;
  27.         try{
  28.             mail($email, $subject, $message, $headers);
  29.             $_SESSION['msg']['success'] = "We have sent you an email to reset your password.";
  30.             header('location: login.php');
  31.             exit;
  32.         }catch(Exception $e){
  33.             throw new ErrorException($e->getMessage());
  34.             exit;
  35.         }
  36.         ?>
  37.         <?php
  38.     }else{
  39.         $error = "Email is not registered.";
  40.     }
  41. }
  42. ?>
  43. <!DOCTYPE html>
  44. <html lang="en">
  45. <?php include_once('header.php') ?>
  46. <body>
  47.     <h1 id="page-title" class="text-center">Forgot Password Page</h1>
  48.     <hr id="title_hr" class="mx-auto">
  49.     <div id="login-wrapper">
  50.         <div class="text-muted"><small><em>Please Fill all the required fields</em></small></div>
  51.         <?php if(isset($error) && !empty($error)): ?>
  52.             <div class="message-error"><?= $error ?></div>
  53.         <?php endif; ?>
  54.         <form action="" method="POST">
  55.             <div class="input-field">
  56.                 <label for="email" class="input-label">Email</label>
  57.                 <input type="email" id="email" name="email" value="<?= $_POST['email'] ?? "" ?>" required="required">
  58.             </div>
  59.             <div class="input-field ">
  60.                 <a href="login.php" tabindex="-1"><small><strong>Go back to login page</strong></small></a>
  61.             </div>
  62.             <button class="login-btn">Reset Password</button>
  63.         </form>
  64.     </div>
  65. </body>
  66. </html>

reset_mail-template.php

The following script is the reset password email template that I used for this tutorial. The template I use was taken from Unlayer Free Template.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3. <head>
  4. <!--[if gte mso 9]>
  5. <xml>
  6.     <o:OfficeDocumentSettings>
  7.     <o:AllowPNG/>
  8.     <o:PixelsPerInch>96</o:PixelsPerInch>
  9.     </o:OfficeDocumentSettings>
  10. </xml>
  11. <![endif]-->
  12.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <meta name="x-apple-disable-message-reformatting">
  15.     <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
  16.     <title></title>
  17.  
  18.     <style type="text/css">
  19.         @media only screen and (min-width: 620px) {
  20.     .u-row {
  21.     width: 600px !important;
  22.     }
  23.     .u-row .u-col {
  24.     vertical-align: top;
  25.     }
  26.  
  27.     .u-row .u-col-100 {
  28.     width: 600px !important;
  29.     }
  30.  
  31. }
  32.  
  33. @media (max-width: 620px) {
  34.     .u-row-container {
  35.     max-width: 100% !important;
  36.     padding-left: 0px !important;
  37.     padding-right: 0px !important;
  38.     }
  39.     .u-row .u-col {
  40.     min-width: 320px !important;
  41.     max-width: 100% !important;
  42.     display: block !important;
  43.     }
  44.     .u-row {
  45.     width: 100% !important;
  46.     }
  47.     .u-col {
  48.     width: 100% !important;
  49.     }
  50.     .u-col > div {
  51.     margin: 0 auto;
  52.     }
  53. }
  54. body {
  55.     margin: 0;
  56.     padding: 0;
  57. }
  58.  
  59. table,
  60. tr,
  61. td {
  62.     vertical-align: top;
  63.     border-collapse: collapse;
  64. }
  65.  
  66. p {
  67.     margin: 0;
  68. }
  69.  
  70. .ie-container table,
  71. .mso-container table {
  72.     table-layout: fixed;
  73. }
  74.  
  75. * {
  76.     line-height: inherit;
  77. }
  78.  
  79. a[x-apple-data-detectors='true'] {
  80.     color: inherit !important;
  81.     text-decoration: none !important;
  82. }
  83.  
  84. table, td { color: #000000; } #u_body a { color: #0000ee; text-decoration: underline; } @media (max-width: 480px) { #u_content_image_1 .v-container-padding-padding { padding: 40px 10px 10px !important; } #u_content_image_1 .v-src-width { width: auto !important; } #u_content_image_1 .v-src-max-width { max-width: 50% !important; } #u_content_heading_1 .v-container-padding-padding { padding: 10px 10px 20px !important; } #u_content_heading_1 .v-font-size { font-size: 22px !important; } #u_content_heading_2 .v-container-padding-padding { padding: 40px 10px 10px !important; } #u_content_text_2 .v-container-padding-padding { padding: 10px !important; } #u_content_heading_3 .v-container-padding-padding { padding: 10px !important; } #u_content_button_1 .v-container-padding-padding { padding: 30px 10px 40px !important; } #u_content_button_1 .v-size-width { width: 65% !important; } #u_content_social_1 .v-container-padding-padding { padding: 40px 10px 10px !important; } #u_content_text_deprecated_1 .v-container-padding-padding { padding: 10px 10px 20px !important; } #u_content_image_2 .v-container-padding-padding { padding: 20px 10px 40px !important; } }
  85.     </style>
  86.  
  87.  
  88.  
  89. <!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet" type="text/css"><!--<![endif]-->
  90.  
  91. </head>
  92.  
  93. <body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #f9f9ff;color: #000000">
  94.     <!--[if IE]><div class="ie-container"><![endif]-->
  95.     <!--[if mso]><div class="mso-container"><![endif]-->
  96.     <table id="u_body" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #f9f9ff;width:100%" cellpadding="0" cellspacing="0">
  97.     <tbody>
  98.     <tr style="vertical-align: top">
  99.     <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
  100.     <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #f9f9ff;"><![endif]-->
  101.  
  102.  
  103. <div class="u-row-container" style="padding: 0px;background-color: transparent">
  104.     <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
  105.     <div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
  106.         <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->
  107.  
  108. <!--[if (mso)|(IE)]><td align="center" width="600" style="background-color: #ffffff;width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
  109. <div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
  110.     <div style="background-color: #ffffff;height: 100%;width: 100% !important;">
  111.     <!--[if (!mso)&(!IE)]><!--><div style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
  112.  
  113. <table id="u_content_image_1" style="font-family:'Raleway',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
  114.     <tbody>
  115.     <tr>
  116.         <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:60px 10px 10px;font-family:'Raleway',sans-serif;" align="left">
  117.  
  118. <table width="100%" cellpadding="0" cellspacing="0" border="0">
  119.     <tr>
  120.     <td style="padding-right: 0px;padding-left: 0px;" align="center">
  121.  
  122.         <img align="center" border="0" src="https://i.ibb.co/nDLWkZm/image-6.png" alt="image" title="image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 35%;max-width: 203px;" width="203" class="v-src-width v-src-max-width"/>
  123.  
  124.     </td>
  125.     </tr>
  126. </table>
  127.  
  128.         </td>
  129.     </tr>
  130.     </tbody>
  131. </table>
  132.  
  133. <table id="u_content_heading_1" style="font-family:'Raleway',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
  134.     <tbody>
  135.     <tr>
  136.         <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px 10px 30px;font-family:'Raleway',sans-serif;" align="left">
  137.  
  138.     <h1 class="v-font-size" style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 28px; font-weight: 400;"><strong>Forget password ?</strong></h1>
  139.  
  140.         </td>
  141.     </tr>
  142.     </tbody>
  143. </table>
  144.  
  145.     <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
  146.     </div>
  147. </div>
  148. <!--[if (mso)|(IE)]></td><![endif]-->
  149.         <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
  150.     </div>
  151.     </div>
  152. </div>
  153.  
  154.  
  155.  
  156. <div class="u-row-container" style="padding: 0px;background-color: transparent">
  157.     <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
  158.     <div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
  159.         <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->
  160.  
  161. <!--[if (mso)|(IE)]><td align="center" width="600" style="background-color: #ffffff;width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->
  162. <div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
  163.     <div style="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
  164.     <!--[if (!mso)&(!IE)]><!--><div style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--<![endif]-->
  165.  
  166. <table id="u_content_heading_2" style="font-family:'Raleway',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
  167.     <tbody>
  168.     <tr>
  169.         <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:40px 60px 10px;font-family:'Raleway',sans-serif;" align="left">
  170.  
  171.     <h1 class="v-font-size" style="margin: 0px; line-height: 140%; text-align: left; word-wrap: break-word; font-size: 16px; font-weight: 400;">If you've lost your password or wish to reset it, use the link below to get started:</h1>
  172.  
  173.         </td>
  174.     </tr>
  175.     </tbody>
  176. </table>
  177.  
  178. <table id="u_content_text_2" style="font-family:'Raleway',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
  179.     <tbody>
  180.     <tr>
  181.         <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px 60px;font-family:'Raleway',sans-serif;" align="left">
  182.  
  183.     <div class="v-font-size" style="font-size: 14px; color: #1386e5; line-height: 140%; text-align: left; word-wrap: break-word;">
  184.     <p style="line-height: 140%;"><span style="text-decoration: underline; line-height: 19.6px;"><span style="line-height: 19.6px;"><strong>
  185.         <a href="http://localhost/php-reset-password/reset-password.php?uid=<?= md5($data['id']) ?>">http://localhost/php-reset-password/reset-password.php?uid=<?= md5($data['id']) ?></a>
  186.     </strong></span></span></p>
  187.     </div>
  188.  
  189.         </td>
  190.     </tr>
  191.     </tbody>
  192. </table>
  193.  
  194. <table id="u_content_heading_3" style="font-family:'Raleway',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
  195.     <tbody>
  196.     <tr>
  197.         <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px 60px;font-family:'Raleway',sans-serif;" align="left">
  198.  
  199.     <h1 class="v-font-size" style="margin: 0px; line-height: 140%; text-align: left; word-wrap: break-word; font-size: 14px; font-weight: 400;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.</h1>
  200.  
  201.         </td>
  202.     </tr>
  203.     </tbody>
  204. </table>
  205.  
  206. <table id="u_content_button_1" style="font-family:'Raleway',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
  207.     <tbody>
  208.     <tr>
  209.         <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:30px 10px 40px;font-family:'Raleway',sans-serif;" align="left">
  210.  
  211.     <!--[if mso]><style>.v-button {background: transparent !important;}</style><![endif]-->
  212. <div align="center">
  213.     <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.unlayer.com" style="height:37px; v-text-anchor:middle; width:220px;" arcsize="67.5%"  stroke="f" fillcolor="#fdb441"><w:anchorlock/><center style="color:#000000;font-family:'Raleway',sans-serif;"><![endif]-->  
  214.     <a href="http://localhost/php-reset-password/reset-password.php?uid=<?= md5($data['id']) ?>" target="_blank" class="v-button v-size-width v-font-size" style="box-sizing: border-box;display: inline-block;font-family:'Raleway',sans-serif;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #000000; background-color: #fdb441; border-radius: 25px;-webkit-border-radius: 25px; -moz-border-radius: 25px; width:38%; max-width:100%; overflow-wrap: break-word; word-break: break-word; word-wrap:break-word; mso-border-alt: none;font-size: 14px;">
  215.         <span style="display:block;padding:10px 20px;line-height:120%;"><span style="line-height: 16.8px;">Reset Your Password</span></span>
  216.     </a>
  217.     <!--[if mso]></center></v:roundrect><![endif]-->
  218. </div>
  219.  
  220.         </td>
  221.     </tr>
  222.     </tbody>
  223. </table>
  224.  
  225.     <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
  226.     </div>
  227. </div>
  228. <!--[if (mso)|(IE)]></td><![endif]-->
  229.         <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
  230.     </div>
  231.     </div>
  232. </div>
  233.  
  234.  
  235.  
  236. <div class="u-row-container" style="padding: 0px;background-color: transparent">
  237.     <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
  238.     <div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
  239.         <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->
  240.  
  241. <!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;" valign="top"><![endif]-->
  242. <div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
  243.     <div style="height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
  244.     <!--[if (!mso)&(!IE)]><!--><div style="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--<![endif]-->
  245.  
  246.     <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
  247.     </div>
  248. </div>
  249. <!--[if (mso)|(IE)]></td><![endif]-->
  250.         <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
  251.     </div>
  252.     </div>
  253. </div>
  254.  
  255.  
  256.     <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
  257.     </td>
  258.     </tr>
  259.     </tbody>
  260.     </table>
  261.     <!--[if mso]></div><![endif]-->
  262.     <!--[if IE]></div><![endif]-->
  263. </body>
  264.  
  265. </html>
  266.  

reset-password.php

The script below contains the page interface for setting a new password for the user and the PHP script that update the password.

  1. <?php 
  2. require_once('auth.php');
  3. require_once('db-connect.php');
  4. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  5.     extract($_POST);
  6.     if($new_password !== $confirm_password){
  7.         $error = "Password does not match.";
  8.     }else{
  9.         $uid = $_GET['uid'] ?? "";
  10.         $stmt = $conn->prepare("SELECT * FROM `users` where md5(`id`) = ?");
  11.         $stmt->bind_param('s', $uid);
  12.         $stmt->execute();
  13.         $result = $stmt->get_result();
  14.         if($result->num_rows > 0){
  15.             $data = $result->fetch_assoc();
  16.             $password = password_hash($new_password, PASSWORD_DEFAULT);
  17.             $update = $conn->query("UPDATE `users` set `password` = '{$password}'");
  18.             if($update){
  19.                 $_SESSION['msg']['success'] = "New Password has been saved successfully.";
  20.                 header('location:login.php');
  21.                 exit;
  22.             }else{
  23.                 $error = 'Password has failed to update.';
  24.             }
  25.         }else{
  26.             $error = "User is registered on this website.";
  27.         }
  28.     }
  29. }
  30. ?>
  31. <!DOCTYPE html>
  32. <html lang="en">
  33. <?php include_once('header.php') ?>
  34. <body>
  35.     <h1 id="page-title" class="text-center">Reset Password</h1>
  36.     <hr id="title_hr" class="mx-auto">
  37.     <div id="login-wrapper">
  38.         <div class="text-muted"><small><em>Please Fill all the required fields</em></small></div>
  39.         <?php if(isset($error) && !empty($error)): ?>
  40.             <div class="message-error"><?= $error ?></div>
  41.         <?php endif; ?>
  42.         <?php if(isset($_SESSION['msg']['success']) && !empty($_SESSION['msg']['success'])): ?>
  43.         <div class="message-success">
  44.             <?php 
  45.             echo $_SESSION['msg']['success'];
  46.             unset($_SESSION['msg']);
  47.             ?>
  48.         </div>  
  49.         <?php endif; ?>
  50.         <form action="" method="POST">
  51.             <div class="input-field">
  52.                 <label for="new_password" class="input-label">New Password</label>
  53.                 <input type="password" id="new_password" name="new_password" value="<?= $_POST['new_password'] ?? "" ?>" autofocus required="required">
  54.             </div>
  55.             <div class="input-field">
  56.                 <label for="confirm_password" class="input-label">Confirm New Password</label>
  57.                 <input type="password" id="confirm_password" name="confirm_password" value="<?= $_POST['confirm_password'] ?? "" ?>" required="required">
  58.             </div>
  59.             <button class="reset-btn">Reset Password</button>
  60.         </form>
  61.     </div>
  62. </body>
  63. </html>

Creating the Logout Script

Lastly, here's the PHP script that contains the codes for destroying the user session on the application. Save the file script as logout.php.

  1. <?php
  2. session_start();
  3. session_destroy();
  4. header('location: login.php');

Snapshots

Here are some snapshots of the overall result of the scripts I have provided above.

Login Page

Forgot and Reset Password in PHP and MySQL

Home/Profile Page

Forgot and Reset Password in PHP and MySQL

Forgot Password

Forgot and Reset Password in PHP and MySQL

Sample Email with Reset Link

Forgot and Reset Password in PHP and MySQL

Reset Password

Forgot and Reset Password in PHP and MySQL

There you go! I have also provided the complete source code zip file of the web application scripts that I provided and it is free to download. The download button is located below this tutorial's content. Feel free to download and modify the source code the way you wanted to enhance your programming capabilities.

DEMO VIDEO

That's it! I hope this Creating a Forgot and Reset Password Feature in PHP and MySQL Tutorial will help you with what you are looking for and will be useful for your current and future PHP Projects.

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

Happy Coding =)

Tags

Comments

Submitted byfine (not verified)on Sat, 07/13/2024 - 13:32

it was fine

Add new comment

About text formats