Filament•16mo ago

Question about security and registering new users

Hi there. My question is this: As far as I understand it, all Filament-Pages and -Resources are behind the "auth"->guardian and the canAccessFilament-function is called when a page or resource is accessed. Right? Right now I wanna do 2 things: 1.) I wanna add an "active"-column to my user-table. Is it enough to add return $this->active to said function to block all non-active users from entering? (Filament IS my frontend, so there is nothing else to be accessed.) If anyone has an idea on how to do this non-Filament-related: Please share! I could only find solutiuons that use Breeze as a package, but not Filament. 2.) On my old frontend, I have a system in place to register new users, where an existing user enters an e-mailadress which then receives a token, that is beeing used as a parameter in a url. How can I adapt that to filament? Like making the page accessable even without logging in and checking the parameter?

Solution:

ha! got it! @justjosef & @pboivin - you can actually use Filament inside a "Out-of-Filement"-Livewire-Component. You just have to use Filament::registerViteTheme('resources/css/filament.css'); (or registerTheme if you are not using Vite) inside the mount()-function of your component. 🙂 That thing works like a charm and purrs like a nice little kitty: ``` <?php...

Jump to solution

32 Replies

Husky110OP•16mo ago

@pboivin (if anyone else sees the ping - I asked first if I may. 🙂 )

Patrick Boivin•16mo ago

1) canAccessFilament() is called in a middleware, so I think yes, it's a good place to do a check on $user->active I'm not entirely sure about 2)... can you share a bit more context? why does a user have to register if they are already an existing user? Are you manually creating the accounts, then sending a registration URL via email for them to confirm?

Husky110OP•16mo ago

You nailed it. Not me, but any Adminuser. On the URL they enter their name and a password and then they can log in. 🙂 No outside-person can register, but the account has to be created.

Patrick Boivin•16mo ago

Ok, cool So you're wondering how to handle this page? Whatever the URL in the email with the token points to?

Husky110OP•16mo ago

correct cause how I understand it, normal Filament-Pages go through certain guards, but those have to be circumvented in that case

Patrick Boivin•16mo ago

Yes, makes sense. Even custom pages have the basic requirement to be authenticated. But I think one option for you would be to create a page outside of Filament just for that. You could reuse the Filament Blade layout to make it look similar. Or use a custom layout with Filament UI components.

josef•16mo ago

Or write a guard that uses the token instead of regular auth

Husky110OP•16mo ago

like copying the HTML of it or is there a more PHP-Style approach to that? that in addition to the custom-page is one way, but when I write a custom page anyhow, I could do that in a plain old controller aswell... 😄

Patrick Boivin•16mo ago

Depends... I often do copy markup from Filament for my custom pages, it gives me more flexibility (e.g. turn a Livewire thing into an Alpine.js thing), but it's up to you. In this case I was thinking of using a standalone Form Builder. You can totally use a plain old controller 👌

Husky110OP•16mo ago

hmm... okay... so like including the filament-views in another view might be an option there...

Patrick Boivin•16mo ago

Either use the Blade components directly (e.g <x-filament::button> or copy the markup. I do both.

josef•16mo ago

@husky110 If you have your basic app layout, you can extend it and use filament components. This is e.g. what I do to get a simple page similar to the login card:

josef•16mo ago

Then I create the page itself and extend this layout You can even copy over the simple-layout 1:1 and just let it extend your app layout instead of the filament base layout Or extend SimplePage and set $layout to your layout

Husky110OP•16mo ago

Sorry for replying so late - ben struck with a cold... I tried what you suggested, but I get thrown back to the default filament login-page whenever I try to access the page. Did I do something wrong, or is actually the suggested middleware (see above) the problem? Here is what I have so far:

Husky110OP•16mo ago

Husky110OP•16mo ago

Okay - the canAccessFilament-function is not the problem... Eliminated that so far. Tryed that by extending the Page-Class, but there seems to be something inside Filament that blocks it... Or did I get your answer wrong?

Patrick Boivin•16mo ago

What is blocking from Filament? Are you getting an error?

Husky110OP•16mo ago

Nope - I'm just getting thrown to the login-page as soon as I open the URL.

Patrick Boivin•16mo ago

Makes sense, no? Filament pages require authentication. Aren't you trying to create a page outside of Filament?

Husky110OP•16mo ago

Yeah - but with Josefs answer I thought like I could extend the page-class and do it like that... 😅 Oh wait - I think I know where I went wrong there! Gimme some minutes...

josef•16mo ago

Create it as a Livewire Component, outtside the Filament/Pages namespace

Husky110OP•16mo ago

Okay - I got a partial success... I did make a livewire-component and have it extend the login card like this:

josef•16mo ago

Those are protected by the Filament-configured middlewares

Husky110OP•16mo ago

Husky110OP•16mo ago

But the card does not respect the normal app-styles... f.e. I've changed the normal orange to blue, but it's orange again...

josef•16mo ago

You have to configure tailwind for pages outside filament to include those styles see the docs on how to use forms outside the panel

Husky110OP•16mo ago

there are docs for that? sorry for seeming a bit dumb - still nursing my cold... I configured tailwind like stated in the docs.

Husky110OP•16mo ago

tailwind looks like this - I think I'm missing something, but can't see what exactly.

josef•16mo ago

And your app.css? Is it included in the base layout?

Husky110OP•16mo ago

oooooh - i think that might be the problem! I'm using the base-filament layout... hmmm - the regular admin-panel uses no app.css, but a flament.css - whereas the base-layout uses an app.css what in the name of...? ah okay - outside it uses the regular app.css provided by filament, but inside (when logged in) it uses my build filament.css. there is the problem... guess Imma have to set up my own layout there and can't just reuse the one that is used inside...

Solution

Husky110•16mo ago

<?php

namespace App\Http\Livewire;

use Filament\Facades\Filament;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Support\Facades\Vite;
use Livewire\Component;

class Register extends Component implements HasForms
{
    use InteractsWithForms;

    public string $guid;

    public function mount($guid)
    {
        $this->guid = $guid;
        Filament::registerViteTheme('resources/css/filament.css');
        $this->form->fill();
    }

    public function submit($data)
    {
        dd($data);
    }

    protected function getFormSchema(): array
    {
        return [
          TextInput::make('test')
            ->label('test'),
        ];
    }

    public function render()
    {
        return view('components.blossom-components.general.formcomponents.standalone-form', ['label' => 'Register'])
            ->layout('filament::components.layouts.card', ['title' => 'Register']);
    }
}

<?php

namespace App\Http\Livewire;

use Filament\Facades\Filament;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Support\Facades\Vite;
use Livewire\Component;

class Register extends Component implements HasForms
{
    use InteractsWithForms;

    public string $guid;

    public function mount($guid)
    {
        $this->guid = $guid;
        Filament::registerViteTheme('resources/css/filament.css');
        $this->form->fill();
    }

    public function submit($data)
    {
        dd($data);
    }

    protected function getFormSchema(): array
    {
        return [
          TextInput::make('test')
            ->label('test'),
        ];
    }

    public function render()
    {
        return view('components.blossom-components.general.formcomponents.standalone-form', ['label' => 'Register'])
            ->layout('filament::components.layouts.card', ['title' => 'Register']);
    }
}

Husky110OP•16mo ago

thanks for nudging me in the right direction guys 🙂

Gaming

Programming

Question about security and registering new users