Laravel 8 E-Commerce - Forgot Password

In this video, we will learn how to create a forgot password feature in our e-commerce application.

Let's explore how to implement this feature.

On the login page, you can see a "Forgot Password" link.

If you click on this link, it opens a new page called "Forgot Password".

Now, let's implement the HTML layout for this page.

Switch to your project and open the resources/views/auth/forgot-password.blade.php file.

Add the following code to this file:


<x-base-layout>
    <main id="main" class="main-site left-sidebar">

		<div class="container">

			<div class="wrap-breadcrumb">
				<ul>
					<li class="item-link"><a href="/" class="link">home</a></li>
					<li class="item-link"><span>Forgot Password</span></li>
				</ul>
			</div>
			<div class="row">
				<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3">
					<div class=" main-content-area">
						<div class="wrap-login-item ">						
							<div class="login-form form-item form-stl">
                                @if (session('status'))
                                    <div class="mb-4 font-medium text-sm text-green-600">
                                        {{ session('status') }}
                                    </div>
                                @endif
                                <x-jet-validation-errors class="mb-4" />
                                <form name="frm-login" method="POST" action="{{route('password.email')}}">
                                    @csrf
									<fieldset class="wrap-title">
										<h3 class="form-title">Forgot Password</h3>										
									</fieldset>
									<fieldset class="wrap-input">
										<label for="frm-login-uname">Email Address:</label>
										<input type="email" id="frm-login-uname" name="email" placeholder="Type your email address" :value="old('email')" required autofocus>
									</fieldset>
									<input type="submit" class="btn btn-submit" value="Email Password Reset Link" name="submit">
								</form>
							</div>												
						</div>
					</div><!--end main products area-->		
				</div>
			</div><!--end row-->

		</div><!--end container-->

	</main>
</x-base-layout>

Save this file and let's check the result.

Switch to your browser and refresh the page.

You can see that the template has been applied to the forgot password page.

Now, let's configure the email settings to send the password reset link.

Go to the .env file and add your email details.

Here, I will enter my Gmail credentials:


MAIL_MAILER=smtp.
MAIL_HOST=smtp.googlemail.com
MAIL_PORT=465
MAIL_USERNAME=yourgmailid@gmail.com
MAIL_PASSWORD=paswword
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=yourgmailid@gmail.com
MAIL_FROM_NAME="${APP_NAME}"

Save this file and re-run the application.

Switch to the command prompt and press Ctrl + C to stop the application.

Then, run the following command:


php artisan serve

Switch to your browser and refresh the page.

Enter the email ID for which you want to reset the password.

I will enter the email ID of a user.

Click on the "Email Password Reset Link" button.

You will get a message saying "Email sent".

Let's check the email.

Open your Gmail account and you can see the reset email.

Open this email and click on the link.

You will be redirected to the reset password page.

Let's apply the template to this page.

Switch to your project and open the reset-password.blade.php file.

Add the following code to this file:


<x-base-layout>
    <main id="main" class="main-site left-sidebar">

		<div class="container">

			<div class="wrap-breadcrumb">
				<ul>
					<li class="item-link"><a href="/" class="link">home</a></li>
					<li class="item-link"><span>Reset Password</span></li>
				</ul>
			</div>
			<div class="row">
				<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3">
					<div class=" main-content-area">
						<div class="wrap-login-item ">						
							<div class="login-form form-item form-stl">                                
                                <x-jet-validation-errors class="mb-4" />
                                <form name="frm-login" method="POST" action="{{route('password.update')}}">
                                    @csrf
                                    <input type="hidden" name="token" value="{{ $request->route('token') }}">
									<fieldset class="wrap-title">
										<h3 class="form-title">Reset Password</h3>										
									</fieldset>
									<fieldset class="wrap-input">
										<label for="frm-login-uname">Email Address:</label>
										<input type="email" id="frm-login-uname" name="email" placeholder="Type your email address" value="{{$request->email}}" required autofocus>
									</fieldset>
                                    <fieldset class="wrap-input item-width-in-half left-item ">
										<label for="password">Password *</label>
										<input type="password" id="password" name="password" placeholder="Password" required autocomplete="new-password">
									</fieldset>
									<fieldset class="wrap-input item-width-in-half ">
										<label for="password_confirmation">Confirm Password *</label>
										<input type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password" required autocomplete="new-password">
									</fieldset>
									<input type="submit" class="btn btn-submit" value="Reset Password" name="submit">
								</form>
							</div>												
						</div>
					</div><!--end main products area-->		
				</div>
			</div><!--end row-->

		</div><!--end container-->

	</main>
</x-base-layout>