React + Redux - Render app based on access level - javascript

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

Related

React Client-/Server-Side Rendering Security Issue, Hide/Protect Route

i got a question about the rendering behaviour of react. Please correct me if I'm wrong, im new to React and Web Development.
Afaik the default rendering of a react SPA happens on the client side, right?
So this means the whole JSX code in the src directory will be downloaded on the first visit of the page (see image of the Chrome WebDeveloper Tools Source Tab), right?
Let's assume i would develop an admin area where only authorized users should have access to, e.g. through JWT, the JS-Code still contains information about the admin area, even if it's not rendered, a guy with the corresponding knowledge could get access to the area because all information about the admin area is already downloaded to the client computer, right?
Sure i can protect sensitive data through the api and JWT Token, but what about if i don't want the client to know about the admin area content? Is there a best practice for some kind of this case, e.g. a mix of client-side (default user content) and server-side (admin area content) rendering? What would be the best way to do this? What are the advantages and disatvantages of client-/ or server-side rendering?
Thank you &&
please be kind, as already mentioned i'm knew to React and WebDev &&
sorry for my english, i try to improve it continuously.
Afaik the default rendering of a react SPA happens on the client side, right?
Not necessarily. It depends on how you set up the project.
So this means the whole JSX code in the src directory will be downloaded on the first visit of the page
Not necessarily. e.g. see Webpack code splitting.
Sure i can protect sensitive data through the api and JWT Token, but what about if i don't want the client to know about the admin area content?
Don't put the content in the app. Keep it in the data that is protected by your JWT.
Or make your customer facing application and your admin application different apps in the first place.
What are the advantages and disatvantages of client-/ or server-side rendering?
Server-side rendering is faster on initial load, works when JS fails, and is better food for search engines.
Client-side rendering is faster on subsequent page loads.
It's not really a factor in security.

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.

Dynamically building static websites

I'm building a simple website generator using React, Express/Node and MongoDB.
I built a UI to receive contents and styling params from a multi-step form, and a dashboard where users can manage settings in second place. All the data is saved/fetched in Mongo when needed, using Express. I have a "publish" button in the frontend, which fires a POST to the backend.
Then the related express route fetches the correct data from mongo and pass it to a function, which runs locally a "create-react-app" with a custom template and injects params/content to the right components. After that, it runs a build and deploys the result to a subdomain.
My question is: am I wrong managing to build static files and deploying them every single time the user hits the "publish" button?
Do I need to dynamically generate and serve the site when is requested?
The best and most "react" way to do this would indeed be to dynamically generate and serve the site. It will be a bit more upfront work but will result in better ux.
What you are doing now will be quite slow and not very user friendly.

How is the Parse app id kept safe when using the JS SDK?

I put together an angular app that is using a parse-server backend. As I understand the app connects to the server through the following line in app.js:
Parse.initialize('MY_APP_ID');
My question is what is stopping someone from viewing app.js in the source and seeing my app id? Could they not use the app id to hack my server and mess with my data? I'm sure someone has thought of this and I'm just missing something but I can't seem to wrap my head around it.
My understanding is that it isn't. You protect your data through the use of roles and ACLs. e.g. you would set yourself (and other developers) as admin which allows you to access and edit particular classes. Personal user data would only be editable by the people who created it. And you could also have moderators who could have elevated user privileges etc.

React JS best way to manage session

I am creating web-app with react. It is my first JS project so I decided to ask for advice.
I do not know how to manage user session.
I am using axios.post to connect with server but I do not know how should my app behave after successful authorize. Now app just changes page to for example /myaccount.
Please tell me what should I use ensure that user cannot access /myaccount without login.

Categories