user management with Firebase and React - reactjs

I was wondering if this is possible using Firebase and React.
I want to create a admin panel where the admins can add new user and assign roles. The moderators should also be able to login and make a new post (the new post part i have figured out).
However i dont want any users to be able to register on their own, just the admin to add them to the site.
Is this possible and in that case, how? Grateful for input and thoughts

Yes its possible, just create and Interface which is able to send data to firebase.
Here you have a little example.
I've just create and APP which connects to firebase. Firebase saves a lot of time becase you dont have to control the Auth and the Users SingUp, it has functions to do it.
I will sugest you to use it with ReactForm (to send the data) abd the ReactRedux to control states and the LogIn, LogOut and SignUp.
https://medium.com/firebase-developers/how-to-setup-firebase-authentication-with-react-in-5-minutes-maybe-10-bb8bb53e8834
Fore more info check Google Documentation.
https://firebase.google.com/docs/auth

Related

Firebase, Changing User password via Email with unique password requirements

Currently, Firebase offers the option to send an email to a users email who wishes to change their password. Unfortunately, Firebase does not allow you to edit their password requirements which I believe is locked at requiring only 6 characters.
For many people this is inadequate and insecure.
I recently made an application that allows users to create quizzes either for themselves or for others. In this application, I stores personal information of my users and I wanted to make sure that their accounts were secure so I required more from my passwords. Unfortunately, when a user wishes to change their email, the default Firebase function does not keep my security which leads to confusion as a user can change their passwords according to Firebase's lax constraints but then they still couldn't log in because they used an invalid password. (I blocked invalid passwords from the text box before even checking with Firebase).
After I encountered this error, I came to StackOverflow for help to see if anyone else had this issue and came up with a solution. Unfortunately, I was met with harsh criticism and harassment by users who claim to be Firebase officials and Administrators who did not care about my question.
Then, I after a week of research and testing, I found the solution using React and 3rd party libraries to handle this.
Please, see my answer below and if you have a more creative solution, I would be interested in seeing that as well.
To solve this problem, the only answer is to create your own mailer service with your own basic mailer service, host website, and API.
What you need:
An application which uses Firebase.
A hosted API which uses Firebase and a 3rd party Mailer such as Node with NodeMailer - hosted on Heroku
A React app which can communicate with the API
What I did:
First, I created my API which accepts calls from my specified IP addresses. This API can receive requests to reset a password when the password is known or unknown. When the password is known, I send an email to the user using NodeMailer and I send a special HTML file so the email looks official. It is quite easy to copy the layout of Firebase's emails if you wish.
More Info can be found here: https://nodemailer.com/message/
Then, I created a React App that is hosted on Heroku. When the user clicks a link in the email, it will send them to this website with the required information in the query. This app, much like when the Firebase link is clicked is just a simple text box and submit button. However, now you can customize it to require password confirmation with a second text box. You can also add a company logo and custom colors so it isn't so HTML 1 looking like the link you see from Firebase. Most importantly, you can now control the password that the user enters to add your unique requirements.
On submit, the app will send the new password, username and old password if available to the API.
If you do not know how to create a React App or a Node API, you can see a detailed tutorial here: https://www.techandstartup.com/tutorials/build-api-with-node-express-and-mongodb
Finally, the API can log into the users account if a password is present and then change the password. Detailed steps can be seen from: https://www.codegrepper.com/code-examples/javascript/firebase+user+change+password
If a current password is not present, then the API can delete the user and recreate it with the desired password. Deleting a user can be seen: https://www.codegrepper.com/code-examples/javascript/firebase+delete+user Then you simply recreate a user. Example code: https://www.codegrepper.com/search.php?q=firebase%20createUserWithEmailAndPassword
With these steps, you can now send a password reset email to a user. The email will be completely unique as you will be designing it yourself. The password will be to your exact specifications as your React App will control the data on submit. And the page itself will look much more user friendly as it's not the default Firebase page.
Hopefully this helps you or your company with working around the Firebase reset password with email function. I am still holding out hope that another user may have a more elegant or basic solution than this as creating an API and hosting a website just for 1 function is not appealing in many cases.

