What is the best practice when dealing with form data in a role based web application?

I'm using Laravel, Vuejs and Inertiajs to create a fintech web application. I am using role based authorization in my system. Now I came to a scenario where I need to deal with a critical form submission where one or more than one field is dependable on role. For example: In my application there is a withdrawal page where customers can withdraw their balance in their bank. Now when logged in as admin there should be a Merchant select column to select the merchant but when logged in as merchant the merchant select column should not be displayed. What is the best practices to handle this type of scenario as well as the form securely?

Thanks in advanced.

vincent15000

1 year ago

Level 63

I would create a configuration file with the fields to display for each role.

Then in the form, I would add the disabled attribute to each field with a condition.

For example :

<input type="text" name="name" id="name" :disabled="! fieldsToDisplay.contains('name')" />

Assuming that fieldsToDisplay is an array declared in a configuration file.

return [
		'admin' => [
				'name',
				'merchant',
				...
		],
		'merchant' => [
				'name',
				...
		],
];

UPDATED => Sorry, disabling a field doesn't remove it from the form. You need to use v-if instead of disabled.

<input type="text" name="name" id="name" v-if="fieldsToDisplay.contains('name')" />

1 like

martinbean

1 year ago

Level 80

@pranaycb You’ll need to handle this both client-side and server-side.

Unfortunately, Inertia is client-side, so you’ll need to pass the role to Inertia (i.e. via the HandleInertiaRequests middleware):

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'role' => fn () => optional($request->user())->role,
    ]);
}

Then in your form component, you can pull the role from the page props and show or hide the field accordingly:

<template>
    <form v-on:submit.prevent="withdrawBalance">
        <template v-if="$page.props.role === 'admin'">
            <!-- Merchant field -->
        </template>
        <!-- Other fields -->
    </form>
</template>

Then server-side, you should validate this merchant field is only included when you expect it to be:

class CreateWithdrawlRequest extends FormRequest
{
    public function rules(): array
    {
        $rules = [
            // Rules for common fields...
        ];

        $rules['merchant'] = match ($this->user()->role) {
            'admin' => ['bail', 'required', 'integer', 'exists:merchants,id'],
            default => ['missing'],
        };

        return $rules;
    }
}

2 likes

vincent15000

1 year ago

Level 63

@martinbean @pranaycb I would ever create the rules dynamically from a configuration file.

Please or to participate in this conversation.