Laravel Custom Forgot & Reset Password Example

By Hardik Savani May 8, 2021 Category : Laravel

Hello Dev,

Today our leading topic is laravel custom forgot password example. step by step explain custom password reset laravel. This post will give you simple example of how to create custom forgot password in laravel. step by step explain laravel custom reset password email.

Laravel provide it's own forget password functionality but if you want to create your custom forget password functionality then i will help to creating custom reset password function in php laravel. so basically, you can also create custom forget password with different models too.

you can easily create custom forget password with laravel 6, laravel 7 and laravel 8 version.

few days ago i posted Laravel Custom Login and Registration article, from there i will start implement custom reset password function. so let's follow bellow step.

you can see bellow preview of pages:

Login Page:

Step 1: Install Laravel

first of all we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create "password_resets" table

basically, it will already created "password_resets" table migration but if it's not created then you can create new migration as like bellow code:

Migration

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreatePasswordResetsTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('password_resets', function (Blueprint $table) {

$table->string('email')->index();

$table->string('token');

$table->timestamp('created_at')->nullable();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('password_resets');

}

}

Step 3: Create Route

In this is step we need to create custom route for forget and reset link. so open your routes/web.php file and add following route.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Auth\ForgotPasswordController;

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('forget-password', [ForgotPasswordController::class, 'showForgetPasswordForm'])->name('forget.password.get');

Route::post('forget-password', [ForgotPasswordController::class, 'submitForgetPasswordForm'])->name('forget.password.post');

Route::get('reset-password/{token}', [ForgotPasswordController::class, 'showResetPasswordForm'])->name('reset.password.get');

Route::post('reset-password', [ForgotPasswordController::class, 'submitResetPasswordForm'])->name('reset.password.post');

Step 4: Create Controller

in this step, we need to create ForgotPasswordController and add following code on that file:

app/Http/Controllers/Auth/ForgotPasswordController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use DB;

use Carbon\Carbon;

use App\Models\User;

use Mail;

use Hash;

use Illuminate\Support\Str;

class ForgotPasswordController extends Controller

{

/**

* Write code on Method

*

* @return response()

*/

public function showForgetPasswordForm()

{

return view('auth.forgetPassword');

}

/**

* Write code on Method

*

* @return response()

*/

public function submitForgetPasswordForm(Request $request)

{

$request->validate([

'email' => 'required|email|exists:users',

]);

$token = Str::random(64);

DB::table('password_resets')->insert([

'email' => $request->email,

'token' => $token,

'created_at' => Carbon::now()

]);

Mail::send('email.forgetPassword', ['token' => $token], function($message) use($request){

$message->to($request->email);

$message->subject('Reset Password');

});

return back()->with('message', 'We have e-mailed your password reset link!');

}

/**

* Write code on Method

*

* @return response()

*/

public function showResetPasswordForm($token) {

return view('auth.forgetPasswordLink', ['token' => $token]);

}

/**

* Write code on Method

*

* @return response()

*/

public function submitResetPasswordForm(Request $request)

{

$request->validate([

'email' => 'required|email|exists:users',

'password' => 'required|string|min:6|confirmed',

'password_confirmation' => 'required'

]);

$updatePassword = DB::table('password_resets')

->where([

'email' => $request->email,

'token' => $request->token

])

->first();

if(!$updatePassword){

return back()->withInput()->with('error', 'Invalid token!');

}

$user = User::where('email', $request->email)

->update(['password' => Hash::make($request->password)]);

DB::table('password_resets')->where(['email'=> $request->email])->delete();

return redirect('/login')->with('message', 'Your password has been changed!');

}

}

Step 5: Email Configuration

in this step, we will add email configuration on env file, because we will send email to reset password link from controller:

.env

MAIL_DRIVER=smtp

MAIL_HOST=smtp-mail.outlook.com

MAIL_PORT=587

[email protected]

MAIL_PASSWORD=123456789

MAIL_ENCRYPTION=tls

[email protected]

Step 6: Create Blade Files

here, we need to create blade files for layout, login, register and home page. so let's create one by one files:

resources/views/layout.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel - ItSolutionStuff.com</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

body{

margin: 0;

font-size: .9rem;

font-weight: 400;

line-height: 1.6;

color: #212529;

text-align: left;

background-color: #f5f8fa;

}

.navbar-laravel

{

box-shadow: 0 2px 4px rgba(0,0,0,.04);

}

.navbar-brand , .nav-link, .my-form, .login-form

{

font-family: Raleway, sans-serif;

}

.my-form

{

padding-top: 1.5rem;

padding-bottom: 1.5rem;

}

.my-form .row

{

margin-left: 0;

margin-right: 0;

}

.login-form

{

padding-top: 1.5rem;

padding-bottom: 1.5rem;

}