Custom permissions for different user types django rest framework

For Django-reactjs project, I have a user model in django which has 3 boolean fields (is_admin, is_moderator, is_normal_user), and I also have 3 other models, I want to set permissions for each user type. The user can only create objects for 1 model only, the moderator is the only one that can edit a certain model field, and admins can do everything.
It might be a trivial question but I am a newbie in Django and React so If you could please tell me how can I handle it with custom permissions(some steps to follow) and also how these permissions are handled from React.
Thanks in advance!
You need to check if the user has permission every time he is making an action, so when the React app calls your Django API, it will provide an authentication token right? That tokens corresponds to a unique user, so you can just do an if statement:
if request.user.is_admin:
do_everything()
elif request.user.is_moderator:
do_other_stuff()
While in the react app you would need the information if the logged in user is a moderator, admin or a normal user, so you can display the pages accordingly. To get that info, you may want to implement a '/me' endopoint that returns info about the logged in user, containg his status.
If you have no idea what Im talking about, I strongly recommend you to take a look at this video: https://www.youtube.com/watch?v=0d7cIfiydAc
The whole subject is too long for a stackoverflow answer.
Contact me if you still have any doubts.

2 apps with the same database in Firebase

My project is to create an app similar to Uber.
There are 2 APPs, one for partners and the other for clients and I saw that I can create more than one app within the same Firebase project,that way I can use the same database for both APPs.
What I did not understand, how to do is differentiate the partners and the clients?
In the "Auth" menu, I would have to differentiate them with a Boolean.
Can I do this using Firebase? If not, does anyone know show me another way to do? or another database?
Another question I have is in relation to part of the payment, How I store the data of the credit card at Firebase? It support for this? Does anyone know show me a library to make payments straight through the app?
I don't think you can do that from the "Auth" Menu. This "Auth" function is only there for the sole purpose of letting user signup and login to your app.
You just need to implement the user category in your Real time database.
Store the user's uID, with key:value "userType":"client" or "userType":"partner".
And whenever the associated uID logs into your app succesfully. you need to read from the Real Time database to determine whether this user is a "client" or "partner" and show the appropriate functionality accordingly (or direct them to a different View controller eg: ClientViewController / PartnerViewController). Or if you have 2 entirely separate apps. Then this can act as a verification, just to make sure if this user is indeed a partner / client.
I'm not sure what to do with the payment system. But you can look at library like Braintree or something.

Role based authentication with firebase and angularjs

I am using email/password authentication via Firebase, so currently I only have authenticated user and non-authenticated user. But for the app, I would like to have admin, moderator, user and guest four different kinds of role.
I did some research, but could not find any existing example or logic to do so. Here are my initial thoughs, but not sure if it is feasible. Basically two steps:
Create a table in firebase called User, while Firebase record the email/password, I also push the data(email/password), and role information to the table.
In the route, check if the user has the appropriate role to access the certain page
Any other better way to do it? Any idea would be appreciated!
I had similar issue while working with role based authorization. I followed same pattern of saving users role and then retriving it when needed. If you are using ui-router for routes then probably you can use angular-permission module which works on the same concept and is easy to use.
You can find that module here: https://github.com/Narzerus/angular-permission

How do I integrate the FB Javascript API with custom database

I am new to Facebook development.
Is it possible to have a website login with Facebook + a non-FB database?
Specifically I would like my users to access Facebook information similar to Sociogram (http://coenraets.org/blog/2013/02/sociogram-a-sample-application-exploring-the-facebook-sdk-and-the-graph-api/) which I have gotten working with my own website app, but also tie in additional user information that Facebook does not keep - so that my users only have to have one login.
Any info on where to start researching would be helpful.
As you are talking about having your own database, i can guide you like this.
Use facebook javascript login to get premissions from user and save them to your database in which you may have other details to be added later for your website purpose
When you save details once from first login, you dont need to save them on next login. So Write code so that on first login check your database for user existance and if not then add him to database.
And in that database you can add extra field that facebook wont save like his height for example.
For this to happen you must have server side scripting knowledge to store the details to database. If you need further more details, i am here to answer.

Resources