Supabase Role-Based Authorization Tutorial: Control EVERYTHING Users Can SEE and DO!

in today's video we are going to be covering a very very crucial topic when it comes to building a complex app and that is the ability for different kinds of users to have different permissions when it comes to doing various things inside of your app so if you have admins if you have viewers if you have editors if you have just regular unauthenticated users they should all have slightly different permissions and different abilities to do various things in your app and this is a crucial topic because this is going to be something that you're going to be dealing with regardless of what kind of app you're going to be building now before we get started as always all the apps and all the resources that I discuss on this channel are going to be available to view Andor clone from my patreon page and if you're still not a member of our amazing rapidly growing patreon Community then you can learn more about it using the link in the description below the video all right so here I built a quick app using superbase and flut oflow and this is an app that lists various blog articles okay so anybody can come in they can create a new blog article they can modify other blog articles and they can also delete blog articles so let's say I come in I see four blog articles here and I can create a new one so I can simply click here here and I can create a new blog article so I can say something like Advanced flf flow training okay and then I can create a sample body in this article we'll discuss Advanced flut oflow training and after I finish writing all this I can click on create that's and I have this new article created now I can click on read now and I can read this article okay I'm going to be redirected to a different screen and I can also modify this article right I can do that by clicking anywhere on the body here so if I click here this becomes editable automatically so I can change the title change the body so let's say Advanced flat flow training um five tips you need to master so something like this and then in this article we're going to advance flat flow training that will help you build better apps all right so then I hit save we've just updated an existing article and if I go back I see this new article here now you can also delete articles so if you click on any of the Articles here so for instance let's say we click on this article there's a button that allows you to delete an article so if I click here that's going to go ahead and delete and if you go back you no longer see that article anymore and I'm also using superbase as the back end so if you go back to super base we have a one table called articles and we have things like title body number of comments and various tags for the Articles just to show you how you can store this type of data there and so this is a nice app and regardless of what kind of user you are whether you are logged in whether you're an admin whether you're anonymous whether you're just somebody who found this app randomly you have lots and lots of permissions as to what kind of actions that you can take within this app so if I send you a link to this app and you've never seen this app before you've never used it before you can do a lot of things you can create new art articles you can edit existing articles you can delete all kinds of Articles you can come in and delete all the Articles if you want and while you're listening to me you may be thinking to yourself well isn't this a problem isn't this an issue that you know one person wrote this article and anybody can come in and they can delete this article or change it or do anything that they want there's you know somebody creates a new article but it's not clear who exactly created this article and you would be absolutely correct this is a big issue you definitely can not launch this kind of an app on the internet because there's no permissions there's no authentications and most importantly there's no authorizations because anybody can come in and they have the exact same rights as the next person and so in this video we are going to be adapting various techniques in order to set up different permissions and authentications as well as authorizations in this app now right now our app looks like this so regardless of what kind of user you are you have the exact same permission as the next person and this is definitely a problem and so before we can set up various permissions and various you know capabilities for each of the users we need to figure out who exactly is the user that's using the app and that is called setting up authentication and so let's go back to our app and let's configure subase as our Authentication manager okay so the first thing we're going to do is we're going to search for authentication here in our FL flow and we are going to enable authentication here we're going to set up authentication type as super base and once we configure authentication it needs to know the initial pages so we have the logged in page which is home but we do not have the login page okay so we're going to go back here and we're going to add another page that's going to take in the user credentials and hopefully authenticate them if they've provided the right credentials and let's go ahead and search for login uh and here's a nice template we can use so let's go ahead and pick this one we're going to save it as login create page and now we have a login template so if you click on sign in and you click over here this is automatically set to log in using our super base so now we can go back to our authentication page and we can use that login as the entry page okay and now we should have no errors over here and another thing that I want to do is I want to create a profile page where we can see who is the user that's logged in and that way they can see whether it's the correct user and they can also log out and maybe log in as another user so we're going to add another page over here I'm going to search for a profile page and let's use something like this and we're going to save it as profile so we have a profile page and I also want to create a navbar so that once the user is logged in they have a way to go to the profile page so I'm going to search for navbar navbar select our navbar it wants at least two pages to be a Navar enabled so we're going to enable it on the homepage we have it enabled here and for the profile we're going to enable it here okay so now we have this let's go ahead and change the icon for the profile page as the user right here so we have the profile page and we have have the homepage and now if we run the app it's going to first check if we are logged in if we're not logged in it's going to show us the login page so let's go ahead and do a Reload and see our new app and see this new flow all right so now our app is asking us to log in and because we've never logged in before this app has no users currently set up so we wouldn't be able to log in so let's go ahead into super base and if you're using superbase as your o backend it's actually very very easy so in this table editor change the schema from public to off and once you do that you're going to be seeing different tables you want to click on users and here in this users table you're going to be seeing various users that have access to the app so right now there are no users here and so we need to create a new user that will have access to the app and you can do that by clicking authentication and selecting users here and then you want to click on add user and we're going to do create new user and we're going to enter the email and the password so I'm going to do James james.com and for the password let's go ahead and suggest a new password here okay so this is a password and we are going to leave this at autoc confirm user here create this user okay so it went ahead and created this user and now we have at least one user set up and so now we can go back to the app and log in as that user so I'm going to go ahead and log is James james.com put in the password click on sign in and we should hopefully be logged in okay so now the app knows who the user is okay so now you can't be just an anonymous user you can't be just a random person off the street anything that you do inside of the app can be potentially tracked so a couple of things that I want to do right now is I want to display the you know the actual user email here and if if you go to the profile page I want to display some kind of user information here so at least it's personalized to some extent so let's go back to our app and let's go ahead and click on home and for this hey user we are going to say hey user but we're also going to have their email show up for instance so if we click here we have access to this authenticated user object with various things inside so we have email user ID we have phone number uh all of these other things so let's say we want to display their email so I'm going to say email and then it's going to say hey user and the email and then for the profile let's go ahead and have this display their email as well instead of some random name so I'm going to click here authenticated user email here and it's going to display the logged in users email I'm going to delete all this cuz we don't really need this this is not applicable to our app something like this and this log out is actually linked to a log log out action so if the user clicks here they're going to log out of the app okay so let's go ahead and refresh our app with these new changes and see what happened all right so now our app is actually displaying the email here of the logged in user and as you can see it says James james.com and let's quickly fix this this should be hey just the user I'm going to delete hey user here cuz that's taking up a lot of space so I'm just going to say hey just a quick quick change let's go ahead and reload the app all right so now it's saying hey James james.com and if you click on this profile page we see James james.com and so right now regardless of what you're doing there is this logged in user information and so we can choose to use it we can choose to not use it and typically you want to make use of this information in various situations so for instance as you can see it says John do John do John do everywhere and so we need to change it so it's actually tracking the actual user who created this specific article and so let's go ahead and do that so if we go back to super base we click on table editor here and we click on articles our articles right now does not have any user information okay we have just the articles but it's not clear who actually was responsible for creating this article okay and so we need to add another column that's going to have the user information the created user information and actually if you click on the schemas here and you go to O and we go back to our users table this system users table is going to be storing various users so as you can see we have this one user that we've just created and each of these records here is going to be identified by this unique ID here and so we can potentially link this ID to any of the other tables where we want to store the user so let's go back to our public table here that article and let's go ahead and create a new column that's going to have this user information that's going to be linked to our uh users table so I'm just going to say user ID here and we're going to add a foreign key relation and we're going to do it to off and we're going to select users and we're going to select this user ID I'm going to hit save and and now it went ahead and created a relationship this user ID is going to be linked to the other user okay so if we choose to actually Supply the authenticated user when creating an article we will have records of who you know who was the user that created that specific article okay we're going to hit save that's going to go ahead and create a new column here and now if we go back to our table as you can see we have this new column and and so now I can potentially assign all of these articles to myself which is what I'm going to do now I'm going to double click here select myself select select this user here we only have one user I'm going to click here select this here and I'm going to do that for the rest of the Articles as well and so now all the articles are assigned to me and so now when we display the list of articles I can display any kind of information I can get their name email Etc Etc now just to simplify it I'm going to display the user ID just to simplify things because we have direct access to the user ID in order to get other information we have to create a view we have to do join so I'm just going to simplify things and what I'm going to do is I'm going to display the user ID now before I can do that I need to go back to settings I need to go to super base here and I need to get the schema I need to refresh the schema cuz we added a new column so I'm going to do get schema and now this has this user ID that we can use uh in our UI so I'm going to go back here John do I'm going to click here articles row and I'm going to have this user ID which is just a string click confirm and now it's going to have this user ID and so if you take a look at our table here my user ID is this long user ID and it starts with 038 now because my user ID is very very long I'm just going to limit this to Five Characters right five maximum of five characters and it's going to do a cut off right so it's not going to display the rest of the characters so now let's go ahead and reload the app and see if the user is being displayed for each of the Articles all right so now as you can see it doesn't say John do anymore it actually has the beginning of the user ID and as I said my user id starts with 0371 as you can see here 03871 and we go in here all 3871 and now all these articles are assigned to me and we can also do the same thing if one creates new articles and so if somebody clicks on this button and a new article is created we're going to automatically assign it to myself okay and actually when you click on this we have a popup which is this pop up right here and this actually creates a new article so we're going to open it up and we have an insert row call okay and this is responsible for creating new articles and as you can see it has title body num comments and tags and we need to add a new field and this field is going to be user ID so we don't need these fields but we do need the user ID and for the value we're going to select authenticated user and we're going to select this user ID here and that way anytime somebody creates a new articles they're going to be automatically assigned to the authenticated user and that's going to add some accountability to our app right CU now you cannot create new articles if you're not logged in and we're also going to be tracking Who is the person that created this new article okay so let's go ahead and reload our app and let's try creating a new article all right there's our app let's go ahead and click here let's create a new article so new article one new body one click create all right and there's the new article and as you can see it has been automatically assigned the authenticated user which is myself and so there's that authenticated user and so if you go ahead and create a new article it's going to be assigned to you automatically and we can do that very very easily we can simply go back create a new user here in this authentication let's go ahead create a new user create a new user and let's say your name is Tom we're going to do tomtom.com and we are going to add a password Here UT confirm user create user and now we have another user so now I can go back to my app I can log out log out we're back to the login screen I'm going to login as tomtom.com okay sign in we're inside the app and now if I create a new article it's going to be assigned to Tom so new article new title for Tom new body for Tom okay hit create and what do we see we have another user ID which is different than these user IDs and that is because Tom's user ID probably a very very good chance begins with this 8 a 8 AE and so if we go back here and we go to our users table this authentication click on this users we should see uh this Tom's record as you can see this is Tom right here the second record and it's 8 a 8 AE here for Tom all right so now we've added an important piece of functionality to our app and we've added authentication and what this enabels us to do is it enables us to know who exactly is the user that using our app so regardless whether the it's this user this user this user or just about anybody else if they have the right credentials they're going to get access to our app and we are going to know who exactly is the user that's using our app now once the user logs in they have the exact same permissions as the next user but at least we are tracking who the user is and we are not allowing Anonymous user to use our app without being able to log in so this is a big big Improvement but we're still not done yet the next thing that we need to do is we need to set up various permissions inside of the app and so what we need to know is whether this user has the permissions to do various things inside of the app and so let's say one of the users is an admin well an admin typically is able to do anything and everything they can create new content they can delete content they can edit content they have lots and lots of permissions whereas a writer has limited permissions so if an admen can do everything a writer can create new content they can also modify their own content and they may be able to delete just their own content and the next type of user could be a user that doesn't fall into one of these categories okay so this is a user that doesn't have admin rights and this is a user who did not write any of the Articles and in that case they should be able to Simply read the articles and maybe have some other permissions such as leave comments reviews things like that but unlike a writer they should not have the ability to modify or alter other people's content and actually if you think about this is how the real world works right if you are the owner of the house then you have the permission to do anything and everything to that house right you can do anything you can fix things up you can break things if you want it's your house right whereas if you are a tenant if you renting the house then you have limited permissions you don't have as much permissions as the owner you have limited whereas if you're somebody who is not the owner and who is not the tenant you're somebody who is just walking by then you might have very very limited permissions in many cases you can only look at the house you can't come in you can't go inside the house cuz that's TR passing you have very very limited permissions and this is the case with lots and lots of situations and that's why it's very very important when you're building your apps to set it up the right way and when it comes to setting up these permissions in your app that is called setting up authorization as opposed to authentication which is merely checking whether the user has the right credentials to view the app and possibly do more now when it comes to authorization there are three ways to solve this problem the first way is by setting up these permissions at the database layer the second way is to set up these permissions at the app layer and the Third Way is to set up these permissions both at the app layer and at the database layer okay so if you set up these permissions only at the database layer then you will be able to enforce all of these things on only at the database layer which means that yes there's certain things that the user will be able to do or won't be able to do but all the users will see the exact same app they will see the exact same functionality so even if it's like a regular user that cannot delete random articles they will still see that delete button that delete icon except when they click on that button they won't be able to complete that action because they do not have that permission at the database layer you can also do it only at the app layer which means that depending on the user they will see different UI elements and so this is going to be a lot more intuitive and so unlike an admin a regular user will not see functionality that only an admin has access to so things like deleting an article you know editing somebody else's article they just won't have that capability because this is going going to be enforced on this app layer here however if there's some bug in your app or there's some issue in your app and you provide the functionality for them to do something that they shouldn't be able to do and you are not restricting that on the database layer then they'll be able to connect to the database and do the action last but not least you can also do it on both layers and this is the recommended method you can enforce it on the database layer and you can also enforce it on the app layer and this is the recommended way because now not only are you checking your permissions at the database layer you are also displaying the right UI depending on whether the specific user has the permissions to do the specific action and so in this tutorial we are going to be setting up our authorization permissions on both of these layers so on the database layer as well as on the app layer so that way we have a very very robust production ready app now before we actually set up these permissions it's important to understand how authorization works so authorization is not set up directly on the users level it's actually set up on the roles and so the way this works is that you have one or many users that are assigned to a specific role and that role in turn has spef specific permissions to do a specific action so this is going to be permission here and so let's say we have several roles we have the admin role and we have the writer role well once you create these roles you're going to be assigning various users to each one of these roles so let's say you have this user here they're going to be assigned to this role and let's say you have this user here and they're going to be assigned to this role instead now you can assign as many users as you want to a particular role right you can assign both of these users to the admin role and maybe the writer role is actually empty there are no users uh in that role right now but later on when a new user signs up a new user gets created you can assign them to this role and just like how you can have many users you can also have many roles as many roles as you need in your specific app requirement and so now that you understand the basic authorization structure let's go ahead and set up our roles our users and our user to roll mapping and we can do just that by creating different tables so here I am back in superbase and what I want to do is I want to create a new table called rolls okay and this is going to be a very very simple table it's going to have ID created at and the role name so I'm going to say R name and rle name is going to be text and the purpose of this table is just to have our roles to list our roles so I'm going to hit save all right so our table has been created let's go ahead and add a couple of roles so we're going to add a new roll here and this rooll is going to be an admin and another Ro that we're going to add and this is going to be a writer all right so now we have two roles that we have created the next thing that we need to do is we need to create another table that's going to map various users to various roles okay so let's go ahead and create create a new table we're going to call it user roles and this table is going to be using a many to many mapping okay so you may have many users ma to many roles so here I'm going to add two columns and this is going to be the user ID and this is going to be the roll ID and we're going to do an edit foreign key relation so we're going to link that to our users table let's go ahead and select users ID here and this is going to be linked to our roles here are roles and also ID here okay next we're going to click on Save create this new table all right our user roles table has now been created and so now if I want to assign a specific user to a specific role I can do that by simply adding a record so we're going to add a row and I'm going to assign myself to the admin role for instance okay so I'm going to select myself I'm going to select James here and and I'm going to select this admin roll okay hit save and now I have been assigned to the admin roll now I can also assign Tom to the writer row okay so I can add a row and I can select Tom here Tom and I can select the row I'm going to select the writer row okay so now we save that so now we have two records which means that we have assigned two users to a specific role so this is me I'm assigned to the admin role here and this is Tom and Tom is assigned to the writer role okay so now we have the beginning of our mapping so if we take a look here we have this done we still need to create permissions we need to create specific permissions that only allow a specific action to a specific role not to a specific user but to a specific role and by extension to all the users that are assigned to that specific role now how can we do that now at the database level we can leverage a very very useful feature called RLS or Ro level security and this is a superbase feature that enables us find grain control on a rooll level access depending on different parameters so like who the user is or who the role is that the user falls into as well as what the request is trying to do so are we trying to create a new article are we trying to update a new article there's all of these things that can be easily defined using RLS and so if we click on articles here as you can see we have one active RLS policy and that policy allows all access all access regardless of who you are there's essentially no checks being done so if you are James if you're Joe if you're Mike if you are Amanda if you're anybody it doesn't really matter who you are if you can log into the app you can do anything that you want because we only have one policy and that policy doesn't really do anything it's like we have a door we have a gate but that gate is wide open so we have it but it doesn't really do anything useful it just allows everything through right it allows all the operations to be executed okay and so what we now need to do is we need to create specific RLS policies that will allow us to do specific things depending on the role of the user so for admins we want them to be able to do everything but for writers we don't want them to ability to delete other articles we want them to be able to read articles create new articles but not update or delete articles that are not there and so the next thing that you want to do is you want to click on new policy and you have a couple of options you can get started quickly or you have full customiz ation and so if you click on get started quickly you have various templates okay so this is the RLS policy that we're using right now enable read access to everyone right this is the default policy that you have to set up on a table if you're not yet sure uh what you're going to be doing right this is great for testing this is great for kind of debugging but later on as you're going to be implementing these authorizations permissions you need to kind of fine-tune right you need to tailor these part policies now we also have enabled insert access for authenticated users okay so this is a good policy this might be a decent policy but we need something better right so we have enable access on users based on their email okay so you can allow users uh based on their specific email to be able to update articles okay you also have enable delete access for users based on their user ID Okay so now we are getting somewhere right so this policy here will only allow users to delete an article if the user ID matches of the user ID that initially created the article and so actually this is a very very good policy because for writers this is exactly what we want we want to give them the ability to delete articles but only if they are the original person okay so here as you can see it's checking uh of the logged in user uid and then it's checking the user ID in this articles right so if the user ID matches to the logged in user ID it will allow us to delete uh these articles okay so this is a great policy the only problem is that it's based on the user ID we want it to be based on the role we wanted to check the role of the user and then do the proper logic and last but not least we have enabled insert access for users based on their user ID so here they can insert based on their user ID now these are all great policies but because we are building a system based on roles and we've created a bunch of other tables such as roles and user roles where we have the mapping we are not only going to be using user IDs we need to be using the roles as well which means that our policy is going to be a little bit more complex but overall it's going to be a lot more flexible because once we have these policies in place then you can simply add the users to the roles via the UI and and everything is going to work as expected now to simplify things actually ask Chad GPT to create the roles for me so I said I have a table called articles I want you to create the following three RLS policies admin users can create edit and delete articles article owners matching on user ID in the Articles table can create and edit their own articles everyone including nonusers can view all articles and Chad GPT went ahead and created these policies for me now it was also smart enough to tell us the prerequisites so it says here ensure that you have roles table and a user roles table to manage user roles and the Articles table should have a user ID column to identify the owner of each article and so if we go back to our super base and we take a look just to make sure that everything kind of fits in we have the Articles and and we should have a user ID right here so we have the user ID and we have the roles as well here rle name and we have the user roles which is our um many to many relationship where we can assign users to roll so this is exactly what we have and so we can use the policies that it has created for us and so here's the first policy admin users can create edit and delete articles and so we're going to copy this code right here and then we're going to click on SQL edit we're going to paste this query here and you want to make sure that the name of your role matches right so I believe our role is actually capitalized so I'm going to change this to admin and in fact if we open up this table editor here and we click on roles I believe our roles are capitalized so if you take a look here they are capitalized okay so you want to make sure you double check say admin here admin here we're going to run this and see what happens so success no rows return all right so we've just went ahead and created our first policy and this is for the admin roll so the users that are placed in the admin role have wide access they can do all kinds of interesting things including creating deleting updating etc etc and this is great because now I can simply come over here and I can go to user roles and I can see okay who are the users in this admin role right now this Ro ID one which is the admin role there's only one user which is me that means I have full access but if we log in as Tom Tom would have such access now let's go back into articles click on these two active RLS policies and as you can see we have this new policy created we have this all policy here this is that public policy we're going to delete it because now we don't want things to be wide open so I'm going to delete this here and now when I log in as myself because I'm part of the admin role I should be able to do pretty much anything and everything that I was able to do with that wide openen policy all right so now let's go back to our app let's create a new user session all right so here's our app let's go ahead and log in as myself here James james.com all right and here I can see all the articles that are in the system that is because I have access to pretty much anything and everything so if I click here read I should be able to modify this article as well so if I click here I want to modify it so let's say I delete that uh 2024 comparison do a quick change hit save and that should update it okay so looks like I'm able to update let's go ahead and delete this article new article one let's go ahead and delete it okay that article is done let's go ahead and delete Tom's article as well okay Tom's article is done so looks like I'm able to do pretty much everything so essentially I'm able to do everything that I could have done before when we didn't have specific policies now let's go ahead and log in as Tom okay we should not be able to do lots of things as Tom because Tom is actually in another uh role and so let's come in here let's log out and let's log in as Tom here Tom tom.com let's go ahead and log in and what do we see we don't see anything we do not see a thing and that is because there's no specific policy that allows Tom to do anything there's no policy for Tom and policies are exclusive right if there's no policy then tough luck you cannot do anything and so I can come back over here I can see the account screen but I can't do anything I don't have read access I don't have write access I don't have delete access I don't have new access I don't have update access I do not have anything and that is because we still need to create a policy for another role the writer role now for the writer role I was also a ble to get Chad GPT to generate the SQL statements for these new policies so here's a policy for creating new articles we're going to copy it right here go back here go to our SQL editor and paste this new policy and this policy is called insert article and this is for the Articles table this is only for the insert command which is what you use to create new articles and first it's checking whether the user is in the right role and actually rolls this should be rore name everything else looks correct we're going to run it and now we've created a new policy that allows the writers to create new content so if a user is in the writer role they should be able to create new content but we're not done just yet we also have another policy for editing and deleting own articles and this is a policy for the writer role where the user is able to update and delete their own articles if they're the owner and if they are part of the wrer role as well so we're going to copy this right here come back to SQL create a new query paste it in here so this policy is called update delete on articles articles update and delete okay so this should be R name as well let's go ahead and execute it all right now it says success no row return and last but not least we want everyone including a nonusers to view all articles okay so we're going to copy this right here and we're going to come back here and we're going to create our final policy we're going to paste this here and this policy is called view all articles and this is only for select which mean this is a readon view and there are no checks that means that it's going to go through okay we're going to execute this success no roll return and now our access control system is a lot more tailored it's a lot more fine-tune as to who exactly the user is not just any logged in user and what exactly they can do on what kind of data okay so let's go ahead and run our app and let's see what's happening here okay all right so here we are logged in as Tom and Tom should be able to view all articles but he can only edit or update their own articles Okay so so as you can see Tom does not own any of the Articles right now and so if we click on any of these articles they should not be able to update them so let's say this comparison this is my user ID right this is my own article so if I click on read now I can read this article as Tom but I should not be able to update it so if I click here I shown the UI so looks like I'm able to update these articles but the back end should not allow me so let's go ahead and change this so let's change no update okay let's go ahead and click save and as you can see it did not save and that is because the back end did not allow me to save this article that I do not own let's try another article how about um this one this is also not my article this is James article if I click here and let's say I want to update it I can just click here the UI once again gives me the impression that I can update any article that I want but it's not going to work so let's go ahead and just remove all that five apps no update okay so that we see whether the article was successfully updated or not let's click on Save and nothing happened okay so we have the impression that we can update the article but our system is fine-tuned in the back which which uh disables the ability for somebody else to come in and update these articles now we should be able to create a new article and we should be able to update or delete an article that we own Okay click here new article times title Times article content and looks like there's some issue here okay because it's not creating this new article and if we go back to our policies let's go ahead click on article let's see what the issue is we have a policy called insert article and if we click here we edit it looks good except it's checking for a role called right and we do not have a role called Write we have a role called writer so we need to update it we need to make sure sure it's the right role cuz we don't have that role so that is why it's not finding the user should be writer review save policy okay so that was updated so now it should work okay let's go back and let's go ahead and create a new article so Tom's new title Tom's new body create and we should have it and there's the new article and there's the Tom as the owner now we can click on this article and we can also update it right because we should have that permission actually we need to double check that the roll is correct so if we go back here this is this update on article edit and it's right again it should be writer let's go ahead and fix these um policies here update delete on article we need to fix that too as well writer save that okay so that was saved now it's in effect let's go back here and we should be able to update this hit save and as you can see this was updated right which was not the case previously when we tried to update somebody else's articles and so if you go by here and you want to update my article you can click here put something like this and you shouldn't be able to do that cuz you do not own that article hit save and nothing happens okay because it doesn't update it the database does not give it the permission right there the database is we're being restricted um at the database level from doing this right and this is very very important so right now we have everything working fine we have various roles we have users assigned to each of the roles we have various permissions everything is working fine and so at this stage of the game we have database layer locked up we have it locked up with the right permissions with the right restrictions uh that are set up according to our spec right we have various roles and these roles could do various things but as you might have noticed uh the UI still behaves like a user can do anything that they want cuz everybody sees that delete button everybody you know if you click on update you get that update UI and so users can get confused when they see that they think it's an error if they click on the delete button they can't delete an articles because it's not theirs and nothing happens uh it's bad user experience and so not only do we need to lock it up at the database layer we also need to lock it up at the app layer as well and so let's go ahead and lock it up at the app layer as well and actually locking it up at the app layer is a lot simpler than locking it up at the datab base layer all right so here's our app and the first thing that we need to do in order to lock it up and kind of restrict the UI and have this new you know delete button only accessible to users that own the article and have the UI working is that we need to understand not only who is actually logged in but what are their roles we need to know the person's Ro roles and we can easily determine the logged in users roles by asking super base okay because we know who is logged in super base has all the information we have the tables we have all of that set up the only thing that we need to do is we need to make a call to super base and get the roles that the user may fall under okay and we can do that by sending in an API request so if you go over here you have this API section where you can Define and execute various API calls and which API call are we going to be sending in order to get a list of roles well that's actually very very simple if you go back to your database you go to your tables you have the all important user rolles table okay so if you come over here you can execute an API call and you can see exactly who the user is and then what role there are right so take a look here you can click on API docs here and you can do filtering right so that means you can send a request and you can say well I am logged in as James at james.com tell me what roles that user has okay so here we have filtering and what I'm going to do is I'm going to set up my key so now so now I have my request with filtering and that way I can just copy it and here I have an app that allows me to test various requests so I can import this request over here and I can send this request with the user ID with the email and that's going to tell me what roles the user in so I can send the user ID I can send an an email I can send an anything that I want and so here we have the request fully configured and let's go ahead and do some filtering okay so we're filtering by ID and we're saying ID is equal to one and we want to select everything right we want to select everything so let's go ahead and ex execute this and see the response here okay and this is the response here and we're getting back this roll ID okay so we're getting so we're passing in the ideal one I can also pass in of course in your app you're not going to be passing id1 you're going to be passing this user ID so what I'm going to do is I'm going to change this uh user ID filtering equals to this and if we send that we get the same thing except we get roll id1 now roll id1 is not very very helpful to us right we actually want to know what is the name of the role right is it an admin role is it the writer role is it the reader role one is not very very helpful and so in order to get the names of these roles we need to create a new view for this table so we're going to go back here and we need to create the view that's going to have essentially the same information but we need the name right the name of the role and obviously if the user belongs to multiple roles we want these roles to be displayed in one field and we can easily do that by creating a view so let's go back here let's do a new query and we can use super Basi to build a specific view that does that create a view that displays the user ID and a list of role names they belong to okay so let's go ahead and execute this and let's see if it's able to do and there we have it okay so it's is creating a view called user roles View and it's pulling up all the information and it's also joining it on the roles table that has the names of the roles let's go ahead and accept this change let's go ahead and run this and see if this works success no rolles return that's a good sign let's go back to table editor and we have this new view here click here and we should have the names of the roles and as you can see it's an array so if a user potentially is in multiple roles roles then this is going to have multiple names of these roles right now we have each user in its own role but if I go ahead and add myself as a writer as well or you know some other user is in multiple roles this is going to have multiple roles which is very very helpful for us but this is enough for this specific use case and so let's go back to our app and leverage this view here in order to figure out where exactly this user is what roles is the user a member of so that we can show them the appropriate UI so let's go back here and let's go ahead and create an API call and we're going to call this API call get user get user roles and we have this request here so we can just copy this request here paste it in here this is actually user rolles view I believe it's called it's called user RS View and let's go ahead here and we can just add this call here and now we need to add our header and we have these headers here and let's go ahead and add our headers this is the API key we also have authorization and we have this range right so you want to be using everything right everything that you have here and we don't have we have Ur all parameters that's for filtering right we need to filter it but right now let's go ahead and test it and see if it works okay so let's go ahead and response and test and that way we should get all the users and all the roles that they belong in so test API call and here we are right so this is the user ID and they're a member of this writer role and this is another user ID and they're a member of this admin role now of course we don't want to get all the users we want to filter by the authenticated user right we want to have the ability to filter these users and so let's go back to call definition and let's add a variable going to be the user ID and this is a string hit save and now for the query parameters we can use this here this Ur all parameters we're going to going to have this user ID and we're going to have select which is what we want we want to select everything specific value and here for the user ID you can just set it from a variable which is that user ID that we've defined here and for the query parameter this is going to be the query parameter here click save now for the user ID this should not be the actual user ID this needs to be EQ do and the user ID and and now as you can see we are only getting the information for this specific user now if you scroll down you can capture this Rose information right you just need to capture this you want to add this to Json path save this as user roles hit save and now we're going to have this user roles information in our FL of flow UI which means that we can take conditional action depending on if they are in this role or in that role or here or there all right so the API call is complete the next thing that we need to do is we need to execute it when the user logs into the app and we need to store the resulting roles in an app State variable so it's available throughout the app so let's go ahead and Define our app State variable we're going to do user roles this is a list of strings and let's go back here let's go back to our homepage and let's execute this API call right at the top so as the page is loading we're going to be executing this call add an action API API call open and now we're going to execute this API get user roles we're going to add these additional variables and remember it's not going to be the just the user ID we need to actually prepend it right so if we click here the value is going to be EQ Dot and then the user ID so we need to combine text and it's going to be something like this I believe EQ Dot and then the user ID and then click here we have the authenticated user user ID confirm and now we have that here and so if the API call is successful we want to save the results the roles in our app State variable so we're going to click here App State update App State user roles set value and we want to get the action outputs we want to get this and remember we have Json body but we also have Json path we have predefined path okay so we can select user rules that we have defined and that will save it to App State if we have an error then it's it's good practice to do an informational dialogue box that will display everything right all the results so you can do action outputs API response uh and you can do Rob body text and so if you know in rare cases where you have an error you can see exactly what the error is and so now when we run the app the user is going to get authenticated and once they're logged in the app is going to add super base for the roles for that authenticated user so if I'm logged in it's going to come back with the admin Ro if Tom is logged in it's going to come back with the writer rle and so now flut oflow will have this crucial information right it's not only going to know who is the user that's authenticated it's all it's also going to know which roles the user is a member of and so now in your apps UI you can use various conditional logic to display or not display various things so as an example let's say we only want admins to be able to create new articles here so that's very very easy you can select this button and you can only show it to people that are admins or of admin rle go ahead and do that right now click here conditional and now we can search for user roles and we can say list contains item which means list which is the user roles contains this specific role that is going to enable this functionality and in this case this is the admin role right so you can click here and you can do something like combine text and you can put admin admin here okay so so confirm confirm and this thing is now conditional it's only going to be displayed if the user is of the admin role okay so let's go ahead and test it out let's try logging in as myself or logging in as Tom and let's see if you know we're able to see that button let's go ahead and restart our app all right so here's our app and as you can see we're logged in as Tom and Tom does not see that button because Tom is not in the admin role so Tom can do a lot of things but there's certain things that he won't be able to do even via the UI not to mention via the database because that has been locked up but he cannot do various things via the UI let me go ahead and log out and log in as myself and I should be able to see that new article button so let's go ahead and log out I'm going to log back as myself and as you can see I'm logged in as myself and I can see this button so I can click on it and I have that UI functionality not to mention the backend database permission to actually go forward with this functionality and actually create new articles on the database level now one useful thing that you can do is you can go back here and you can go to the profile page and you can actually display the role here for instance right so if you come over here you can do a combined text and you can do roll uh text come over here and we have this app State here user roles and let's say you want to display the first role the user in okay obviously we only have one roll for each of the users so this is going to suffice click here roll and this is now going to display the user's role let's go ahead and restart our app and this is good practice in order to see whether we are getting the right roles from the back end and whether the role is correct for the user you always want to be doing this uh as you're developing the app all right so here we are we see this uh new article um button there we come over here and as you can see it says roll admin and if I log out and I log back as Tom it should say roll writer let's go ahead and log in I no longer see the button and I come back here and it says roll Rider and so now we've come back full circle we've locked it up at the database layer and we also locked it up at the app layer as well and so regardless of what the user is trying to do they won't be able to do a database layer cuz we have these Ro level security policies in place and they'll also won't have the access to the capabilities to the functions uh on the UI layer right cuz they just won't be able to see the UI elements if they're not part of the right role and so now that we have all of this set up it's actually very very easy to add more users or to remove users from a particular role so if I go back here to my user roles here and let's say I want Tom to also be part of admin and be part of ryer roll as well so it's actually very easy I can just come back over here insert a row and I'm going to add select Tom here we're going to find Tom this is Tom right here and I'm going to add Tom to the admin R and now Tom is going to have access to every single feature and functionality that's available to me as well so I'm going to hit save and now we've added another record right so now we have two roles two admin roles uh this is me this is Tom Tom is in two roles I'm in just one roll but nonetheless now Tom is also able to see everything that I see so now let's go ahead and refresh our app here let's go ahead and reload our app and here we are logged in as Tom and we have access to that new uh article functionality come back here now this here is still displaying ryer and that is because we are only displaying the first role okay if we display two roles it's going to have ryer an admin there as well okay so if we come back over here and let's say we add another role we come come here we copy this we come here and we paste this and we say Okay I want to display this the you know the the second role okay so if I do this we are going to see two roles here all right so here's Tom come back over here and now you're seeing ryer and admin as well we should probably add space there but you do get the picture and so thanks to these fine grained access controls thanks to super base RLS thanks to flutter flows conditional widgets you can finally create really really robust apps that give different permissions to different users based on what kind of role they are a member of and obviously this is going to be useful in all kinds of different applications right tons and tons of different applications whether you want to create a dashboard uh you want to create some kind of a you know a Blog platform a Content management platform some kind kind of a uh social media site with moderation etc etc even come to think of it many of the apps that I've built before on this channel they can definitely benefit from this functionality and the best way for you to benefit from this functionality is to be able to view Andor clone this app and you will be easily able to do so when you join our amazing patreon community and when you join our amazing patreon Community you're going to get ACC to this exact app that I built here which means you're going to get a head start I'm also going to include my chat GPT conversation as well as my superbase schema so you're going to have everything that you need in order to get started with authorization or multi-tenant apps apps that have various functionalities various UI elements various permissions depending on who is car currently logged in so I think many of you are going to love this functionality and you're going to be excited to be able to view and or clone this app as well as get access to a ton of other resources that I work hard in order to make it all come together plus as always when you join our amazing patreon Community you're also going to get access to every single other app that I built on this channel I built over 150 apps so far you're going to get access to all of them so if you're working on another app you need another piece of functionality you need to learn how to implement this specific feature or that feature chances are I've done it before so you'll be able to easily clone one of these other apps and adapt or Co-op some of the features that I built in your apps you're free to do that there are no issues at all it is my way of thanking my amazing supporters and that's not all when you join our rapidly growing patreon Community you're also going to get access to some extra content so things like q&as behind the scenes content as well as our patreon supported masterclass Series where I do deep Dives on important topics that the community cares about and in fact just recently I did a Q&A I did a deep dive on this very very amazing and promising tool that a lot of people are very very excited about and frankly asked me to come up with a deep dive tutorial and that is exactly what I did so a lot of people got a ton of benefit from that tutorial as well as that Q&A and some people even said that even though they didn't ask any questions uh that they wanted me to answer uh they still got a ton of value from that Q&A presentation as well and above and beyond when you join our amazing rapidly growing patreon Community you're going to be supporting this Channel and supporting my work and that is greatly greatly appreciated so if any of that sounds like it's going to provide you with some level of value in your no code Journey as you're growing your no code Arsenal as you're building more and more apps gaining more and more experience I definitely urge you to check it out and consider becoming a member and you can do just that via the link just below this video

Channel: James NoCode

Views: 2,813

Keywords: supabase authorization, supabase user control, supabase access control

Id: A--UI93tGbM

Length: 63min 25sec (3805 seconds)

Published: Wed Dec 27 2023