Customize Laravel Filament logout

Filament is a powerful and flexible library for managing admin panels in Laravel. By default, when logging out of a Filament panel, you are redirected to the panel's login page. However, you might want to customize this redirection or adapt the logout button in the User Menu. This article demonstrates how to customize the logout behavior in a Filament panel.

Why customize Logout on Filament?

It is common to redirect users to a specific page at the end of their session. For instance:

• Redirecting to a homepage or a custom landing page.
• Displaying a confirmation message after logout.

With Filament, this customization is straightforward and requires just a few steps.

Prerequisites

Before you begin, ensure that:

1. You have a Laravel project with Filament already installed.
2. You understand Laravel basics, such as service providers and routes.

Implementing custom Logout Redirection

Step 1: Create the LogoutResponse Class

The first step is to create a class to define the logout redirection behavior. First create a LogoutResponse class file in app/Http/Responses folder.

Then, add the following code to it:

<?php

namespace App\Http\Responses;

use Filament\Http\Responses\Auth\Contracts\LogoutResponse as LogoutResponseContract;
use Illuminate\Http\RedirectResponse;

class LogoutResponse implements LogoutResponseContract
{
    public function toResponse($request): RedirectResponse
    {
        return redirect()->route('welcome');
    }
}

In this example, we redirect the user to a route named welcome. You can modify this route to suit your needs.

Step 2: Register the redirection in AppServiceProvider

Next, inform Filament that this class will handle logout redirections.

Add the following configuration in the register method of your AppServiceProvider:

use Filament\Http\Responses\Auth\Contracts\LogoutResponse as LogoutResponseContract;
use App\Http\Responses\LogoutResponse;

public function register(): void
{
    $this->app->bind(LogoutResponseContract::class, LogoutResponse::class);
}

This tells Filament to use the LogoutResponse class whenever a logout occurs.

Customizing the Logout button in the User Menu

To go further, you can customize the "Logout" button in Filament’s User Menu.

Add the following code in your Filament Panel Provider:

use Filament\Navigation\MenuItem;
use Filament\Facades\Filament;

public function panel(Panel $panel): Panel
{
    return $panel
        //...
        ->userMenuItems([
            'logout' => MenuItem::make()
                ->label('Custom Log out')
                ->icon('heroicon-o-arrow-up-on-square-stack'),
        ]),
        //...

In this example, we change the label and the icon of the logout menu item. You can also use your own logout route with the ->url() method.

By following these steps, you can customize the redirection and behavior of logout in your Filament panels. Whether to enhance the user experience or add a unique touch to your project, Filament makes these adjustments simple and effective.