If I store the logged in user role in localstorage (i.e. user). So user will only see the user's dashboard. But if logged in user manully change the role in localstorage to admin. Then user now can see the content of admin dashboard. I just want to know how to fix this.
I hope these steps can help you
you can store the user role in the app (ContextApi or Redux).
and keep the token in the local storage.
when you reload the app you can use the useEffect hook to send a request to the backend to know what is the user's role.
and then edit the stored data.
and when you add any component to your app you can access what the user type can see this component and render it just for the suitable users.
you can take a look in this article
Related
Is it safe/reasonable to store a users username in localStorage or a React state when a user logs in?
I currently have a simple <Login/> form that only renders and displays if a user is not logged in. When a user logs in, a jwt token is sent from the server, the token is stored in localStorage and saved in a React state inside <App/>.
If there is no token inside the React state 'token', then the component renders, however if there is a token (meaning a user logged in, the token was set to the React state and local storage), I would like a component to render instead of
I am using react-router-dom to handle routing in my application.
My main question is whether I should send the users username alongside the token, and store that somewhere? I ask this because I would like to load the <Profile/> component with the users username and to the route /user/:username once they logged in. However I have no idea how else I would do this, because once I save the token and once they are logged in, how would I be able to redirect them to their user/:theirusername url instantly after login if I do not have their username. Would I need to somehow refetch their data with a graphQL "ME" query?
It greatly depends on the kind of application you are working on, But storing a username in the localstorage can be made safer by having a hashing function that encrypts the user name before storing it to localstorage, In this case someone will not know the username by just looking into the storage values but someone can only read it if they can reverse the encryption.
I have two types of user . when user login i need to redirect them based on their role . Also protect routes. Only login user can go to specific routes based on their role. how this can be done in next js
You can get the auth token and create a serverSideProps https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props to redirect the user by role.
when the user logs into your app, you can save his permission in cookies and then get his permission via serverSideProps, and render the page according to the user.
I'm doing a school project using reactjs and Firestore that has 2 users; user and admin. These are the features:
User:
User registers on the website. Upon registration, the system will generate a QR code for the user to be scanned. Upon scanning, the vaccination status of the user will be updated such as the vaccine type, dose, date of vaccination, and etc. The user may also input side effects they've experienced, and view the vaccination graph reports.
Admin:
Admin can log in and scan the qr code, view vaccination graph reports, Vaccine (CRUD), list of the users
Is it okay to have one login interface for both users and admin? Are there any security risk or defining the security rules is already enough?
Or is it preferable to have a separate login interface? If a separate login interface will
be used, would I need Firebase Admin SDK and Cloud Functions (the problem here is that we do not have a credit card for the Cloud functions)?
I am not sure how you are executing the QR Code logic for both admin and users and fetching all these details. Nonetheless, I would like to suggest an approach that you can follow. You can set your authentication based on role and create multiple routes for your application using React Router for Firebase.
For instance, a user should be able to visit a public landing page,
and also use sign up and sign in pages to enter the application as an
authenticated user. If a user is authenticated, it is possible to
visit protected pages like account or admin pages whereas the latter
is only accessible by authenticated users with an admin role.
There is no reason to show a non authenticated user the account or
home page in the first place, because these are the places where a
user accesses sensitive information. In this section, you will
implement a protection for these routes called authorization. The
protection is a broad-grained authorization, which checks for
authenticated users. If none is present, it redirects from a
protected to a public route; else, it will do nothing. The condition
is defined as:
const condition = authUser => authUser != null;
// short version
const condition = authUser => !!authUser;
In contrast, a more fine-grained authorization could be a role-based or permission-based authorization
// role-based authorization
const condition = authUser => authUser.role === 'ADMIN';
// permission-based authorization
const condition = authUser => authUser.permissions.canEditAccount;
The real authorization logic happens in the componentDidMount() lifecycle method. Like the withAuthentication() higher-order component, it uses the Firebase listener to trigger a callback function every time the authenticated user changes. The authenticated user is either an authUser object or null.. If the authorization fails, for instance because the authenticated user is null, the higher-order component redirects to the sign in page. If it doesn't fail, the higher-order component does nothing and renders the passed component (e.g. home page, account page).
You can check this tutorial and get an idea of the approach I was mentioning.
Just a reminder : While Firebase Realtime Database can be used on the free plan, Cloud Firestore is charged by usage. That's why you can set monthly quotas and budget alerts. You can always see the pricing plan, and adjust it, in the bottom left corner of your Firebase project's dashboard.
Also yes Cloud Functions still has a monthly free allowance that's documented in the pricing page. But you will have to provide a credit card and be on a billing plan in order to use it. You will be responsible for paying for any monthly overage. But I don’t think you will need Cloud functions for that matter, just some decent db rules to protect your database and the authentication of your application based on role and routes using React Router for Firebase should be good enough.
When a user logged in as a customer, he stays in the system under his role even if he changes the browser tab. My client has credentials for admin as well as for the customer. Testing the app he logged as a customer and decided to open a new tab and login as an admin. When he did back on the first tab, surprisingly he had an admin view instead of the customer. My question is, is it possible somehow to detect state change when the other browser tabs were active? I am storing the token in localStorage for API calls, rest data (email, username etc) in redux.
I have SPA using React and Redux.
After the user logs in, I save his data in redux state.
In some cases, the user information can be changed (such as being attached to some roles). How can I update the user data (without using websockets)?
Do I have to return the user on each request to the client? Or do I have to update his JWT token on each request?
Thanks.