ReactJS and Firebase Users Admin - reactjs

I am trying to create a React app where a user with "admin" role can create a new user in firebase.
The workflow would look like that:
normal login -> check userRole -> if admin: show createUserForm.
As far as I have read from the documentation, I would need an Admin SDK, but the problem is - how to implement it on client-side app? Has anyone gone through this process?

The Firebase Admin SDK should only be used in a trusted environment, i.e. a server you control or Cloud Functions. It should not (and cannot) be used in a client-side React app.
If you want to allow certain users of your React app to create accounts for other users, you'll want to move that part of the flow to a trusted environment where you can use the Admin SDK.
So the flow becomes:
Detect in the client-code whether the user is an admin (likely using a custom claim) and only show the form if they are.
Call a Cloud Function from your client with the input from the form.
Ensure the user calling Cloud Functions is authorized.
Create the user account in the Cloud Function using the Admin SDK.
As you can see this is quite involved. I highly recommend considering alternative use-cases, such as what it actually is that you want the admin to control. Once you enable a provider in Firebase Authentication, any user can create an account with that provider. Trying to control that from within your application code is just a recipe for problems. Often what you're actually trying to control is what a specific user account can do: e.g. only approved users can access certain data. Depending on where you store this data, that is much easier to control. For example: if you store the data in the Firebase Database, is is common to create a whitelist of approved users in such a case (or the inverse: a blacklist of banned users).

Related

Is there any way to get lastSignInTime on Firebase Auth by using user UID?

I am looking to fetch lastSignInTime for all users by using the UID of the users.
I am using react.js
I have attached a screenshot of it so that you will have an idea of what I am looking for.
Hope, you guys help me out with this.
There is no way to access profile information about other users than yourself from within the client-side SDKs of Firebase Authentication.
If you need such information in your app, the two main options are:
Write the information to a cloud-based database (such as Firebase's own Realtime Database or Firestore) when they sign in, and read it from there.
Use the Admin SDK to access this information for all users in a trusted environment, such as a server you control or Cloud Functions. From there you can then expose the information to your ReactJS application as a custom API.,
In both cases, be sure to take care of securing access to the information, by limiting the amount of data you expose and who can access it.

Set admin-like user for firebase realtime-database

im maintaining an older react web-app that uses a firebase realtime-database to store its data. I want to restrict the access to the database, so that only my react app can read from and write into the database. Is there a way to set up an admin-like login (kinda like with sql-databases) to authenticate my application?
I don't want to authenticate other users or enable them to register, I just want to ensure that only the web-app can edit and modify the database.
I've tried to experiment with the firebase authentication-methods but they don't seem to be what im looking for.
Thanks in advance!
I don't want to authenticate other users or enable them to register, I just want to ensure that only the web-app can edit and modify the database.
That's not possible. The only way to control access to a Realtime Database instance (while allowing direct access from web and mobile clients) is using Firebase Authentication to identify users, in combination with security rules that determine which users can access which data. Otherwise, anyone with an internet connection will be able to read or write the database.

How to let only owners authenticate through a sign in page with Firebase Auth

I'm trying to create an admin portal for an already created application. Only owners should be able to authenticate through that particular page. The rest of the accounts in the firebase authentication shouldn't be redirected. I'm using React and Firebase. What are the potential solutions to that?
Firebase Authentication makes no distinction between where the user signs in from. No matter what place they use to sign in, they end up in the same state: as an identified user.
Your application code however can make a distinction based on its knowledge of the user. For example, if you have a list of application administrators somewhere, or have added a custom claim to the profile of application administrators, you can use that information in a so-called auth guard in your application's routing logic.
See some of these search results for more information about this, and questions like this one: How to restrict access to pages in next.js using firebase auth?.

How to call adminCreateUser from React front-end?

I would only like my "Supervisor" user to be able to create "Employee" users (unable to create their own) through a custom React App rather than go through the Cognito Console. The AWS Cognito Identity SDK's AdminCreateUser action is offered through AWS.CognitoIdentityServiceProvider, which seems more than available through a Node back-end and the AWS Management Console interface. And there is (teasingly) plenty of documentation on authenticating users that have already been created through the AdminCreateUser API. But, try to
import { CognitoIdentityServiceProvider } from 'amazon-cognito-identity-js';
And AFAIK (as far as I know), the action is not provided in React.
I'm considering using a hacky approach of defining 2 particular Cognito User Pool - User Groups Supervisor and Employee. Only users that belong to the Supervisor group will be able to access a registration screen (using protective React Routing) where the I can use the well-documented CognitoUserPool sub-SDK to create Employee users.

How can we do authorization (roles and permissions) in react redux?

For different roles with there permissions example admin , moderator , user
All these roles have different permissions for accessing pages and functionalities
How can I implement this in frontend
I am using react redux as my front end
Access and Identity management are typically not features which are solely handled at the front-end.
Your user should authenticate itself against a back-end which then grants a role to your user (which you can then use to show features which are only applicable to this role). However to avoid users from using features they have no rights to, you should validate on the back-end every request they do.
This gives you the flexibility to change a user's role on the fly and invalidate their access to the application when necessary.

Resources