I'm looking for a secure way to render React components based on a users permissions. I know I can use props like props.userStore.isAdmin to conditionally render a component:
{
this.props.userStore.isAdmin ? <AdminDashboard /> : null
}
but could a user modify those props to gain access to an admin dashboard?
I have the controller on the backend (rails) secured with the pundit gem, so the user would not be able to actually use the admin dashboard to do damage, but I'd still rather them not be able to access it all. Is this possible with React?
Related
I have few components in my app, one of them is admin component (or admin page with data). What is the most simple way for protecting that component with password. I want to require password when you click on component, and if passwords match, just render the component. (I don't need authentication services, just hard-coded password).
Found best way to do this, it is creating modal with portal and render it in desired component
I'd like to give users the option to create accounts and login but I don't want to force them to create an account to use the site I'm building. Is this possible with the Amplify React withAuthenticator HOC?
Yes, this is possible. Only wrap the authentication related pages / components with withAuthenticator that way it only shows up when you navigate to those pages (assuming you're code-splitting pages). You can then probably associate the page to the corresponding authentication view by changing the configuration but I think a better way might be to just use the authenticator components like <Authenticator authState="signUp" />
I have two components. One component that the user must use to login and one component to show some content.
I was thinking of implementing my application by having one component that has some react state that tells it to render either the login component or the other one.
If I do this, would it be possible for on the client-side to manually set the state so that the login screen is bypassed and the content is shown?
EDIT: Added some example code.
render () {
if (this.state.authorized) {
return <Content />
} else {
return <Login />
}
}
With this code in mind, given that only the <Login /> component is capable of setting the authorized state to true, is it possible for the client-side to simply get around this by manually setting the state somehow? For example through the chrome react dev tools or something?
Client-side JavaScript isn't secure by design, i.e. user has full control over the script that runs in user's browser. Considering that a user has enough access rights locally, the code always can be read and modified. Security measures that are applicable to client-side code only make this process more complicated.
This isn't unrelated to security, as long as the access to sensitive data is controlled by the backend.
It's certainly possible to change component state and show a component that wasn't supposed to be shown. For instance, React dev tools can be used for this demo to set authorized to true:
A user basically ruins own experience with the application. A blank component will be shown without sensitive data because a user skipped backend authentication process.
I'm new into ReactJS - I'm trying to implement login system with PHP.
I want to have different type of users - some of them should have access only to some portion of app.
Is there any way to prevent those users from accessing certain routes as /admin ?
What I want is not something as simple function that check's user accessible routes and redirecting -> I would like to HIDE/REMOVE components that user has no access to, so he would download the app containing only /login /info, so he won't even download /admin component in app (won't be able to see the code for it)
You can use Higher-Order Components.
With HOC you can wrap other components.. if user have permissions you can return wrapped component, otherwise return null or redirect user to another route.
I'm trying to come up with a way to update routes in react-router after a user logs in and I know what roles the user has.
I was hoping that there would be an API where I could add appropriate routes after the user logs in but no luck there.
I'm currently thinking that I could use the lazy loading so that I originally load the root Route which has a child for each role, then in the definition of those children could use getChildRoutes to test for the presence of the required role before lazy loading the allowed routes.
Has anyone implemented something like this and have a working/better solution?