Next.js Server Component role base access with Supabase

all right so welcome back to the low coding so in today's video we are going to continue next year server component with Super Bass and we're gonna do the roll base access and data fetching so there's three things that we're going to do in this video so first we're gonna do try to Auto create user when on sign up and Define their roles default roles and the second part is we're going to do page protection based on the role so right now I have created an admin page so as you can see right here this page is does not have any pitch role access protections right now so that's why anyone can just go to this one so we're gonna do the page protection let's say if you are an admin you can be able to access to this page and the third part is data fetching based on roles so let's say for Imagined uh when you are at an admin you can be able to fetch any data you want right so we are going to working on that all right so and then we continue with our code boilerplate right here you can find this one uh in the githubs that are Link in the description I went ahead and created a couple page a couple things I'm going I explained what I just added so if you clone you might not get what you see right now on the screen so the first one is right now is going to be the admin page nothing fancy here just create a new folder and with the page.tsx right here and this code right here just display the H1 that's what you can see on the screen on the your right side right here and the other one thing is going to be on the US page so if I'm going to log out right here so you can see there's a sign ups user right here so inside the auth page right here you can see and then type the ask component and we have the new button is just Chris sign ups new user and then and we have this one right here just a very basic function just to sign up the user and because I just because a thing we do with some multiple user and role-based access we should have multiple user and this one login with GitHub I don't have multiple GitHub account that's why I'm just doing this one all right hopefully it's clear on this one okay so now let's go back into our to do so the first one this is what we're going to do so right now when we log into the GitHub so we are going to create a user so if we go into the Super Bass and it's authentication right here and as you can see we have this user right here so whenever we do log in on that we create the user right here but this is not what we want so we wanted to when whenever we uh create a user or sign up the user we should be able to have the record inside our table data so that's what we're going to do so first of all we're going to create a table so the table is going to be user and then so for this table it's going to be really simple so I'm going to go with the uuid and then for now we're gonna keep just the two columns only and when you work on a real scenario so this user should have more column best on your need all right for now it's just mixing everything simple so right now we have this one so once again so we're trying to create a user so for now I'm going to delete this user and then so what we're going to do is like whenever there's a new user into this table right here we are going to insert the record into this user table and then with the role so I think I should create a role for this one as well and then we can have our default value is going to be just a normal user and the type of this one should be text so I forgot it's just this one that hopefully I can hit save so right now you can see uh we have to roll but default is the user all right so right now we have this one let's do the automatically create a record when user sign up so to do that it's pretty simple we're going to use is we're going to use something from Super Bass it's going to be called functions and Trigger right here so you can see right here we have function and Trigger so so right here there's no function so we're going to create a functions so this function what we're going to do is like create uh user on sign up and then there you go and then you can with public schema and then this Y is going to be trigger since we're going to use this one with trigger and so for this one it's going to be these query SQL query that we're going to do and I'm going to copy and paste right here so and this one you can find this one from the go to Doc description I link everything that I get from to get why I have this one right here and it's much better explanation than me but I'm trying to explain what it does right here so what it does right here is that I think this one should be going to the user and then so let's go and just two with the ID so this one uh the definition right here it's going to insert into the user or the table that we just created earlier and with the ID of the into the column ID with the new uh what is the value here it's a new DOT ID and what is new DOT ID right here the new DOT ID right here will be the ID from the US table right here so if we go to authentication so when we create this user we're gonna have this user ID right and then that ID will be the new DOT ID right here and we'll insert into our user.id and that's what it does right here and you can actually add more data into here for example right here because our table right now is pretty simple we have only the ID record only and then with the role so that's why when we Auto insert we just are the ID right here if you have more one you could you will um do more things right here and the best way to learn more about that the link in the description all right so for now we're just going to go into show Advanced setting and then this one should be choose to Define it if you choose this one it will get permission in that you make sure you choose this one all right okay so then we click confirms and hope everything is fine right so now let's go into trigger so we're going to create the trigger and to trigger the function that we just create and the name right here you can name whatever you want I'm going to just do create um let's say users on sign up again and then this one is going to be trigger fire so what this happened is like what uh let's say when it's happened to this table whatever table that you choose it's going to trigger the function so what we're going to interested in is going to be the user auth right here make sure you choose the right table the user us which is this one right here and then you're gonna click on the insert and make sure you do after and then this one is going to be raw and then you're going to choose the function so we're going to choose a function that we just created earlier all right so with this one we can click on confirm so right now everything is finished so what we have to do right now is we're going to go back into our UI and right here so whenever I click on either one of these functions this two button right here it will go going to Auto create the user for me so right now let's actually test that so I'm going to click on login with GitHub right here all right so right now we are login and if we go back and here you can see if I refresh this one I should be able to have a new user so you can see I have created and with this uuid right here and then if we look at our table of the user right here we should be able to see one record so you can see right here we are Auto create this one I think with this one let's actually see I think this one should Auto for me and then default while you should be user right and I'll see so because right here I do not have the value of the auto so I'm gonna edit right here the auto should be user and I'm going to click save against so this one I'm gonna edit the by manually and all right so let's try again so I'm gonna log out from this user and I'm going to create sign up with this user so if you look at this sign up with this user so with we're using fake email and fake password and if you if if you are unable to click right here and run you have to go into your off authentication you go to your provider and then go to your email and you can see right here I disable every secure things right here if I just enable the confirm thing right here it won't work because when I click on signed up Super Bass will try to send the link to that email so I just disabled everything right here just click on this one that's why it's I able to click and sign up so but make sure when you are not production make sure this one is turned on based on your uh functionality need better your business okay right now let's actually do it so I'm going to click on signed up this will do the same thing it's create a new user so right now as you can see I'm logging if we go back into our table we should be seeable to see another record of the user alright so as you can see right now we have a new user right here and then we with the default Rover key of the user okay so right now we are complete our checklist let's go back in here we are autoing create a user record with defining role okay so now we're gonna do the page protection that's on the role right here so now let's go back into the admin page so the admin page right here we do not have any off uh even the session protection so we're gonna do first we with the set the protection first so similar things to the other page if I'm going to go back here so what we need the first thing first is we're gonna get the Super Bass client right here I'm gonna make it the larger this one so first I'm going to copy everything from this one and let's go go into our admin page and we have this one make sure I'm copy from this one as well all right so it seems I missed the I right here all right so right now we have this one this page should be an a things and then I need to do the redirect as well alright so right now as you can see nothing we did not do any roll just yet but this one is supposed to whenever I let's say for example check so my role is user right so and then I shouldn't be able to access to this page so first I'm going to access to if I try to fetch this data and then whenever I on this page and check the role if the role is much and then we're gonna stay here it's not just redirect somewhere else first we need to do some policy let's go into the new policy and get a quick start so I'm going to choose this template I'm going to edit this one so instead of delete we can just do read and then we're gonna do select and the role it should be authenticated and then we're going to do the user ID should be off dot the ID right here so this one it shows this policy uh right here is just tell that um however that has their same ID at the off the request ID much this ID can be able to read this record right here okay so with that we can just call this functions right here and I'm going to just do copy and paste right here instead of test it's going to be user and then the star right here which yeah we're gonna create everything and then we're gonna choose the single only and the data right here should be user record and then if we try to show this one and then let's do the jsons dot stringify this data and then it's going to be node two so right now if I if you can see right here if I we can see we have this record right here so right now you can see we have the role of the user right so with that said you can just do check condition if there's a user dot roll and then the role is going to be I think we can just do something like this it can be null as well uh let's say we can do something like this if there's a user.roll and then the role is going to be equal to is not equal to admin we're gonna redirect them to the page the home page right here all right so right now if I save this one it's going to redirect me back here that's pretty much it that's pretty simple on how to do this one so either if I were to chain back into this user I'm not sure which uh what user that's actually doing this one so maybe this last user that we just created so I'm going to change him to back to admin and then if we try to access to the admin page as you can see we I am an admin I can access to this page all right so let's go back and switch the user so right now I'm gonna log out right here and then I'm gonna log in with this user using GitHub instead so right now I'm accessed to this page and then if I'm going back to the admin page I won't be able to because I don't have the permission to do that so with that said we are finished with the page flow protections so voila so all right so next so we're gonna take a look at data fetching based on roles so this one is for for example you have your post table and your post blocks and then as an admin you should be able to read all of the record inside the tables and and if you are if a normal user you are just be able to read as your own data only alright so let's do that so the first thing first we're gonna do is we are going to create a new table so you can see right here I have create a set at a post table and then we have this pretty simple so first we have an ID with uid and a title it's going to be text right here and then the uid uh the user ID right here will be in relation to the public user and with the ID columns and then we're going to do Cascade as well so let's hit save this one and then let's actually hit save this one alright so right now as you can see the post table is created that actually going to insert the table right here so I'm not going to create a code to insert this one so this way we do this way it's a little bit quicker so the ID will Auto generate for me and then this one is going to be this post is belong to admins all right so we're going to select this one and then we're going to select the admin ID to this one and then we're going to insert another row which is like this is not uh admin posts okay so we're gonna select the user ID right here so I'm going to hit save this one as well so right now we have this post right here so we're going to do the data if I change to this one and then let's let's see uh how we can do that so on the admin page right here if I'm going so let's go back to admin page let's actually try to fetch some data inside uh this one right here so and Below right here so I'm going to try to copy it and reuse the code that I have right here so instead of the test right here we're going to do Post now we're going to select star and we're going to do Post right here so like now and then if we you should be able to have this post and then let's actually do the post right here so I'm going to hit save this one and then you will see there's a problem right here so let's actually re I'm not sure we should oh you can see we have nothing so why do we have nothing right here the reason is because uh by default we need to set up some policy to protect the user data this is enforced by Super Bass and it's really good practice to actually do it when using with Super Bass so right now we're going to create a policy and then the policy that we're going to use is I'm going to use the existing template this one right here and save and then instead of they just want to delete we're going to do read and then we choose to select instead so this one we read best on the user ID and this is what we and then I wanted to enforce the role this authenticate as well and this one is just conditioned to check if the user has ID the request is coming the IDE equal the the column there's user ID that we have we're gonna able to let the user read I'm going to hit save this policy and as of that right now as you can see if I refresh this one I be able to see only one records only which is my post that belong to admin but since I am an admin right so I am an admin so this account is the admin so I should be able to read all of the record I have but with the policy that we set right now it's only be able to reach their belonging post only so to do that we have to update this policy so you can see right here we just check the user ID only it's pretty simple so we need to check their role within this policy as well so to do that we can just do all operator and we can do selects the role from publix.user so our user table right here that we just create and with the public right here make sure the biggest there's a user right here is a public table and then we can check where the ID of the user is going to match these off that uid right here so what this one will do is actually trying to get the roles from the uh the user that's coming that request and then we can check if this value is actually equal to the admins value so we can do admin right here and then now I'm going to wrap around this one one more time and then I'm gonna hit save right uh review and save right here hopefully everything could work right now as you can see our policy is working and now let's actually go back so you can see right now uh when I get back I fetch all the data so we'll actually refresh this one so as you can see right now I be able to fetch all of the data right here because I am an admin so without a record with the whole policy set that with admin role I can be able to access so let's make sure that the other user won't be able to access the admin data right so to do that let's go back into the our home page right here and then let's do the lockout and log in again with the USI app so I have created the functions to sign up this one so as you can see right here I have created new functions button right here login and then we're going to do login with the email address that we just created earlier so I'm gonna click on login right here it should redirect me here and if I go back and then check the admin page I cannot do it because I'm not an admin and let's actually go into the code of the admin page and try to fetch the data inside this page right here so inside this page we can do the same things and then we have the post and then let's actually choose the post uh inside to display this one right here all right so right now as you can see right here I be able to page that is not belong to admins only so I cannot access to the patient belong to the admin okay so right now I think that pretty much it guy so we're going to back in here and data by chains and best on roll and we are finished so I think we finished our goal in this video so hopefully you learned something from this video so this is still a very simple application there's not much going on right here but we have Bill or crown uh boilerplate that can be used as you can see right now with paid protection admin protections and role access data and things like that so in the next video we can try to build more real world application that make it even better so I'm still thinking drafting about the idea but uh yeah so let me know what you think and let me know in the comments hopefully you like this video and hopefully you like more to see more video like this alright so see you in the next video

Channel: Daily Web Coding

Views: 14,073

Keywords: supabase, server components nextjs, nextjs, next js with supabase, nextjs clerk supabase, nextjs supabase, supabase and nextjs, crud with supabase, supabase react, supabase database, client components nextjs, clerk supabase, role based authorization in nextjs 13 and next-auth, next.js, supabase tutorial, react supabase authentication, supabase authentication, supabase role base access, next.js role base access, next.js server component role base access, next.js 13 page protection

Id: WUD1RLSd3U0

Length: 19min 48sec (1188 seconds)

Published: Wed Apr 26 2023