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

GorillaZ · 2025-02-27T03:42:18+0000

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

CREATE

TABLE

`users`

(
`id`

int

(

11

)

NOT

NULL

,
`fullname`

text

NOT

NULL

,
`contact`

text

NOT

NULL

,
`email`

text

NOT

NULL

,
`password`

text

NOT

NULL

,
`about`

text

NOT

NULL
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

utf8mb4;
INSERT

INTO

`users`

(

`id`

,

`fullname`

,

`contact`

,

`email`

,

`password`

,

`about`

)

VALUES
(

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.'

)

,
(

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.'

)

,
(

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.'

)

;
ALTER

TABLE

`users`
ADD

PRIMARY KEY

(

`id`

)

;
ALTER

TABLE

`users`
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.

<?php
$host

=

"localhost"

;
$username

=

"root"

;
$password

=

""

;
$dbname

=

"dummy_db"

;
try{
$conn

=

new

MySQLi(

$host

,

$username

,

$password

,

$dbname

)

;
}

catch (

Exception $e

)

{
die

(

$e

->

getMessage

(

)

)

;
}

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

<?php
session_start

(

)

;
$_self

=

$_SERVER

[

"PHP_SELF"

]

;
if

(

stripos

(

$_self

,

'index.php'

)

)

{
if

(

!

isset

(

$_SESSION

[

'id'

]

)

||

(

isset

(

$_SESSION

[

'id'

]

)

&&

$_SESSION

[

'id'

]

<=

0

)

)

{
header

(

'location: login.php'

)

;
}
}

elseif

(

stripos

(

$_self

,

'login.php'

)

||

stripos

(

$_self

,

'reset-password.php'

)

||

stripos

(

$_self

,

'forgot-password.php'

)

)

{
if

(

isset

(

$_SESSION

[

'id'

]

)

&&

$_SESSION

[

'id'

]

>

0

)

{
header

(

'location: index.php'

)

;
}
}

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.

<head

>
<meta

charset

=

"UTF-8"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Reset Password in PHP</

title

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
<link

rel

=

"preconnect"

href

=

"https://fonts.googleapis.com"

>
<link

rel

=

"preconnect"

href

=

"https://fonts.gstatic.com"

crossorigin>
</

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.

@import

url

(

'https://fonts.googleapis.com/css2?f...00;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet'

)

;
*

{
margin

:

0

;
padding

:

0

;
box-sizing

:

border-box

;
font-family

:

'Dongle'

,

sans-serif

;
font-family

:

'Roboto Mono'

,

monospace

;
}
::

selection

{
color

:

#fff

;
background

:

#4db2ec

;
}
body{
display

:

flex;
flex-direction

:

column;
flex-wrap

:

wrap;
align-items

:

center

;
justify-content

:

center

;
min-height

:

100vh

;
/* background: #0B2447;
background-image: linear-gradient(to right, #2E4F4F 0%, #0B2447 100%); */
background-color

:

#21D4FD

;
background-image

:

linear-gradient(

19deg

,

#21D4FD

0%

,

#B721FF

100%

)

;
padding

:

2em

0

;
}
.text-center{
text-align

:

center

;
justify-content

:

center

;
}
.mx-auto{
margin

:

0

auto

;
}
#page-title

{
color

:

#fff

;
text-align

:

center

;
font-weight

:

500

;
}
#title_hr

{
width

:

60px

;
border

:

2px

solid

#ffffff

;
margin

:

.35em

auto

;
}
.container{
margin

:

5rem

3rem

;
}
/* Text color */
.text-muted{
color

:

#585858

;
}
.input-label{
display

:

block

;
font-weight

:

500

;
color

:

#444444

;
margin-bottom

:

.35em
}
/* form input-field */
.input-field{
margin

:

.5em

.35em

;
}
/* form input-field */
.input-field

input{
padding

:

.5em

1em

;
outline

:

none

;
border

:

1px

solid

#c4c4c4

;
width

:

100%

;
}
.input-field

input:

focus

{
border

:

1px

solid

#0098fd

;
box-shadow

:

0px

0px

10px

#0098fd

;
}
.login-btn

,

.reset-btn{
text-decoration

:

none

;
padding

:

.5em

1em

;
border

:

none

;
background-color

:

#02a3ee

;
color

:

#fff

;
font-weight

:

500

;
display

:

block

;
margin

:

.35em

auto

;
border-radius

:

3px

;
text-align

:

center

;
min-width

:

100px

;
cursor

:

pointer

;
}
.login-btn

:

hover

,
.reset-btn

:

hover

,
.login-btn

:

active

,
.reset-btn

:

active

{
background-color

:

#048eff

;
box-shadow

:

0px

0px

10px

#048eff3b

;
}
.logout-btn{
text-decoration

:

none

;
padding

:

.5em

1em

;
border

:

none

;
background-color

:

#f8390a

;
color

:

#fff

;
font-weight

:

500

;
display

:

block

;
margin

:

.35em

auto

;
border-radius

:

3px

;
text-align

:

center

;
min-width

:

100px

;
cursor

:

pointer

;
}
.logout-btn

:

hover

,
.logout-btn

:

active

{
background-color

:

#f81a0a

;
box-shadow

:

0px

0px

10px

#f81a0a36

;
}
/* Login Wrapper */
#login-wrapper

{
width

:

350px

;
margin

:

1em

auto

;
padding

:

1em

1.5em

;
background-color

:

#fff

;
border

:

1px

solid

#d4d4d4

;
box-shadow

:

0px

0px

10px

#00000069

;
}
/* Profile Wrapper */
#profile-wrapper

{
width

:

400px

;
margin

:

1em

auto

;
padding

:

1em

1.5em

;
background-color

:

#fff

;
border

:

1px

solid

#d4d4d4

;
box-shadow

:

0px

0px

10px

#00000069

;
}
.message-success,
.message-error{
width

:

100%

;
padding

:

1em

;
margin

:

1em

.5em

;
}
.message-success{
background-color

:

#04bd60

;
color

:

#d9ffec

;
}
.message-error{
background-color

:

#ff2e12

;
color

:

#f9dbd8

;
}
/* Mobile View */
@media

(

max-width

:

480px

)

{
#login-wrapper

{
width

:

95%

;
}
#profile-wrapper

{
width

:

95%

;
}
}
dl{
margin-bottom

:

1.5em

;
}
dt{
color

:

#4e4e4e

;
}
dd{
color

:

#292929

;
padding-left

:

1em

;
}

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.

<?php
require_once(

'auth.php'

)

;
require_once(

'db-connect.php'

)

;
if(

$_SERVER[

'REQUEST_METHOD'

]

==

'POST'

)

{
extract(

$_POST)

;
$stmt =

$conn->

prepare("SELECT * FROM `users` where `email` = ?");
$stmt->bind_param('s', $email);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows > 0){
$data = $result->fetch_assoc();
if(password_verify($password, $data['password'])){
foreach($data as $k => $v){
if($k != 'password'){
$_SESSION[$k] = $v;
}
}
$_SESSION['msg']['success'] = "You have login successfully.";
header('location: ./');
exit;
}else{
$error = "Incorrect Email or Password";
}
}else{
$error = "Incorrect Email or Password";
}
}
?>
<!DOCTYPE html>
<html

