Laravel Jetstream offers a powerful starting point for building modern web applications with robust authentication features. While Jetstream comes with out-of-the-box registration and login functionalities, there are many scenarios where you might want to customize these processes to enhance user experience or meet specific business requirements. In this blog, we’ll explore how to effectively customize the registration and login functionalities in Laravel Jetstream.

Step 1: Setting Up Your Laravel Project

Before diving into customization, ensure you have a Laravel project set up with Jetstream installed. You can create a new Laravel project with Jetstream using the following command:

composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name
composer require laravel/jetstream
php artisan jetstream:install livewire
npm install && npm run dev
php artisan migrate

Step 2: Customizing the Registration Form

To customize the registration form, start by editing the Register component located at app/Http/Livewire/Auth/Register.php. You can add additional fields, such as 'phone number' or 'address', by defining new public properties and modifying the rules method.

public $phone;

protected function rules()
{
    return [
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|confirmed|min:8',
        'phone' => 'required|string|max:15', // New validation rule
    ];
}

Next, update the Blade view located at resources/views/auth/register.blade.php to include your new fields:

<div>
    <label for="phone">Phone Number</label>
    <input type="text" id="phone" wire:model="phone" required>
    @error('phone') <span class="error">{{ $message }}</span> @enderror
</div>

Step 3: Customizing the Login Form

Similar to the registration form, you can customize the login form by editing the Login component found at app/Http/Livewire/Auth/Login.php. You may want to add a 'remember me' feature or modify the validation rules.

To add a 'remember me' checkbox:

1. Update the Login component:

public $remember = false;

protected function rules()
{
    return [
        'email' => 'required|string|email',
        'password' => 'required|string',
    ];
}

2. Modify the Blade view at resources/views/auth/login.blade.php:

<div>
    <input type="checkbox" wire:model="remember">
    <label for="remember">Remember Me</label>
</div>

Step 4: Handling Custom Logic

If you need to add custom logic during registration or login, such as sending a welcome email or logging user activity, you can do so in the respective methods. For instance, in the Register method, after a user is created, you might want to dispatch a notification:

use App\Notifications\WelcomeNotification;

public function register()
{
    $this->validate();

    $user = User::create([
        'name' => $this->name,
        'email' => $this->email,
        'password' => Hash::make($this->password),
        'phone' => $this->phone, // Save additional field
    ]);

    $user->notify(new WelcomeNotification());
    
    Auth::login($user);

    return redirect()->route('dashboard');
}

Step 5: Testing Your Customizations

Once you’ve made your changes, run your application and test the new features. Ensure all validations work as expected and the user experience is seamless.

Conclusion

Customizing Laravel Jetstream's registration and login processes allows you to better serve your application's needs and provide a more tailored experience for your users. By following the steps outlined in this guide, you can enhance your authentication flows while leveraging the powerful features that Laravel offers.