in my app.blade i was importing @vite(['resources/css/app.css', 'resources/js/app.js']) and using @livewireScripts wish was causing the problem , if you are using @livewireScripts you dont need to import app.js , just import @vite('resources/css/app.css''])

✅ Repo in GitLab

( with some variants ) 👉🏻 Here

When user goes to their roles page and go to a specific role panel, I will put the hidden roleId on forms, so I can check in authorization, if this user have this role, and if this role has the permission needed for the action. How is it? Is it a bad practice?

Don't do this. Anyone could modify the hidden input in the page source and spoof a different role.

You don't need to add any hidden inputs. Your backend already knows who the user is, and you can use Laravel's built-in authorization features. I strongly recommend you read the documentation first:

https://laravel.com/docs/13.x/authorization

But I can give you a quick rundown.

Below is a simple policy class for a Post model. It has just one authorization check: can a user edit a post. Editing is allowed if the user is a super-admin or the original author of the post.

class PostPolicy {
    public function edit(User $user, Post $post): bool {
        if ($user->role === 'super-admin')
			return true;
		 
		return $user->id === $post->user_id;
    }
}

Here's how you register the policy on the model:

use Illuminate\Database\Eloquent\Attributes\UsePolicy;

#[UsePolicy(PostPolicy::class)]
class Post extends Model {
    ...
}

Once you have the policy registered, you can do authorization checks in code, middleware, and Blade templates. Some examples:

// Authorization check in middleware:
Route::patch('/posts/{post}', [PostController::class, 'update'])
	->can('edit', 'post')
	->name('posts.update');
	
// Authorization check in a controller:
if ($request->user()->can('edit', $post)) {
	...
}

// Authorization check in Blade:
@can('update', $post)
	...
@endcan

The docs have all the details.