lang

=

"en"

>
<?php include_once(

'header.php'

)

?>
<body

>
<h1

id

=

"page-title"

class

=

"text-center"

>

Login Page</

h1

>
<hr

id

=

"title_hr"

class

=

"mx-auto"

>
<div

id

=

"login-wrapper"

>
<div

class

=

"text-muted"

><small

><em

>

Please Fill all the required fields</

em

></

small

></

div

>
<?php if(

isset(

$error)

&& !empty(

$error)

)

: ?>
<div

class

=

"message-error"

><?=

$error ?></

div

>
<?php endif; ?>
<?php if(

isset(

$_SESSION[

'msg'

]

[

'success'

]

)

&& !empty(

$_SESSION[

'msg'

]

[

'success'

]

)

)

: ?>
<div

class

=

"message-success"

>
<?php
echo $_SESSION[

'msg'

]

[

'success'

]

;
unset(

$_SESSION[

'msg'

]

)

;
?>
</

div

>
<?php endif; ?>
<form

action

=

""

method

=

"POST"

>
<div

class

=

"input-field"

>
<label

for

=

"email"

class

=

"input-label"

>

Email</

label

>
<input

type

=

"email"

id

=

"email"

name

=

"email"

value

=

"<?= $_POST['email'] ?? "

" ?>

" required="required">
</

div

>
<div

class

=

"input-field"

>
<label

for

=

"password"

class

=

"input-label"

>

Password</

label

>
<input

type

=

"password"

id

=

"password"

