Role based authentication with firebase and angularjs - 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

Related

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.

Manage two types of users FIREBASE auth + REACTJS

I'm making a system that have a users and admins, Admins could do unique things like ("delete users/access to admin dashboard ecc...").
For the frontend I'm using ReactJs, for the authentication I use firebase auth (that store the authentication info of users) and for the users data I have an Express API that saves the data in a PostgreSql db.
So when a new user is registering the email and password are saved in firebase auth, and the other data such Name,Lastname,address ecc... will be stored in PostgreSQl db where every user is identified from the unique UID that firebase provide after register.
Below a small diagram that show how the register system works
The admins will be registered manually and in PostgreSql I have a table called Admins that will store the extra data for admins (is similar of users data, but with more attributes).
But my question now is, how I check in my frontend if the current logged user is admin or normal user??
Maybe checking after login if the uid of the user logged is in the Admins postgreSql table? But this will be too expensive in terms of excecution right??? because every page reload or similar I have to repeat the check with the backend. Because firebase manage the users and admins in the same way, only my backend knows if the user is admin or not.
Anyone know if there is a good solution to handle this situation??
Thanks!
Davide.
It's probably best to use Firebase Admin's 'setCustomUserClaims' function to add to a new administrator's auth token. You could add something like "admin":true. Then, when a user authenticates, your frontend code can check if that token exists. Here's a link to Firebase's guide on doing exactly this: https://firebase.google.com/docs/auth/admin/custom-claims

What is the best approach to design database with external users, groups and permissions?

We are removing User, User Group and Permission models from our backend in favor of Auth0.
Our first idea was to just delete User, Group and Permission tables from DB and replace related foreign keys with varchar field. In this field we would then enter IDs that we get from Auth0 in JWT (pointing to something not present in our DB).
Is this good approach? I somehow feel that there must be more "relational" way of doing this.
Generally OAuth will not do all of the permission checks for you. Instead it gives you general mechanisms to sign the user in and issue + validate tokens.
In most real world architectures you also need to manage a second level of authorization in your back end - using domain specific user data for roles, permissions etc.
A couple of write ups of mine may help:
User Data Management
API Authorization
Auth0 Community Manager Dan here,
In this scenario you may be able to leverage the RBAC to replace your existing users/groups/permissions setup.
You would register a user's roles and the associated permissions of each role in the Auth0 dashboard or programmatically via the management API. Then you can setup a rule to add user roles to the token.
To connect this user to your existing user data store you can store the Auth0 id, similarly to how you have described.
This allows you to lookup the user when the token is received, and to associate any permissions or roles the user has. You can make roles API-specific by adding a prefix to the role, or have roles be general depending on your needs.

user management with Firebase and React

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

How can I do role based access for the pages using AngularJS?

I want to do a role based access for the pages in AngularJS.
Based on the role pages should be shown to the user.
Can any give me an example? Which should be a best solution.
To access the page based on the role is very easy.
Suppose if the web/dashboard have three roles like admin, support, employee.
assign the field as userrole to the users.
Now assign the roles for those pages as ng-if="userrole=='admin'" or vice versa
now based on the roles the pages are accessible
I'd suggest you take a look at (in the following steps):
Decide on an approach for accessing the current users role.
Look into ui-router, specifically it's Resolve method.
Run some third function inside the Resolve method to see if the user is of the correct role, and handle your cases in what way you will.
Something I worked on a while back had an Authenticate method running in the Resolve method, you may want to have a look at that for reference. This was not role based however, but it may give you a nudge in the right direction.
Routes:
https://github.com/kasperlewau/metalmarket/blob/master/app/assets/javascripts/config/routes.js
Auth Service: https://github.com/kasperlewau/metalmarket/blob/master/app/assets/javascripts/app/services/auth.js
If anyone has a better idea for role based / logged-in based authentication, I'm all ears.

Resources