Authorization and Inertia

I just started watching the “Mastering Permissions in Laravel” series, and in the first episode they recommend replacing my single role column (an ENUM on the users table) with a proper many‑to‑many setup: a roles table and a role_user pivot table. That makes sense—using an ENUM is brittle if you ever need to introduce new roles—but now I’m stuck on how to surface those roles in my React/Inertia front‑end.

Previously, I was grabbing the authenticated user via:

const { auth } = usePage().props and then reading auth.user.role directly to show or hide buttons. Since I’ve moved my roles into a pivot, auth.user.role no longer exists. How can I serialize the user’s roles in my HandleInertiaRequests middleware so that I can still do role checks in my React components?

LaryAI

1 year ago

Level 58

To handle roles in a many-to-many relationship and make them available in your React/Inertia front-end, you need to modify your HandleInertiaRequests middleware to include the roles when serializing the authenticated user. Here's how you can do it:

Define the Relationship in Your User Model:

First, ensure that your User model has a relationship defined for roles. This is typically a belongsToMany relationship.
```
// In User.php model
public function roles()
{
    return $this->belongsToMany(Role::class);
}
```

Modify the HandleInertiaRequests Middleware:

You need to modify the share method in your HandleInertiaRequests middleware to include the roles of the authenticated user. This will make the roles available in your Inertia pages.

// In app/Http/Middleware/HandleInertiaRequests.php
use Illuminate\Support\Facades\Auth;

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => function () use ($request) {
                if ($user = $request->user()) {
                    return [
                        'id' => $user->id,
                        'name' => $user->name,
                        'roles' => $user->roles->pluck('name'), // Assuming 'name' is the column for role names
                    ];
                }
            },
        ],
    ]);
}

In this example, pluck('name') is used to get an array of role names. Adjust this according to your roles table structure.

Access Roles in Your React Component:

Now, in your React components, you can access the roles like this:

import { usePage } from '@inertiajs/react';

const MyComponent = () => {
    const { auth } = usePage().props;

    // Check if the user has a specific role
    const hasRole = (role) => auth.user.roles.includes(role);

    return (
        <div>
            {hasRole('admin') && <button>Admin Button</button>}
            {hasRole('editor') && <button>Editor Button</button>}
        </div>
    );
};

export default MyComponent;

This setup allows you to easily check for roles in your React components and conditionally render UI elements based on the user's roles. Adjust the role names and logic as per your application's requirements.