.login-form .row

{

margin-left: 0;

margin-right: 0;

}

</style>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light navbar-laravel">

<div class="container">

<a class="navbar-brand" href="#">Laravel</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav ml-auto">

@guest

<li class="nav-item">

<a class="nav-link" href="{{ route('login') }}">Login</a>

</li>

<li class="nav-item">

<a class="nav-link" href="{{ route('register') }}">Register</a>

</li>

@else

<li class="nav-item">

<a class="nav-link" href="{{ route('logout') }}">Logout</a>

</li>

@endguest

</ul>

</div>

</div>

</nav>

@yield('content')

</body>

</html>

resources/views/auth/forgetPassword.blade.php

@extends('layout')

@section('content')

<main class="login-form">

<div class="cotainer">

<div class="row justify-content-center">

<div class="col-md-8">

<div class="card">

<div class="card-header">Reset Password</div>

<div class="card-body">

@if (Session::has('message'))

<div class="alert alert-success" role="alert">

{{ Session::get('message') }}

</div>

@endif

<form action="{{ route('forget.password.post') }}" method="POST">

@csrf

<div class="form-group row">

<label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>

<div class="col-md-6">

<input type="text" id="email_address" class="form-control" name="email" required autofocus>

@if ($errors->has('email'))

<span class="text-danger">{{ $errors->first('email') }}</span>

@endif

</div>

</div>

<div class="col-md-6 offset-md-4">

<button type="submit" class="btn btn-primary">

Send Password Reset Link

</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</main>

@endsection

resources/views/auth/forgetPasswordLink.blade.php

@extends('layout')

@section('content')

<main class="login-form">

<div class="cotainer">

<div class="row justify-content-center">

<div class="col-md-8">

<div class="card">

<div class="card-header">Reset Password</div>

<div class="card-body">

<form action="{{ route('reset.password.post') }}" method="POST">

@csrf

<input type="hidden" name="token" value="{{ $token }}">

<div class="form-group row">

<label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>

<div class="col-md-6">

<input type="text" id="email_address" class="form-control" name="email" required autofocus>

@if ($errors->has('email'))

<span class="text-danger">{{ $errors->first('email') }}</span>

@endif

</div>

</div>

<div class="form-group row">

<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

<div class="col-md-6">

<input type="password" id="password" class="form-control" name="password" required autofocus>

@if ($errors->has('password'))

<span class="text-danger">{{ $errors->first('password') }}</span>

@endif

</div>

</div>

<div class="form-group row">

<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>

<div class="col-md-6">

<input type="password" id="password-confirm" class="form-control" name="password_confirmation" required autofocus>

@if ($errors->has('password_confirmation'))

<span class="text-danger">{{ $errors->first('password_confirmation') }}</span>

@endif

</div>

</div>

<div class="col-md-6 offset-md-4">

<button type="submit" class="btn btn-primary">

Reset Password

</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</main>

@endsection

resources/views/email/forgetPassword.blade.php

<h1>Forget Password Email</h1>

You can reset password from bellow link:

<a href="{{ route('reset.password.get', $token) }}">Reset Password</a>

resources/views/auth/login.blade.php

@extends('layout')

@section('content')

<main class="login-form">

<div class="cotainer">

<div class="row justify-content-center">

<div class="col-md-8">

<div class="card">

<div class="card-header">Login</div>

<div class="card-body">

<form action="{{ route('login.post') }}" method="POST">

@csrf

<div class="form-group row">

<label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>

<div class="col-md-6">

<input type="text" id="email_address" class="form-control" name="email" required autofocus>

@if ($errors->has('email'))

<span class="text-danger">{{ $errors->first('email') }}</span>

@endif

</div>

</div>

<div class="form-group row">

<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

<div class="col-md-6">

<input type="password" id="password" class="form-control" name="password" required>

@if ($errors->has('password'))

<span class="text-danger">{{ $errors->first('password') }}</span>

@endif

</div>

</div>

<div class="form-group row">

<div class="col-md-6 offset-md-4">

<div class="checkbox">

<label>

<input type="checkbox" name="remember"> Remember Me

</label>

</div>

</div>

</div>

<div class="form-group row">

<div class="col-md-6 offset-md-4">

<div class="checkbox">

<label>

<a href="{{ route('forget.password.get') }}">Reset Password</a>

</label>

</div>

</div>

</div>

<div class="col-md-6 offset-md-4">

<button type="submit" class="btn btn-primary">

Login

</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</main>

@endsection

Now we are ready to run our example so run bellow command so quick run:

php artisan serve

Now you can open bellow URL on your browser:

localhost:8000/login

Forget Password Page:

Forget Password Email:

Reset Password Page:

I hope it can help you...

Tags :