NodeJS/ ReactJS: Displaying different UI for different users - javascript

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!

Related

Right way to handle permissions based component rendering in react app

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?

How to prevent unauthenticated user see my admin privileged layout in React?

This is a hypothetical question, so let's say you've got a full-stack web application and there is admin-dashboard in the front-end side.
I, as /NOT/ admin, try to access a route such as /api/admin/dashboard
In the React app, some authentication logic can be done such as if user.isAdmin allow to dashboard else navigate back to homepage
In the back-end side, let's say Node.js, you just res.send('not authorized')
So what I thought is I'm on the client side right, I can take minified js which is derived from npm build of React app, and I don't know but somehow I can revert it back to React App folder structure then there is all the util files, components, hooks and everything.
That means I can manipulate authentication logic like allow everyone to see dashboard and also manipulate the fetching logic that would be if error from fetching, instead of return 'not loaded', compeletely remove fetching logic to the backend and just see me dashboard
So, to my understanding, after some effort, maybe not data and functionality that requires me to speak to backend, i can see dashboard or even all the layout, right?
My question is, can we prevent this to happen in some way?
Or do I need to?
First, As you have use role based conditional dashboard render in frontend, When a non admin user inspect the app and figure out the admin dashboard route, when ever the person visit the page, if any api is giving 401 unauthorized status, then logout or redirect that person to actual page. For a millisecond he will able to see the page.
or
Second, Send your react routing as json from backend api. Backend is way more secure. It will send conditional role base route to react. So, no user can figure out actual route path from frontend any more. So, It is more secure.

Angular2 Bootstraping two application one ofter other in same page

I am working on a project in angular2. It has two part, first part is login and other is dashboard. I want to develop login part in one app and the dashboard part in other app.
The problem is, I cant not load dashboard app after login app in same page.
I found a link in which they Bootstrap two application in same page, But I want to load one app at the time in same page.
The link in which they Bootstrap two app in same page is:
Bootstrapping multiple Angular 2 applications on the same page
Main purpose for doing so: Security
Suppose the user wants to log in, I want the Dashboard app get bootstrapped by Angular2 separately.
Why I'm not using separate components is because I don't want to expose other components that are loaded along side the Login component.
I see two main options here (I'm sure there are others):
Option 1: Separate apps for login and dashboard
You could make your login and dashboard app each have their own urls, e.g. https://myhost:1234/login and https://myhost:1234/dash.
When users try to go to /dash, the server checks if they are logged in, and redirects to /login if they are not. When users log in through /login, the server sets up the session, then redirects to /dash.
Option 2:
Use a guard on the router, that prevents the user from navigating to dashboard unless they are logged in.
See the TempHire Sample Application for an example using guards. In this example, the guard performs an ajax call to the server, and uses the response to determine whether to proceed. (The response also brings the Breeze metadata to the client, but that's because it's a Breeze app.)

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.

React + Redux - Render app based on access level

So I have built an API and now i am building a react app to go with it. The app will have different access level e.g user and admin. The problem i have at the moment is that The whole react app is rendered and sent to the client. So even though the routes are protected on the server. A user could potentially access the admin intended JavaScript on the client.
I'm trying to figure out how i can have a user log in and from that decide what to JavaScript to serve. After 2 days looking into this I am still stuck. A lot of articles seem to suggest making the App isomorphic (render the JS server side) but is there no other way of doing this. The solution we are leaning towards at the moment is having different builds. A build that just contains the JavaScript for the login. Then after auth we use that to decide if to load the user build or the admin build. This is going to mean repetition and i dont really like this method.. but its the only way i can think of at the moment.
My question is.. what is the best way to handle this in react? Also can react load components on the fly? so we could have the app just contain the login JavaScript and when Auth passes we send details on what components the user should have access to and then just load theses

Categories