Courses

Filament 3 From Scratch: Practical Course

Install, Create User & Customize

Filament is installed in the existing Laravel project. Before Filament, ideally, you should have the database migrations/models/seeders, and then Filament would build the admin panels and forms for that data.

So, I've created a new Laravel 10 project with one simple DB table "products" for now:

Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('price');
$table->timestamps();
});

And now, let's install Filament to manage those products.


Installation

Install the Filament package, choosing the "stable" release and a -W flag to manage dependencies via composer.

composer require filament/filament:"^3.0-stable" -W

Finally, run the Filament installation that would configure the admin panel in your Laravel project.

php artisan filament:install --panels

And that's it for the simple installation!

Now, you can load your project's /admin URL, which would auto-redirect you to /admin/login, and you should see the login form.

But wait, how do we log in now? What are the credentials?


Generate/Allow Users to Log In

Of course, it depends on your logic of who you want to give access to. Do you have existing users? Do they have roles? Or are you starting the project entirely from scratch?

First, let's cover the case if you don't have any users in the default "users" table of Laravel.

We can create one quickly. Filament comes with Artisan command for this:

php artisan make:filament-user

Under the hood, it just calls User::create() of Eloquent, but it gives a simple wizard for us to conveniently specify name/email/password.

You could also create a new user with any other preferred way, like php artisan tinker and running User::factory()->create() there.

Now, you can immediately log in with that new user.

After you're in, you already see the dashboard:

It's empty, and there are no menu items or more information, but the authentication works!

But now we have a security issue: any user can access the adminpanel! If you had any users already pre-existing in your database, they also have access by default. How to prevent that?


Restrict Access to Panel

Interestingly, Filament will only allow access to any user in your local environment.

Try to simulate the production deployment and make this change in your .env file - from "local" to "production".

.env

APP_ENV=local
APP_ENV=production

And refresh the page. You will see a 403 error.

I think this is a brilliant decision by the Filament team. So, locally, you can do whatever you want, but if you want the project to be public, please add the security logic.

So, let's do exactly that. In your User model of Laravel, you need to add the implements FilamentUser and implement the method canAccessPanel(Panel $panel), which returns true/false based on the condition of who you want to be able to log in.

Here's an example code to let in only users with users.is_admin == 1.

app/Models/User.php:

use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable implements FilamentUser
{
// ...
 
public function canAccessPanel(Panel $panel): bool
{
return $this->is_admin == 1;
}
}

Of course, your logic may be much more complicated with roles/permissions, and there's also a good Filament package for this called Shield that uses spatie/laravel-permission under the hood.


What Can We Customize in Panel?

By default, Filament comes with one Admin panel. We can create more separate panels for different user types, but we will discuss that in future lessons.

For now, let's focus on the default /admin, which has its settings in this file:

app/Providers/Filament/AdminPanelProvider.php:

class AdminPanelProvider extends PanelProvider
{
public function panel(Panel $panel): Panel
{
return $panel
->default()
->id('admin')
->path('admin')
->login()
->colors([
'primary' => Color::Amber,
])
// ... more settings
->authMiddleware([
Authenticate::class,
]);
}
}

Here, you can easily change a few things.

1. Change URL

What if you want to have your panel under /panel and not the default /admin?

Easy:

return $panel
->path('admin')
->path('panel')

2. Add More Auth Pages

By default, there's a ->login() function, but you can add many more:

return $panel
->login()
->registration()
->passwordReset()
->emailVerification()
->profile()
// ... more settings
->authMiddleware([
Authenticate::class,
]);

After this change, your Login form will have a link to the Registration form.

3. Change Theme Colors

One of the most popular questions about Filament is how to change the visual look. We will discuss it in depth later, but for now - you can change the primary colors in the same Provider class.

These are the default color values.

return $panel
->colors([
'primary' => Color::Amber,
'danger' => Color::Red,
'gray' => Color::Zinc,
'info' => Color::Blue,
'success' => Color::Green,
'warning' => Color::Amber,
])
// ... more settings
->authMiddleware([
Authenticate::class,
]);

Those Color:xxxxx names are the same as in Tailwind palette.

For example, here are the colors of the login form.

Let's change the value to this one:

->colors([
'primary' => Color::Blue,
])

Here's how the login form looks now:

There are more things you can customize. I've just listed the most common ones.

So these are the essential things you need to know about the initial installation and configuration of the Filament panel.

In the next lesson, we will create our first CRUD with Filament Resource.

avatar

Povilas, I intend to use the multitenant functionality in an application but I have a question: some models will be global to the system and should not be filtered by the tenant scope. Could you explain to me how I could get this?

πŸ‘ 4
avatar

It's not something I can explain quickly in a short comment. I will dedicate a separate lesson for multi-tenancy.

avatar

Oh, wonderful! Can not wait πŸ˜€

avatar

I honestly like how v3 of filament is smooth

πŸ‘ 5
avatar

My error when I run php artisan jetstream:install livewire --teams

Composer plugins have been disabled for safety in this non-interactive session. Set COMPOSER_ALLOW_SUPERUSER=1 if you want to allow plugins to run as root/super user. Do not run Composer as root/super user! See https://getcomposer.org/root for details ./composer.json has been updated Running composer update livewire/livewire Loading composer repositories with package information Updating dependencies Your requirements could not be resolved to an installable set of packages.