name

=

"password"

value

=

"<?= $_POST['password'] ?? "

" ?>

" required="required">
</

div

>
<div

class

=

"input-field "

>
<a

href

=

"forgot-password.php"

tabindex

=

"-1"

><small

><strong

>

Forgot Password?</

strong

></

small

></

a

>
</

div

>
<button

class

=

"login-btn"

>

Login</

button

>
</

form

>
</

div

>
</

body

>
</

html

>

index.php

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

<?php
require_once(

'auth.php'

)

;
require_once(

'db-connect.php'

)

;
?>
<!DOCTYPE html>
<html

lang

=

"en"

>
<?php include_once(

'header.php'

)

?>
<body

>
<h1

id

=

"page-title"

class

=

"text-center"

>

Home Page</

h1

>
<hr

id

=

"title_hr"

class

=

"mx-auto"

>
<div

id

=

"profile-wrapper"

>
<?php if(

isset(

$_SESSION[

'msg'

]

[

'success'

]

)

&& !empty(

$_SESSION[

'msg'

]

[

'success'

]

)

)

: ?>
<div

class

=

"message-success"

>
<?php
echo $_SESSION[

'msg'

]

[

'success'

]

;
unset(

$_SESSION[

'msg'

]

)

;
?>
</

div

>
<?php endif; ?>
<h2

class

=

"text-center"

><strong

>

Profile</

strong

></

h2

>
<hr

width

=

"25px"

style

=

"margin: .35em auto"

>
<br

>
<dl

>
<dt

><strong

>

Fullname:</

strong

></

dt

>
<dd

><?=

$_SESSION[

'fullname'

]

?? ""

?></

dd

>
<dt

><strong

>

Contact No.:</

strong

></

dt

>
<dd

><?=

$_SESSION[

'contact'

]

?? ""

?></

dd

>
<dt

><strong

>

Email:</

strong

></

dt

>
<dd

><?=

$_SESSION[

'email'

]

?? ""

?></

dd

>
<dt

><strong

>

About:</

strong

></

dt

>
<dd

><?=

$_SESSION[

'about'

]

?? ""

?></

dd

>
</

dl

>
<a

href

=

"logout.php"

class

=

"logout-btn"

>

Logout</

a

>
</

div

>
</

body

>
</

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.

<?php
require_once(

'auth.php'

)

;
require_once(

'db-connect.php'

)

;
if(

$_SERVER[

'REQUEST_METHOD'

]

==

'POST'

)

{
extract(

$_POST)

;
$stmt =

$conn->

prepare("SELECT * FROM `users` where `email` = ?");
$stmt->bind_param('s', $email);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows > 0){
$data = $result->fetch_assoc();
$email= $data['email'];
$subject = "Sample Website - Reset Password";
$message = "";
ob_start();
include("reset_mail-template.php");
$message = ob_get_clean();
// echo $message;exit;
$eol = "\r\n";
// Mail Main Header
$headers = "From: [email protected]" . $eol;
$headers .= "Reply-To: [email protected]" . $eol;
$headers .= "To: <{

$email}

>

" . $eol;
$headers .= "MIME-Version: 1.0" . $eol;
$headers .= "Content-Type: text/html; charset=iso-8859-1" . $eol;
try{
mail($email, $subject, $message, $headers);
$_SESSION['msg']['success'] = "We have sent you an email to reset your password.";
header('location: login.php');
exit;
}catch(Exception $e){
throw new ErrorException($e->getMessage());
exit;
}
?>
<?php
}

else{
$error =

"Email is not registered."

;
}
}
?>
<!DOCTYPE html>
<html

lang

=

"en"

>
<?php include_once(

'header.php'

)

?>
<body

>
<h1

id

=

"page-title"

class

=

"text-center"

>

Forgot Password Page</

h1

>
<hr

id

=

"title_hr"

class

=

"mx-auto"

>
<div

id

=

"login-wrapper"

>
<div

class

=

"text-muted"

><small

><em

>

Please Fill all the required fields</

em

></

small

></

div

>
<?php if(

isset(

$error)

&& !empty(

$error)

)

: ?>
<div

class

=

"message-error"

><?=

$error ?></

div

>
<?php endif; ?>
<form

action

=

""

method

=

"POST"

>
<div

class

=

"input-field"

>
<label

for

=

"email"

class

=

"input-label"

>

Email</

label

>
<input

type

=

"email"

id

=

"email"

