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.
Related
I'm currently playing around with a KnockoutJS SPA template in ASP.NET Core 2.1, and I managed to implement an authorization flow exactly as this one which was made in Angular:
https://fullstackmark.com/post/13/jwt-authentication-with-aspnet-core-2-web-api-angular-5-net-core-identity-and-facebook-login
As you can see in their User front-end service, basically the only check for whether the user is logged in on the client side is the check if the "auth_token" key exists in the client's local storage:
https://github.com/mmacneil/AngularASPNETCore2WebApiAuth/blob/master/src/src/app/shared/services/user.service.ts
this.loggedIn = !!localStorage.getItem('auth_token');
// ?? not sure if this the best way to broadcast the status but seems to resolve issue on page refresh where auth status is lost in
// header component resulting in authed user nav links disappearing despite the fact user is still logged in
Simply put, anyone can open up the browser local storage and insert a random string with the "auth_token" key and they'll be able to see everything admin-related in the UI (even though they will fail on API requests).
Can someone suggest a better flow for this? Or is the only option to send a "log in request" to the API, whenever an admin page is "opened"?
P.S. I am relatively new to the authentication schemes front, should JWT perhaps not be used for client-side content validation?
Considering JWT best practices, all your validations should be done in your back-end, since any validation coded in your web app could be read by any of your clients, resulting in a huge security flaw: anyone would know how to create a valid JWT for your application.
Is it a big problem to be possible to see your admin-related UI, even without any data? Considering that all of the routes which can return sensitive data are protected by JWT authorization, if a user access any pages or parts of your UI which require data, they would trigger a request to retrieve it, which would probably return a 401 (Unauthorized) HTTP status, or similar. A common front-end practice in these situations is to erase client user data, and redirect to a login page.
So, a typical flow would be:
User inserts a fake access token into their storage
User opens an admin page/ui which uses sensitive data in any way (showing, using for any internal logic, etc)
Web app does a request to the API requesting data
API returns a response which will be interpreted as an authorization error
Web app receive the API response, erase user access token and redirect them to its login page
In most cases, this entire flow will happen fast enough to block your user to further interact and explore your web app.
Would be better if you provide more information about your scenario, so anyone could understand if your worries are something that needs to be considered and truly solved. However, in most cases, the behavior above is accepted.
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.
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.
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.
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