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
Related
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.
Background Information:
I have been following admin-on-rest example to create my custom Admin app. I created a custom component that is pretty much the same as https://github.com/marmelab/admin-on-rest-demo/blob/master/src/Login.js
However I want to provide the functionality for users to signup within the application, so I added a Sign Up button, that we clicked will redirect to domain.com/signup
Problem:
After reading the Authentication docs and trying it out myself, I found that on each route change the event AUTH_CHECK is evaluated. However, in input params I get as resource something I already defined in my <Admin> component. Basically, I need a way to "whitelist" a path and allow users to navigate to that path without them being authenticated.
Questions:
Is there a way to create a custom signup page and whitelist the path "/signup" so that authentication is not checked?
Is this something I need to implement with custom React Router routes, or is it something at the authClient level?
Has anyone tried to add a new signup page, and how did you make it work?
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?
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?