name

=

"email"

value

=

"<?= $_POST['email'] ?? "

" ?>

" required="required">
</

div

>
<div

class

=

"input-field "

>
<a

href

=

"login.php"

tabindex

=

"-1"

><small

><strong

>

Go back to login page</

strong

></

small

></

a

>
</

div

>
<button

class

=

"login-btn"

>

Reset Password</

button

>
</

form

>
</

div

>
</

body

>
</

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html

xmlns=

"http://www.w3.org/1999/xhtml"

xmlns:v=

"urn:schemas-microsoft-com:vml"

xmlns:o=

"urn:schemas-microsoft-com:office:office"

>
<head

>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta

http-equiv

=

"Content-Type"

content

=

"text/html; charset=UTF-8"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<meta

name

=

"x-apple-disable-message-reformatting"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<title

></

title

>
<style

type

=

"text/css"

>
@media only screen and (min-width: 620px) {
.u-row {
width: 600px !important;
}
.u-row .u-col {
vertical-align: top;
}
.u-row .u-col-100 {
width: 600px !important;
}
}
@media (max-width: 620px) {
.u-row-container {
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.u-row .u-col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
.u-row {
width: 100% !important;
}
.u-col {
width: 100% !important;
}
.u-col > div {
margin: 0 auto;
}
}
body {
margin: 0;
padding: 0;
}
table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}
p {
margin: 0;
}
.ie-container table,
.mso-container table {
table-layout: fixed;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors='true'] {
color: inherit !important;
text-decoration: none !important;
}
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; } }
</

style

>
<link

href

=

"https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap"

rel

=

"stylesheet"

type

=

"text/css"

>
</

head

>
<body

class

=

"clean-body u_body"

style

=

"margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #f9f9ff;color: #000000"

>
<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"

>
<tbody

>
<tr

style

=

"vertical-align: top"

>
<td

style

=

"word-break: break-word;border-collapse: collapse !important;vertical-align: top"

>
<div

class

=

"u-row-container"

style

=

"padding: 0px;background-color: transparent"

>
<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;"

>
<div

style

=

"border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;"

>
<div

class

=

"u-col u-col-100"

style

=

"max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;"

>
<div

style

=

"background-color: #ffffff;height: 100%;width: 100% !important;"

>
<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;"

>
<table

id

=

"u_content_image_1"

style

=

"font-family:'Raleway',sans-serif;"

role=

"presentation"

cellpadding

=

"0"

cellspacing

=

"0"

width

=

"100%"

border

=

"0"

>
<tbody

>
<tr

>
<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"

>
<table

width

=

"100%"

cellpadding

=

"0"

cellspacing

=

"0"

border

=

"0"

>
<tr

>
<td

style

=

"padding-right: 0px;padding-left: 0px;"

align

=

"center"

>
<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"

/

>
</

td

>
</

tr

>
</

table

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
<table

id

=

"u_content_heading_1"

style

=

"font-family:'Raleway',sans-serif;"

role=

"presentation"

cellpadding

=

"0"

cellspacing

=

"0"

width

=

"100%"

border

=

"0"

>
<tbody

>
<tr

>
<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"

>
<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

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
<div

class

=

"u-row-container"

style

=

"padding: 0px;background-color: transparent"

>
<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;"

>
<div

style

=

"border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;"

>
<div

class

=

"u-col u-col-100"

style

=

"max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;"

>
<div

style

=

"background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"

>
<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;"

>
<table

id

=

"u_content_heading_2"

style

=

"font-family:'Raleway',sans-serif;"

role=

"presentation"

cellpadding

=

"0"

cellspacing

=

"0"

width

=

"100%"

border

=

"0"

>
<tbody

>
<tr

>
<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"

>
<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

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
<table

id

=

"u_content_text_2"

style

=

"font-family:'Raleway',sans-serif;"

role=

"presentation"

cellpadding

=

"0"

cellspacing

=

"0"

width

=

"100%"

border

=

"0"

>
<tbody

>
<tr

>
<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"

>
<div

class

=

"v-font-size"

style

=

"font-size: 14px; color: #1386e5; line-height: 140%; text-align: left; word-wrap: break-word;"

>
<p

style

=

"line-height: 140%;"

><span

style

=

"text-decoration: underline; line-height: 19.6px;"

><span

style

=

"line-height: 19.6px;"

><strong

>
<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

>
</

strong

></

span

></

span

></

