ReactJS display components based on authentication

Question

I have a ReactJS front-end app mixed with a Laravel back-end app.

I'm facing a problem with auth. I'm authenticating the user with Laravel auth but I have some trouble on displaying components. I have some posts (/posts/1 or /posts/2 etc...) and when the user visits the page, he can modify the post if he is the author.

I'm storing as a state the id of the user and checking like this :

if(this.props.user.id === this.props.posts.id_user) ...

But this is really unsafe since the state can be modified by anyone with the dev tool. By modifying the state, the user could modify a post even if he is not the author because all displayed components managing the edit would be accessible for him.

Is there a "magic" trick to prevent it?

There's really no magic to it, sadly. You have to verify in the back end that the user that is trying to modify some resource has the right to do it. — Tholle
– Tholle, Commented Feb 26, 2019 at 1:11
So he can modify the display as he wants by just changing the state but still I need to do a check on back end that's right? — Zeyukan Ich'
– Zeyukan Ich', Commented Feb 26, 2019 at 1:25
Yes, that's right. It's not an issue if the user messes with their own data in the browser, but you need to guard against users modifying resources they don't have permission to in the back end. — Tholle
– Tholle, Commented Feb 26, 2019 at 1:27

Sergio Flores · Accepted Answer · 2019-02-26 01:29:09Z

2

First of all, the state you are talking about is the app state, the one that resides in the browser, if the user change that state, the effects will only be affected by the user itself, in his browser, theoretically, is not changing the data or state in your backend/database, unless you don't implement the same validation you are talking about.

If you do if(this.props.user.id === this.props.posts.id_user) in your front, you absolutely have to do it in your back, that is the place where the real validation counts, that's where the user can't change the user id, because, for example, you will be using the one in the user session that is stored in cookies or a Redis server.

Always validate in the backend

answered Feb 26, 2019 at 1:29

Sergio Flores

5,4475 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS display components based on authentication

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related