Problem 1 - Root composer.json requires livewire/livewire ^2.11, found livewire/livewire[v2.11.0, ..., 2.x-dev] but these were not loaded, likely because it conflicts with another require. Problem 2 - filament/support v3.0.15 requires livewire/livewire v3.0.0-beta.7 -> found livewire/livewire[v3.0.0-beta.7] but it conflicts with your root composer.json require (^2.11). - filament/filament v3.0.15 requires filament/support v3.0.15 -> satisfiable by filament/support[v3.0.15]. - filament/filament is locked to version v3.0.15 and an update of this package was not requested.

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

avatar

There's something wrong with your composer user setup. The error mesage says clearly what to do.

Also, plenty of results on Google, like this one.

avatar

Thanks you

avatar

Other wish when I deployed to production error: async-alpine.js?v=3.0.16.0:1 Mixed Content: The page at 'https://' was loaded over HTTPS, but requested an insecure script 'http:/..../js/filament/forms/components/select.js?v=3.0.16.0'. This request has been blocked; the content must be served over HTTPS.

avatar

Maybe you didn't specify you APP_URL correctly in production in the .env file, and you have http:// something there?

avatar

Terrible development in Filament πŸ€™

avatar

Terrible? :)

avatar

Can filament replace functionality of authentication instead breeze etc ? Or maybe can the authentication on the filament be replaced by using breeze etc ??

avatar

The actual authentication comes from LARAVEL, not Breeze. Breeze is the layer for login/register forms and the first design. So yes, Filament 3 can fully replace Breeze because it has Auth functions you may add - login, register, edit profile forms.

avatar

I want to ask. Do you plan to record videos for this course? Thanks

avatar

I was thinking to, but realized how much time it would take - a few weeks at least, and then the problem is to update those videos, and Filament 3 will get new features rapidly. So, for now, since people are not demanding video version (many actually prefer text), I'm not planning videos.

I will shoot a lot of videos on my Filament Daily YouTube channel.

avatar

Greetings, Povilas Thank you for your excellent work.

I am a novice in Filament and was hoping you could assist me. I am in the process of creating an administrative panel for a multilingual website. Naturally, I need to implement a form to add translations in multiple languages, both using tabs and without them. I am aware of the package by spatie and occasionally use it in my projects. However, in my current scenario, I cannot use it due to a vast catalog featuring search and filtering. Consequently, I am not using JSON translations and instead opt for additional translation tables like: post_translations

  • id
  • post_id
  • locale
  • name
  • description

But aside from using the spatie laravel translatable package, I haven't found any examples of creating and editing translation forms.

Polyvas, I would appreciate your assistance. Perhaps I am missing an evident solution.

avatar

I think you won't find any examples for your case for filament. You need to find examples for laravel and apply them for filament.

avatar
Davlatbek Ushurbakiyev

Thanks for the course, can I use ldap or sso authentication with filament?

avatar

I don't think so. At least I haven't tried and haven't seen any plugin for that.

avatar

This is too early in the tutorial. I am following this tutorial, but I'm just not working the way I would expect it to. I have a users table in my database with two users in it, one called admin and one called test, where the users table has a field is_admin. This field in the table is for a character and is nullable, so I put a number 1 in the is_admin field where the admin is and the non-admin user is just left Null. When I login as the admin user, it works as expected. However, when I login as the non-admin user, I get an error "These credentials do not match." But was expecting a 403 Forbidden. Not what I'm expecting. I'm sure I'm missing something.

avatar

The error message you mentioned These credentials do not match is due to email/password missmatch and not due to any 403 error or permission check.

Make sure you have correct login details seeded

avatar

Negative, thanks for the reply. If I remove canAccessPanel function the login works as expected.

avatar

Oh... Hmm, that's a weird one. I guess filament handles that differently and produces a safe way out (even if it's not fully clear why it was there).

Anyway, in that case - you need to do custom login to prevent people from accessing panels like this. Then you will be able to handle cases as this yourself.

avatar

This is how filament works in this case. If user doesn't have access he gets validation error These credentials do not match. But if user is already authenticated and then tries to access panel he should get 403 error.

avatar

@Nerijus this makes the most sense. Seems like a scenario I can test too, thanks. To your knowledge is this behaviour documented in the Filament documentation?

avatar
Maulik Bharatbhai Bhatt

Hello, thank you for a lucrative tutorial on filament, it will be of great help if you would include a small tutorial on how to extract filament admin panel from an existing laravel project (let's say built from quickadminpanel).

avatar

Hi, the tutorial you suggested is not possible to be made, because projects can vary in complexity.

For example, to replace a simple CRUD project with no custom logic - all you have to do is install filament in the same project (or a new one, but copy migrations/models) and then run resource generation. That should do it for the most part.

Now, if your project uses extensive features or includes Vue/Livewire custom things - you can't just do that and you will have to adapt each page to Filament. This becomes tricky to display in a tutorial as we can't know what people might get stuck with. Some will get stuck with complex calculations, others will have issues with queue management and inline resource creation. So all of this really depends on the project and is too individual, sorry

avatar

Who use Laravel 11, run composer require filament/filament:"^3.2.57-stable" -W

avatar

hi Povilas, why dont you put Like/Clap button on every article ? i need to click it

πŸ‘ 1