Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Cushty's avatar

Inertia, React dev tools show auth user

Hi quick question, im using inertia with React and I noticed that all of the user info is shown in React dev tools as props, is this safe, I can see email, id, etc do you need to manually hide sensitive info? If I check a page made by Laravel the same is shown. so not sure what is the right? Thanks

0 likes
3 replies
LaryAI's avatar
Level 58

When using Inertia.js with React, it's common to pass data from the server to the client as props. This includes user information, which can be necessary for the client to render the UI accordingly. However, it's important to be cautious about what information you expose to the client-side, especially when it comes to sensitive data.

By default, Inertia will send all the data you provide to it as props, which will then be accessible in the React DevTools. This is not inherently unsafe, as the data is being sent to the authenticated user's browser. However, it's a good practice to limit the exposure of sensitive information.

Here's what you can do to hide sensitive information:

  1. Only pass necessary data to the client. For example, you might not need to send the user's email address to the client if it's not being displayed or used there.

  2. Use a transformation layer to filter out sensitive attributes before sending data to the client. You can do this in your controller or by using API Resources if you're working with an API.

Here's an example of how you might filter out sensitive information in a Laravel controller when using Inertia:

public function index()
{
    $user = auth()->user();

    // Only select the necessary fields
    $safeUserData = [
        'id' => $user->id,
        'name' => $user->name,
        // Add any other fields that are safe and necessary for the client
    ];

    return Inertia::render('Dashboard', [
        'user' => $safeUserData,
    ]);
}

In this example, we're creating an array $safeUserData that only includes the user's id and name, which might be the only pieces of information the client-side actually needs.

Remember that even non-sensitive information can become sensitive in certain contexts, so always consider the implications of exposing any data to the client. If you're unsure whether a piece of data is sensitive, it's safer to err on the side of caution and not send it to the client unless it's necessary.

Cushty's avatar

Ah I see its only for the authenticated user, but the example above does not take into consideration that the user object is passed automatically from Inertia on the page. Is there a way to hind certain fields that you never want passed? Thanks

gych's avatar

Its added to the share method in the HandleInertiaRequests middleware, which makes it available as shared prop. You can change that to your preferences.

Please or to participate in this conversation.