Right way to handle permissions based component rendering in react app - javascript

My app renders components and layout based on user permissions. Permissions are created dynamically. (permissions are basically what are the modules and actions that a user can do.
e.g: The user can delete records, update records, can view settings tab, etc
Permission Keys are coming from the backend. when the user hit the login API.
Should I use context to pass through the component tree?
What if the page refreshes? Then I need to call the API again to get permissions? should I need to store it in the session/local but a user can update and change the data in session/local storage also it is not secure. What should I do?

Related

How to store REST api payload for user from frontend?

I would like to store the payload of REST API calls made by a user in frontend and be able to make the calls to recreate what the user did (like a replay button)
I have the following scenario:
User opens website.
User picks a product and configures it.
How can I store the REST API calls payload from frontend: Is there a framework that does that? Which database should I use?
You can implements it by state management.
I think the user data shoud be stored firstly in some state in front-end by using a Redux library for example.
Finally you can send the data for a data base (MongoDb for example) to persist the data stored in Redux state.
So, in terms of Data base use, that depends on if you need that data, even when the user close the browser.

Common ways to store fetched data for a React app?

I'm working on a React web app where a user can create an account, which would contain the user's contact info (phone, email, address). When a user signs in, their account info should be accessible to them.
How is this information typically acquired/stored on the client side in React? Here's what I'm thinking:
Once the user logs in, the application fetches the user's account
info (using the fetch API, for instance)
That account info can then be saved
in the app's state, perhaps using Redux.
Is it up to the app to fetch the account info after login, or is it up to the server to automatically send that data to the client? And is Redux an appropriate tool for storing this sort of data, or is this something that localStorage is supposed to handle?
The data fetching happens on the client side (React). You generally keep track if the user signed in or not in your local state or redux. Let's say you're using firebase as your backend service then the method below (generally should be placed inside the component which requires user authentication info ) automatically keeps track of auth status change.
firebase.auth().onAuthStateChanged(function(user) {
if (user) { // you can pass this info to local state or redux
// User is signed in.
} else {
// No user is signed in.
}
});
https://firebase.google.com/docs/auth/web/manage-users
One way to tackle your case is that, once you get the user info from the backend, you store that in the local state or send it to action creator to store in redux.
Resource: https://blog.logrocket.com/getting-started-react-redux-firebase/
Is it up to the app to fetch the account info after login, or is it up to the server to automatically send that data to the client?
Yes the app should fetch this after logging in.
is Redux an appropriate tool for storing this sort of data, or is this something that localStorage is supposed to handle?
Yes definitely Redux instead of localStorage, or just use react's global state management.

User Portal for Specific Clients

I need some back end assistance here.
We're building a portal and upon login the user will be navigated to the appropriate landing page where they may find certain files they have subscribed for.
We've been looking at React, Node, Mongo, and Keystone to build this out.
I'm curious to see how one would be able to manually add users and passwords in keystone that would allow them to login initially and be directed to an appropriate landing page.
Thanks!
you could manage this in the state of your application. I can't speak on Keystone but think of it like this.
Keystone has your auth information for users which is tied to a users document in your mongo database. Once a user is logged in / auth'd you can pull the user data in via an api request and then route based on the response at the app level.
We do this currently with redux, react, and a postgres database to route users to pages based on the company they are assigned to.
You can create the user in your model, then you need to implement a custom login page, not the one that keystone provides by default since that automatically will redirect to you to the admin panel.
I think a way of achieve this is implement a custom login page, then in your controller, if the login is successful you can redirect that user to a route defined in the user model.

How to create admin user or super user in React-Redux application?

I currently have a React-Redux Application.
I want to create an admin user in React-Redux.
If I create a state with userAdmin true or false will users be able to access the state and change this value? That is to say, is this a secure method of creating such access?
I am using webpack to create a bundle.js, and have a node.js server for serving data that is secured using JWTs.
Furthermore, is there a standard or semi-standard pattern for creating an admin user in a react-redux application?
My thoughts on this are:
Create a separate app for admin user management.
Create a state for the admin user and if that state is true then query the serverAPI for any admin action. But show the admin capability only if that state is true eg. delete other users, view details of users, but do not serve that data without an authorised API call. Then if the state is changed surreptitiously the user can only see the actions but is not able to access the API without the required authorisation.
tldr: your thoughts are correct
You are right in the assumption that the user could manipulate the state of the client side app to escalate her privileges. However, that shouldn't give any useful benefits if your architecture is done right.
Data that only admins should have access to shouldn't be transmitted to a regular user in the first place and changes that only admins should be able to do should only be accepted with JWTs that identify admin users.
Right management is something that has to happen server side. The client app just reflects that in the UI.

NodeJS/ ReactJS: Displaying different UI for different users

This questions stems from a confusions between how nodejs routes and requests interact and pass context into reactjs.
My use case:
User A is an Admin.
User B is not an Admin
When user A gets routed to a page with a react component, I want user A to have a different UI (perhaps access to an Admin Panel).
When user B gets routed to a page with the same react component, I want user B to not have access to any UI that is for Admins.
What is the best way for reactjs and nodejs routes to communicate that User A gets special ui, and User B does not.
What I looked into that doesn't seem to work:
LocalStorage - there is a disconnect between nodejs server side local storage and client side storage.
SessionStorage - same as above
How is this done correctly with nodejs and reactjs. An example would be awesome!

Categories