p

>
</

div

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
<table

id

=

"u_content_heading_3"

style

=

"font-family:'Raleway',sans-serif;"

role=

"presentation"

cellpadding

=

"0"

cellspacing

=

"0"

width

=

"100%"

border

=

"0"

>
<tbody

>
<tr

>
<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"

>
<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

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
<table

id

=

"u_content_button_1"

style

=

"font-family:'Raleway',sans-serif;"

role=

"presentation"

cellpadding

=

"0"

cellspacing

=

"0"

width

=

"100%"

border

=

"0"

>
<tbody

>
<tr

>
<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"

>
<div

align

=

"center"

>
<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;">
<span

style

=

"display:block;padding:10px 20px;line-height:120%;"

><span

style

=

"line-height: 16.8px;"

>

Reset Your Password</

span

></

span

>
</

a

>
</

div

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
<div

class

=

"u-row-container"

style

=

"padding: 0px;background-color: transparent"

>
<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;"

>
<div

style

=

"border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;"

>
<div

class

=

"u-col u-col-100"

style

=

"max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;"

>
<div

style

=

"height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"

>
<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;"

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

td

>
</

tr

>
</

tbody

>
</

table

>
</

body

>
</

html

>

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.

<?php
require_once(

'auth.php'

)

;
require_once(

'db-connect.php'

)

;
if(

$_SERVER[

'REQUEST_METHOD'

]

==

'POST'

)

{
extract(

$_POST)

;
if(

$new_password !==

$confirm_password)

{
$error =

"Password does not match."

;
}

else{
$uid =

$_GET[

'uid'

]

?? ""

;
$stmt =

$conn->

prepare("SELECT * FROM `users` where md5(`id`) = ?");
$stmt->bind_param('s', $uid);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows > 0){
$data = $result->fetch_assoc();
$password = password_hash($new_password, PASSWORD_DEFAULT);
$update = $conn->query("UPDATE `users` set `password` = '{$password}'");
if($update){
$_SESSION['msg']['success'] = "New Password has been saved successfully.";
header('location:login.php');
exit;
}else{
$error = 'Password has failed to update.';
}
}else{
$error = "User is registered on this website.";
}
}
}
?>
<!DOCTYPE html>
<html

lang

=

"en"

>
<?php include_once(

'header.php'

)

?>
<body

>
<h1

id

=

"page-title"

class

=

"text-center"

>

Reset Password</

h1

>
<hr

id

=

"title_hr"

class

=

"mx-auto"

>
<div

id

=

"login-wrapper"

>
<div

class

=

"text-muted"

><small

><em

>

Please Fill all the required fields</

em

></

small

></

div

>
<?php if(

isset(

$error)

&& !empty(

$error)

)

: ?>
<div

class

=

"message-error"

><?=

$error ?></

div

>
<?php endif; ?>
<?php if(

isset(

$_SESSION[

'msg'

]

[

'success'

]

)

&& !empty(

$_SESSION[

'msg'

]

[

'success'

]

)

)

: ?>
<div

class

=

"message-success"

>
<?php
echo $_SESSION[

'msg'

]

[

'success'

]

;
unset(

$_SESSION[

'msg'

]

)

;
?>
</

div

>
<?php endif; ?>
<form

action

=

""

method

=

"POST"

>
<div

class

=

"input-field"

>
<label

for

=

"new_password"

class

=

"input-label"

>

New Password</

label

>
<input

type

=

"password"

id

=

"new_password"

name

=

"new_password"

value

=

"<?= $_POST['new_password'] ?? "

" ?>

" autofocus required="required">
</

div

>
<div

class

=

"input-field"

>
<label

for

=

"confirm_password"

class

=

"input-label"

>

Confirm New Password</

label

>
<input

type

=

"password"

id

=

"confirm_password"

name

=

"confirm_password"

value

=

"<?= $_POST['confirm_password'] ?? "

" ?>

" required="required">
</

div

>
<button

class

=

"reset-btn"

>

Reset Password</

button

>
</

form

>
</

div

>
</

body

>
</

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.

<?php
session_start

(

)

;
session_destroy

(

)

;
header

(

'location: login.php'

)

;

Snapshots

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

Login Page

Home/Profile Page

Forgot Password

Sample Email with Reset Link

Reset Password

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 =)

Download

You must upgrade your account or reply in the thread to view hidden text.

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

More options

GorillaZ

449,193

322,229

322,238