Multi-Panels: Custom Login Form Headings

2024-04-30

If you have multiple panels, like /admin/login and /student/login URLs, you may want to customize how their login forms look. In this example, we will customize the Heading text.

You need to generate two separate Login classes that would both extend Filament\Pages\Auth\Login class.

In those separate classes, you override the method getHeading().

And then, you assign those login classes separately as a parameter to ->login() in the Panel Provider of each panel.

You can apply the same logic to not only getHeading() method, but to any property/method of the default Filament Login class.

And not only that, same customization logic applies to Register class, too.


app/Filament/Auth/AdminLogin.php:

namespace App\Filament\Auth;
 
use Filament\Pages\Auth\Login;
use Illuminate\Contracts\Support\Htmlable;
 
class AdminLogin extends Login
{
public function getHeading(): string|Htmlable
{
return __('Admin Login');
}
}

app/Filament/Auth/StudentLogin.php:

namespace App\Filament\Auth;
 
use Filament\Pages\Auth\Login;
use Illuminate\Contracts\Support\Htmlable;
 
class StudentLogin extends Login
{
public function getHeading(): string|Htmlable
{
return __('Student Login');
}
}

app/Providers/Filament/AdminPanelProvider.php:

use App\Filament\Auth\AdminLogin;
 
// ...
 
class AdminPanelProvider extends PanelProvider
{
public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('admin')
->path('admin')
->login(AdminLogin::class)

app/Providers/Filament/StudentPanelProvider.php:

use App\Filament\Auth\StudentLogin;
 
class StudentPanelProvider extends PanelProvider
{
public function panel(Panel $panel): Panel
{
return $panel
->id('student')
->path('student')
->login(StudentLogin::class)

Now, if we visit the URL /admin/login, we see this:

And similarly, if we visit the /student/login login form, we see a different text in the heading:

A few of our Premium Examples: