Security

Authentication

One of the benefits of using Inertia is that you don't need a special authentication system to connect to your data provider (API), such as OAuth. Also, since your data is provided via your controllers, and housed on the same domain as your JavaScript components, you don't have to worry about setting up CORS.

Rather, with Inertia you can simply use whatever authentication system your server-side framework ships with. Typically this will be a session based auth system.

Authorization

With Inertia, authorization is best handled server-side in your policies. However, you may be wondering how to check against your policies from within your JavaScript page components, since you won't have access to your server-side helpers. The simplest approach here is to pass your authorization checks as props to your page components.

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'can' => [
                'create_user' => Auth::user()->can('users.create'),
            ],
            'users' => User::all()->map(function ($user) {
                return [
                    'first_name' => $user->first_name,
                    'last_name' => $user->last_name,
                    'email' => $user->email,
                    'can' => [
                        'edit_user' => Auth::user()->can('users.edit', $user),
                    ]
                ];
            }),
        ]);
    }
}

CSRF protection

If your web framework includes cross-site request forgery (CSRF) protection, you'll need to ensure that each Inertia requests includes the necessary token for POST, PUT, PATCH and DELETE requests.

One solution is to include the CSRF token as a prop on every response. You can then use the token when making Inertia requests.

this.$inertia.post('/users', {
  name: this.name,
  email: this.email,
  _token: this.$page.csrf_token,
})

You can even use the shared data functionality to automatically include the csrf_token with each response.

However, a better approach is to use the CSRF functionality already built into axios for this. Axios is the HTTP library that Inertia uses under the hood.

Axios automatically checks for the existence of an XSRF-TOKEN cookie. If it's present, it will then include the token in an X-XSRF-TOKEN header for any requests it makes.

The easiest way to implement this is using server-side middleware. Simply include the XSRF-TOKEN cookie on each response, and then verify the token using the X-XSRF-TOKEN header sent in the requests from axios.

Some frameworks, such as Laravel, do this automatically, meaning there is no configuration required.