Flutter - Role-based authorization with Firestore

so guys welcome back to another video and in this video we are going to be talking about role based authentication with fire stored for your flatter applications so we already discussed a lot about authentication along with firebase in our previous videos guys I made an entire playlist called flutter authentication in which I discuss various types of authentication I mean various authentication providers like Google Twitter Facebook and all the phone authentication and all that stuff so I'll leave a link to that playlist in the description below but anyway role based authentication is not exactly a type of authentication it's like adding an extra layer of security to certain features in your application say for instance you have a normal authenticated user and an administrator so the administrator will have access to certain areas certain dashboards certain pages which the normal user won't have right you will have an admin only area and the normal user even if he tries to enters the admin only area tries to enter the admin only area then he won't be authorized to access that right that's called role based authentication only users with a specific role can access certain areas of the application and users who don't have access to that authorization to that specific area can't navigate to that specific page so how are we going to do this in our flutter' application set to with the help of firestore let's see in this video it's pretty much simple if you understand the concept guys since you have already discussed a lot about authentication I am NOT going to dive deep into the basics of authentication rather than that I will simply hard code a username and a password and then jump on from that yeah scaffold out a blank application as you can see here and then I have gone ahead and installed a couple of dependencies soon as the cloud Fastow dependency and the other one is theif I base off dependency let's get back into main door dart file and then I will clear this entire home page I won't be needing this rather than this using this I'll be using different pages scalene Aroldis and i'll create more stuff here you find login page tall dark and - all this is the page which all users can access and this is the page it's just permitted only 40 accesses permitted only for administrators and I'll as usual I'll have a services directory inside which and have service fix user management here is where I'll manage the authentication state and all that now a lot of people were asking me is that I mean in my previous authentication video I showed Ron the boat route for logging in a user and then checking whether the user is logged in each and every time and also whenever the user log so he needed to do some stuff as well right for redirection redirecting by him back to the login page and all that right push replacement name something we used if you remember you may you may remember that we use something called a navigator dot off context push replacement named which will replace the existing routes in the stack with the login page route that's a pretty much around about way of dealing with signing in guy signing in and signing out so I will show you a clean simple way of doing that in this video so let me first get into login page dot dot and then I had some once again as I said I will simply have a button tapping on that button I will be logging in that's it I'll hard code the email and password then it will be very simple right I'll just run through this import package dot my package import material in port I need to 1c slog them alright I've imported the firebase authentication package as well now I will import use a stateful widget login page and inside instead of the container I will you return a scaffold relu app bar type till next login page fine center title through and body now I have a user here with the role of admin right I'll use this email all right now we have a nice login page and I'm simply logging in using an email and password this user has the role admin so this user is an administrator now how am I going to handle this in user management or that just wait and watch import firebase or once again import flow firestore cloud first or dot dot and import with stored for the navigator and all that so I will do class user management and inside the cell widget many of you guys when I talked about arcs dot in in one of my previous videos you kept asking me to show use case for these streams right so this is an excellent use case for that will return a new string builder inside this I will give this 3ms firebase off bot instance store on hot state changed okay whenever the authentication changes I mean authentication state has changed this will read that builder build context on next snapshot and if snapshot dot has data which means that the user is authenticated then they should do a return - whoa edge I don't have a dashboard page rank okay a batch board page will have a dryer as well so that I can navigate use this to navigate to other pages so if you remember I have written an entire article on how to create a drawer for your flutter applications so we make use of most of the code from here I can simply do a copy and paste rate this is fine instead of about page I will do all use all users page and everything can remain the same 2000 users page they don't have thank now we have an all users page I can use this in dashboard all users page so I have a draw airman who the side menu and inside the side menu I have one list item that will take me to the all users page I will simply go ahead and add another list stateless will which can be used for logging out log out and on tap I should simply go ahead and do firebase tort where this OP thought I'll use user management here as well all right now that we have the synote method here and tapping on this I will automatically be using this to sign out now whenever the signs out also this since you are using a stream here we should handle that as well right so whenever the user signs out I should simply return the login page right it'll finish it finish this off first I will get back to Maine dot dot and then input user management here and then inside home here I can simply use user management dot so now you understand what exactly will happen right whenever someone authenticates inside the mean whenever the app loads it will look into this function use this function and since there is no other detailed user obviously the login page will be written which will be shown to the user whenever the user logs in the snapshot not as data will be true and hence T - this will get triggered obviously since you're using a stream so the dashboard page will be written which means said the user will be taken from the login page to the dashboard page whenever the user signs out he will be once again returned to the login page right so this is a if you we have literally taken out all the complexity out of the sign-in sign or process using a stream right if you use a connection state there is something called a connection state I think it will check it if snapshot dot yeah connection state equals connection state connection state dot waiting so if you use something like this connection state out waiting then you can obviously show a splash screen to the user something like a loading please wait or something like that and once the loading complete status once the snapshot has data then you can take him to the dashboard page I haven't used that here but I'm giving you the idea of how to show us a splash screen or loading overlay before signing in the user before actually taking the user to the dashboard page anyway this is a clean way of doing I mean signing in and handling the signing in and sign out I'm easy way and clean way of handling the signing in and signing out part of your application and the next thing we need to do is raise the access to the admin only page right admin only page I have nothing so import my tea okay let's get back to dashboard dot dot add another list today and here instead of pushing in new page or tiny to do this I'll write another function or threes access and this will take context build context and where this North instance dot whenever we look at a file based on firebase app dot instance dot current user and say ii simply do a fire store i don't know how many of you guys remember i'm going to i am writing a very simple query fire store towards instant start collection what was that users rate yeah uses not where ul D is equal to user dot uvd not get document sorry get documents once I received these documents all in it rules then Doc's say the documents if dog stored documents this will be an array not a dot exists there something like exist exist yeah this will turn if T there are any documents present if this exists then I will simply do once I will check if dog start documents documents of 0.8 sorry date of role equals admin admin navigator not off context or push root I need a root right no I need a context first and then context I gave it you know that that will create a root no material page root or something I forgot yeah material page material page until page root won't show up because hidden import material not art material page road and inside this will build on X context okay admin page won't show peers in Sweden if the user is not an admin no tourists fine probably we should show this is not authorized inside a snack bar or something right and here they can simply do a user management dot or trace access of context now whenever the user clicks on the admin area whenever the user taps on admin area and tries to navigate first it will first he'll be checked whether he is an admin if he's an admin he'll automatically be taken to that page if not he'll it will print not authorized and it won't take him to that page as well let's run this code on a device and see how this functions before running this code I would like to say that I have an admin user and I have a normal user as well I'll show both of these scenarios okay I'll show both of these scenarios all right now we have our application opened up and we are using this particular user to log in write this credential is what we gave this user is an admin user so he should be able to access the admin area as well I am just tapping on login and the user has been logged in now right now I'll just tap here I have all the three options first I'll tap on all users page I am taken to all users allowed page and then I'll tap on admin area it should authorize my request and then it takes me to it takes me to the admin only page as well and I'll just try tapping on law both no I am automatically logged out right now if I try to use this normal user so I'm changing this to what was the test 38 t.com saving this and then running this now let's try tapping on login it automatically logs in and I'm tapping on the drawer and I'll tap on all users page I am taken to the all users page no issues there but when I try to tap on admin area it's showing not authorized here you can see right it's printed on the console not authorized that is this user who is a not an administrator cannot access the admin area page right if I tap on logout it's automatically logging out that's it right so now you get a basic idea of how to do role based authentication in your flickr applications right obviously I just showed you administrator and a basic user base but in our application it depends on your use case you can have premium users you can have professional users it so say for instance your application is for selling a product service ok so you have three types of plants one is the basic plan and another one is the advanced plan the third one is the professional plan and the fourth one is a premium plan and all these plans are off are priced differently and you need to have the roles accordingly consider a scenario like that so in that case what you can do is you can simply check I'm checking the admin here right similarly you can have all these four rules and check for roles and check for which role this user has access I mean which role this user is part of and then provide access to him to that particular page accordingly so all these stuff you can do with role-based authorization for your flutter applications right so this is one step ahead of authentication now we both the users are authenticated the first user was authenticated and second user was authenticated successfully as well but the second user was not an administrator his role was a basic user so he was not allowed access to the admins only area page not authorized whereas the first user was an administrator and hence after authentication he was able to access all the pages in the application this is all based on basic rule based authentication this is a simple way to do a role based authentication obviously there are other ways but I always try to provide simple ways so that people can easily understand and then build upon that if you really like this video kindly hit the thumbs up button guys if you like what I'm doing on this channel kindly hit the subscribe button and then click on the bill notifications icon so that you don't miss out any of my uploads and upload four to five videos per week guys and one of those videos will be you a challenge or end video recording animation so yeah stay tuned guys you'll receive a lot of content obviously and I'll talk to guys my next video bye

Channel: Raja Yogan

Views: 42,653

Keywords: Flutter, Google Flutter, Authorization, Roles

Id: Tyk0Qte0moY

Length: 25min 41sec (1541 seconds)

Published: Wed Oct 03 2018