Introduction
Password reset functionality is a critical component of any modern web application. While Laravel provides a robust out-of-the-box solution, there are times when you need to tailor this process to meet specific requirements or enhance user experience. In this tutorial, we'll dive deep into customizing Laravel's password reset workflow, covering everything from basic modifications to advanced techniques.
A Brief History of Laravel Authentication
Before we delve into customization, let's take a quick trip down memory lane to understand how Laravel's authentication solutions have evolved:
- Laravel UI: The first iteration of a complete auth solution in Laravel, which served the community well for years.
- Laravel Breeze: Born out of the growing popularity of Tailwind CSS, Breeze offered a minimal, lightweight, and modern authentication scaffolding.
- Laravel Jetstream: For those needing more advanced features, Jetstream was introduced, covering a wide range of authentication including 2FA and team management functionalities.
- Laravel Fortify: A headless authentication backend that can be used with any frontend, providing flexibility for developers to implement their own UI.
Understanding Laravel's Password Reset Flow
Laravel's password reset process typically involves the following steps:
- User requests a password reset
- A token is generated and stored
- An email is sent to the user with a reset link (signed URL)
- User clicks the link and enters a new password
- The password is updated, and the token is invalidated
While this flow works well for most applications, you might want to customize various aspects of this process to better suit your needs.
What We're Building
In this tutorial, we'll create a bare Laravel SaaS (minimal) application with a customized password reset flow. We'll cover:
- Setting up a fresh Laravel application with Breeze
- Customizing the password reset URL
- Modifying the password reset email content
- Adding a success notification after password reset
- Implementing and customizing automated tests for our changes
Getting Started
Let's begin by setting up a new Laravel application:
composer create-project laravel/laravel password-reset-demo
cd password-reset-demo
Before we proceed, let's initialize Git for version control:
git init
git add .
git commit -m "Initial commit"
Now, let's install Laravel Breeze to get the basic authentication scaffolding:
composer require laravel/breeze --dev
php artisan breeze:install
When prompted, choose the stack that best fits your needs. For this tutorial, we'll use Livewire:
php artisan breeze:install
Which Breeze stack would you like to install?
❯ livewire
Would you like dark mode support? (yes/no) [no]
❯ no
Which testing framework do you prefer? [PHPUnit]
❯ Pest
After installation, let's commit our changes:
git add .
git commit -m "Add Authentication and Pages"
Now, set up your database and run migrations:
php artisan migrate
Install and compile your frontend assets:
npm install
npm run dev
At this point, we have a basic Laravel application with authentication functionality. Let's run the tests to ensure everything is working as expected:
php artisan test
You should see all tests passing, giving us a green light to proceed with our customizations.
Customizing the Password Reset URL
By default, Laravel (using Breeze) uses a standard URL for password reset (/reset-password). Let's customize this in our AppServiceProvider:
<?php
namespace App\Providers;
use App\Models\User;
use Illuminate\Auth\Notifications\ResetPassword;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
public function boot(): void
{
ResetPassword::createUrlUsing(function (User $user, string $token) {
return url(route('password.reset', [
'token' => $token,
'email' => $user->getEmailForPasswordReset(),
], false));
});
}
}
This customization allows you to modify the reset URL structure, add additional parameters, or even point to a completely different domain if needed. For example, you could change it to:
return "https://account.yourdomain.com/reset-password?token={$token}&email={$user->getEmailForPasswordReset()}";
Modifying the Password Reset Email
Next, let's customize the content of the password reset email. We'll do this by adding to our AppServiceProvider:
use Illuminate\Notifications\Messages\MailMessage;
// ...
public function boot(): void
{
// ... previous customizations
ResetPassword::toMailUsing(function (User $user, string $token) {
$url = url(route('password.reset', [
'token' => $token,
'email' => $user->getEmailForPasswordReset(),
], false));
return (new MailMessage)
->subject(config('app.name') . ': ' . __('Reset Password Request'))
->greeting(__('Hello!'))
->line(__('You are receiving this email because we received a password reset request for your account.'))
->action(__('Reset Password'), $url)
->line(__('This password reset link will expire in :count minutes.', ['count' => config('auth.passwords.' . config('auth.defaults.passwords') . '.expire')]))
->line(__('If you did not request a password reset, no further action is required.'))
->salutation(__('Regards,') . "\n" . config('app.name') . " Team");
});
}
Note: The __() function is a helper for localization, allowing easy translation of strings in your application.
Adding a Password Reset Success Notification
To enhance user experience and security, let's add a notification that's sent after a successful password reset. First, create a new notification:
php artisan make:notification PasswordResetSuccessfullyNotification
Edit the newly created notification:
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;
class PasswordResetSuccessfullyNotification extends Notification implements ShouldQueue
{
use Queueable;
public function via($notifiable)
{
return ['mail'];
}
public function toMail($notifiable)
{
return (new MailMessage)
->subject('Password Reset Successful')
->greeting('Hello!')
->line('Your password has been successfully reset.')
->line('If you did not reset your password, please contact support immediately.')
->action('Login to Your Account', url('/login'))
->line('Thank you for using our application!');
}
}
Now, create a listener for the PasswordReset event:
php artisan make:listener SendPasswordResetSuccessfullyNotification --event=PasswordReset
Update the listener:
<?php
namespace App\Listeners;
use App\Notifications\PasswordResetSuccessfullyNotification;
use Illuminate\Auth\Events\PasswordReset;
use Illuminate\Contracts\Queue\ShouldQueue;
class SendPasswordResetSuccessfullyNotification implements ShouldQueue
{
public function handle(PasswordReset $event)
{
$event->user->notify(new PasswordResetSuccessfullyNotification());
}
}
Remember to register this listener in your EventServiceProvider.
Testing Our Customizations
Testing is crucial to ensure our customizations work as expected. Update the existing password reset test in tests/Feature/Auth/PasswordResetTest.php:
<?php
namespace Tests\Feature\Auth;
use App\Models\User;
use App\Notifications\PasswordResetSuccessfullyNotification;
use Illuminate\Auth\Notifications\ResetPassword;
use Illuminate\Support\Facades\Notification;
use Tests\TestCase;
class PasswordResetTest extends TestCase
{
public function test_reset_password_link_can_be_requested(): void
{
Notification::fake();
$user = User::factory()->create();
$this->post('/forgot-password', ['email' => $user->email]);
Notification::assertSentTo($user, ResetPassword::class, function ($notification) use ($user) {
$response = $this->get($notification->toMail($user)->actionUrl);
$this->assertStringContainsString('Reset Password', $response->getContent());
return true;
});
}
public function test_password_can_be_reset_with_valid_token(): void
{
Notification::fake();
$user = User::factory()->create();
$this->post('/forgot-password', ['email' => $user->email]);
Notification::assertSentTo($user, ResetPassword::class, function ($notification) use ($user) {
$token = $notification->token;
$response = $this->post('/reset-password', [
'token' => $token,
'email' => $user->email,
'password' => 'new-password',
'password_confirmation' => 'new-password',
]);
$response->assertSessionHasNoErrors();
Notification::assertSentTo($user, PasswordResetSuccessfullyNotification::class);
return true;
});
}
public function test_reset_password_email_contains_custom_content(): void
{
Notification::fake();
$user = User::factory()->create();
$this->post('/forgot-password', ['email' => $user->email]);
Notification::assertSentTo($user, ResetPassword::class, function ($notification) use ($user) {
$mailMessage = $notification->toMail($user);
$this->assertStringContainsString('Hello!', $mailMessage->greeting);
$this->assertStringContainsString('Regards,', $mailMessage->salutation);
return true;
});
}
}
Conclusion
Customizing Laravel's password reset workflow allows you to create a more tailored and user-friendly experience for your application. We've covered how to modify the reset URL, customize the email content, add a success notification, and ensure everything works through automated testing.
Remember, while customization can be powerful, it's essential to maintain security best practices throughout the process. Always validate user input, use secure token generation and storage methods, and follow Laravel's security recommendations.
Some additional considerations for further improvements:
- Implement rate limiting on password reset requests to prevent abuse.
- Add logging for successful and failed password reset attempts for security auditing.
- Consider implementing multi-channel notifications (e.g., SMS, push notifications) for critical security events like password resets.
- Regularly review and update your password policies to align with current security best practices.
For more advanced topics and Laravel insights, check out the official Laravel documentation and stay tuned to the Laravel community resources for more in-depth tutorials and best practices.
Happy coding, and may your Laravel applications be ever secure and user-friendly!
Top comments (0)