How2Build -Roles, Groups and Permissions in FlutterFlow

hi I'm Josh from Flex boots and today I'm going to be showing you how to set up rules-based access to your data in your applicant flutter flow um if you'd like more of this type of tutorials and content or you need help with anything in your app just want to have some coaching sessions please subscribe to our YouTube channel and check out our website anyway so down to the nuts and bolts I got a fresh project here that I'm going to be working on and this came in question from one of the viewers of our Channel um and I think it's a great one because I get asked this a lot which is how do I basically set up my apps so that I can have you know admin users or premium users or regular users and have them see different types of content be able to interact with different features of my app and where do I start how do I do that there's no option for that flow um it's true there's no option for it um but that's because actually the what you can do with letter flow is much more powerful than in any other sort of app builder where you've maybe had the ability to do user so where do we start um the first thing is to think about obviously what your use cases so we're going to do a few simple ones here um and basically how we're going to structure our data that's the first place to start so it said this is a blank collection blank app what we've got here is a user's collection and this is where it's going to keep it simple and we're going to have this um and we're gonna do most of this stuff in there the second collection that we're going to create is we're going to create one for uh the groups this isn't always necessary but we're just going to do a sort of illustration purposes um and then a third one which we're going to call um simple uh blogs yeah so in this I should have thought of this before but uh in this scenario basically we have blogs that are the main content and we've got premium blogs and free blogs and then admins we want to be able to edit blocks or potentially upload a new book or to be able to do different things your app so so okay so these are basically our three different collections users is for users groups is literally just going to Define what the groups are and then the blogs which is a collection of blog posts so we'll start it by going ahead and creating the data structure for the blogs this is normally where I think is the best place to start so I always do these three um uh these three fields on every single collection whether I need the moon off it's just kind of like muscle memory um and it just means always a place to start uh and that's created time user and uid uid now in flutterflow is a little bit unnecessary because you can actually get that directly from the user document but sometimes it's just easier to query with a string okay so what else is going to have a Blog have it's probably going to have this is another field I do automatically um for all of my collections uh wow what is notifications so much for doing it nice video review without distractions two seconds I'm sorry so uh blog ID this is something I do for every collection I give it always the same name just so it's consistent so it would be groups ID blog ID uh uh account ID whatever it is post ID and basically I set up a cloud function to do to create an ID which is not the document ID it's just a unique value that is going to be assigned to this I created on every document from the document ID automatically and it just again makes it easy if you need to query for a specific document sometimes it's easier to work with strings than with document references um okay so now I actually get to the real meat what is a Blog going to have a Blog is going to have a title that's going to be a string value it's going to have let's say a image which is going to be an image path which in floater flow or just string values but it considers them differently to help you out and then it's going to have a name text yeah this must be very very boring blogs again you'll notice I use these naming conventions underscores um this is entirely personal preference and but whatever you choose just stick with it Okay cool so this is the basic how we would set up a Blog now let's go into the groups let's get this overview again when I build stuff I normally build in circles and the reason I do that is Google is talking to you in my head um the reason I do that is just how I think how my brain works it doesn't mean it's the right way it's just um but in general I kind of go around from the start what do I want to achieve and then work backwards to some data then go do some ux then back to data and kind of back and forth so again we're always doing these three collections these three Fields these are in this case especially going to be entirely almost irrelevant just do them for the sake of consistency anchors sometimes at least they're not nicely alphabetize that one okay and then the fourth one it's three now four now um group ID so what is a group going to have it's basically going to have a name uh and you could keep in here uh a list of users like group let's say members yeah which is going to be a list of let's say document references in reality this is often not a great approach it depends if you've got three user cap and if you've got three like admin editor I would say definitely don't do this uh but if you've got small little groups you know 10 people or something this can be a good approach but not if you can have thousands of users in this single document um and then we basically got a user and so what we want to do here is just give this a string value for group um great so this is going to be Define whatever group they are in now for a Blog what we're going to do is uh we can do this two ways essentially if a Blog is only viewable to one group we can just have this as a single view a single uh so it could be you know viewable to members in but in this use case what's actually going to be better is to do a list um and I would call these groups uh you can also call this uh let's call this permissions and so this is essentially going to be a list of streams and so if a doc if a Blog is able to be viewed by admins by editors um and by Sorry by premium users by free users and by admins then you're going to have three values for each blog in there which is going to Define who can see it and who can't um but then again we also obviously have the actual group uh in the users table to compare the two and then also for when we're designing the ux so let's move on to the ux now um so on this page what we're going to do what's going to do is really simply we're going to first I'm going to put a button uh just in the top yes so let's uh actually let's do it so I'm just going to design here a row and then actually you know what let's use let's cheat let's use the templates because that's going to be faster because unlike other YouTubers I'm not prepared and so as I often used in this theme widgets templates let's see if you've never built anything before and you're looking to try to understand like how to build stuff this is actually a really good place to start um these are all another place uh okay components acting here we go this is um so let's do a header and make ahead or something like [Music] maybe I can cheat and just use an entire page content is there something blog [Music] um should I cut out do you like watching me mess around it shows that not everybody knows everything uh [Music] here we are those look like an alternate uh so we're going to call this a Blog okay cool I always like to do this that's great so basically we've got like let's say this is the main page of our app and it's got a whole bunch of blogs which apparently have prices on them let's say it's a travel blog about how much this cost and how much they spend okay cool and what we want is we want premium users to be able to see the ones that are only available to premium users and we want the admin to be able to delete a blog or hide a blogger some other ux feature um so let's do that first so you know our rules based machine we're going to wrap this here in a row and we're going to add into the row uh icon button spread them out and make it so it's more visible [Music] to make it nice and big okay and then and then the icon will make that white six and we're going to call this the like say this is the the settings button this is remember this is a button that we want to be only available to admins yet and so that's a really simple use case most people probably already figure that out a million times so what we want to look here is simple condition on the visibility and we're looking for is the authenticated user is there group equal to and you have to decide now at this point whether you're going to use capital letters for your player I'm just going to do them like this um and the default value we're going to set here is defaults if you're setting default values make sure you click it twice so you see cool so that means now only the admin can use that button and we would maybe use it for a navigate to the you know special admin page or something okay great so now what we've got here is a bunch of blogs and we want to generate these from a list um so what I'm going to do here we're going to go ahead and do a back-end query query collection blogs list of documents and what we want to do is filter by groups or permissions we call this all right permissions array contains and then authenticated user group and then we want to order them by maybe created time decreasing means newest first and there you go now only the blogs will be visible if the user is in the group so let's do one final thing which is just to create an example um blog post because I uh the screen recorder is not going to switch over here I know there is something okay that's not um but essentially yeah when you create each blog post you need to create it with the exact permissions that you're going to be that you want to be seeing so for every blog it will have its own set of who can see this each time you query it you're just showing the ones and that's it that's how you create rule-based permission group access to content and your app and photo flow if you enjoyed this content want to see more of it please subscribe um if you need any help with your apps want to do some coaching sessions you can always contact us at flexbirds.dev um and I'll see you next time

Channel: flexperts

Views: 13,496

Keywords:

Id: Nzz7Iqkze_c

Length: 12min 51sec (771 seconds)

Published: Fri Jun 02 2023