I have created a server-less React App with Firebase for Hosting, Database and User-Authentication. Now let us assume I have three roles : student, teacher and (you guessed it) admin. I am currently doing this to show components specific to roles : /* Get user data from the database which has a 'type' field with one of the above values, then in a child render function : */ {this.props.userData.type === 'student' && //Show components for students } {this.props.userData.type === 'teacher' && //Show components for teacher } Now the way I see it, the user could open Chrome Dev Tools and use React Dev Tools to change the prop value to one of the others. I came across using the 'Can' component by defining roles and permissions but that essentially does the same thing and the user can alter the prop passed to the 'Can' component to access content of another role. Solutions I have considered : Use obscure values for the 'type' field like random numbers or words instead of the obvious teacher/student. Store list of uids under each role in database and check if current uid exists under the list and pass some prop hidden in some unsuspecting object or under a random name, something of that sort. Create entirely different routes and set redirects so that the user doesn't have enough time to change the props or state since the component which redirects is no longer mounted. Questions : Is there a better way to structure my app so that I won't have to use state or props to identify user type? Am I on the right path or is there something so obvious that I'm missing? Edit : I understand that there is nothing I can do to stop the user from editing the state or props of the components. Answers suggest that I should validate user type on the server to check if the user can perform an action. Is there a way I can achieve this on my current setup (see first line)? Or is it necessary to have a server.js ?

Reputation: 340

Handling User Roles

I have created a server-less React App with Firebase for Hosting, Database and User-Authentication.

Now let us assume I have three roles : student, teacher and (you guessed it) admin.

I am currently doing this to show components specific to roles :

/*
Get user data from the database which has a 'type' field with one of the above values, 
then in a child render function :
*/

{this.props.userData.type === 'student' &&
    //Show components for students
}
{this.props.userData.type === 'teacher' &&
    //Show components for teacher
}

Now the way I see it, the user could open Chrome Dev Tools and use React Dev Tools to change the prop value to one of the others.

I came across using the 'Can' component by defining roles and permissions but that essentially does the same thing and the user can alter the prop passed to the 'Can' component to access content of another role.

Solutions I have considered :

Use obscure values for the 'type' field like random numbers or words instead of the obvious teacher/student.
Store list of uids under each role in database and check if current uid exists under the list and pass some prop hidden in some unsuspecting object or under a random name, something of that sort.
Create entirely different routes and set redirects so that the user doesn't have enough time to change the props or state since the component which redirects is no longer mounted.

Questions :

Is there a better way to structure my app so that I won't have to use state or props to identify user type?
Am I on the right path or is there something so obvious that I'm missing?

Edit :

I understand that there is nothing I can do to stop the user from editing the state or props of the components. Answers suggest that I should validate user type on the server to check if the user can perform an action. Is there a way I can achieve this on my current setup (see first line)? Or is it necessary to have a server.js?

Upvotes: 0

Answers (2)

Raed

Reputation: 698

Roles should not matter in the browser beyond aesthetic reasons (show/hide button etc). Your access-control should be done in the backed with functions and rules.

Any malicious user can edit HTML, or send an HTTP request to pretend that they have a role. However, on the backend you should check if the user-id actually has that role or not and reject running code you're not supposed to.

Upvotes: 1

Michal Szorád

Reputation: 215

The visitor will always be able to somehow "hack" your frontend application (eg. by changing the props in React Dev Tools or in any other way).

It is completely okay for web to work like this, as all your main logic should be located on the backend, where you can actually prevent some actions to happen.

A very similar question has been asked here How to prevent html/JavaScript code modification

Upvotes: 1

Handling User Roles

Answers (2)

Related Questions