Build SaaS Boilerplate with Next.js, Supabase, React-Query, Stripe, Shadcn

everyone this is the full video that we going to learn how to set up a next spoiler plate with super base so we going to learn how to do authenication with Google and GitHub and you're going to learn how to set up with react query and for the UI component we going to use a shat CN and last but not least we're going to connect with stripe that the user can do subscription and they can cancel that subscription as well and then we going to create a web hook that will call to the super base to update the user information regarding their subscription all right so I'm so excited to show you how to build this one so let's get started in this part what we're going to do is to set up the installations and also build the rui as well all right so don't forget to like And subscribe so let's start coding all right so first we going to install nextjs you can go into nextjs documentation so I'm going to copy this Command right here and go in my terminal I can paste and run this one right here I'm going to press y right here you can give your project name I'm going to name this one like JS super base boiler plate and we going to use types scripts is yes tell win yes sree I'm going to choose no this one yes and this one no all right so after that we can go CD into next super base boiler plate and then we can open with Visual Studio code all right so this is the boiler plate that we just created it and so right now let's go back inside our documentation so the next thing that we going to do is to install a shn so for that you can go into shn documentation and then search for right here you can search for installation and choose nextjs this PA right here we have done it already so we can skip to this part so I'm right now I'm going to copy this one choose npm and we can come back right here so I'm going to open my terminal right here and then so I can paste this command and run this one so right now this is like the default two style so we can choose any style so I'm going to choose with the default and this color I'm going to choose zins right here this one I'm choose yes and so right now it will install everything that needed for us great so the next thing that I wanted to do is to adding the dark mode to this one as well so for that let's go into the dark mode so you can search for dark mode choose sjs and we can do this one so I'm going to copy this choose npm come back here I can run this command again so npm install next seams so the next thing that we need to do here if we need to copy this one and create this file right here right now I'm going to copy this one and come back here inside our lips uh component right here I'm going to create a file themes provider. TSX so then we can just paste this right here so right now let's go back inside the application and go into the layout this is where we going to use this one so for this one go into the documentation so this is how to use it right now I'm going to copy everything that we have here and then go inside what we use Studio code and then I'm going to replace everything right here so right here we can remove this one and so for this one you can do control dot so as you can see right now we can select the file so this is the seam provider that we just created and we hit save and also for this one we need to supression the warning as well so hydration warning so do this one and as I'm now for the dark seam at this one I'm going to choose the default as the dark seam as a default okay great so right now we should be about to see this one I'm going to run npm run Dave so this will start on Local Host 3000 and right now let's go and Ty here and navigate into Local Host 3000 so as you can see this is our application and it's up and running so the next thing that I wanted to do is to change the Sims of our Shi end and if you go into the seams right here you can choose any color that you want you can customize it as well so before we choose this color right here and this default also you uh default so you can choose the New York or default and any color that you want and so right now let's I'm going to choose this color right here and so the way to to do that is just copy this one go back inside your with Studio code and go to Global CSS and this is where we going to replace everything that we have here so right now I'm going to replace the layer base right here and then I remove this one and I just paste this one right here and also I need to remove the darks as well the dark Seam for this and we can just remove this one right here so we hit save right now we should be able to see this one very nice and right now let's install the bhong and then to check whether this setup is complete or not right now now let's go to won and let's go copy this one npms and open your visual to your code terminal I'm choose another terminal right here so I can paste this command so I can run this one so right now it will install the Bon inside my application and also you can see this one right here very nice so right now let's go inside the page here I'm going to remove everything and inside here here we going to have to use the Bon that we just uh install and so we're going to do hello world let's hit save and right now let's navigate back right here if I refresh this one so as you can see we should be able to see Aon so you can choose any style that you want right here so with a different any color that you want all right so right now let's create the O UI so for that let's create a new page I'm going to create the o and inside here I'm going to create the page. TSX and we can run a snippet OPC so right now let hit save this one let's go back and then you can navigate into the O page so you can see right now we have this one nice so the next thing that we're going to do we're going to create the layout for our o component so for this one I'm going to give this one a flex item Center justify center with full height to screen and because this one we want to push everything to the center and this is our o component so this is going to be for now I'm going to give the width of this one 46 uh and then height this one also 96 we're going to do round it on the we're going to do border and so we're going to do the PE fire as well so let's hit save so we go back here we should be able to see this very nice so right now let's going back here so for this one I'm going to give a text and this one is going to be next plus super base and then let's give it the style I'm going to give the tech of this one to 2 XL and the font of this one is going to be B and also for this one we're going to have another text right here is going to be let's say register today register or sign in today maybe we can do this one or sign in as well register or SL sign in today and this one I can use the emoji so for the Emoji I'm going to come back here and right now we can copy so if you on Mac you can just use your own Emoji so as soon I'm on window this is how I do it and right now let's hit save this one if we go back right here we should be able to see this okay very nice so right now let's add some icon and change this one so for inside the next title right here I'm want to add the icons so the icon I'm going to use from the Lucid react so this is auto install for you when you install shaten if you go into your code right now and then search package of Json so as you can see the Lucid react is in Auto installed for you so right now I'm going to choose this icon right here and I can copy the jsx let's go back into our code and import this one so I'm going to import this one right here so right now we can just do control dot this will Auto Import for me and so right now I need to wrap around this one so because these two need to be together let's do class this one to flex and then we're going to do item Center let's do gap of this one to two and for the text right here I'm going to do the text this one to SM and let's do the text Gray of this one to 300 and for this one I'm going to do the space y of this one to five right now let's go back in here so let's go back here so you can see we have this one very nice so now let's create the bong for us to lock in and so for that I'm going to create another div right here or maybe we can we don't have to so we can use uh I think I mess up this one and so for this one we can use the which is install and so right now this will Auto Import for me okay I made the mistake here so you can see this is Auto Import for me so right here we're going to do lock in with githubsign of this one let's give it a block with of this one is going to be full and for the variant of this one I'm going to choose it to be outline so maybe I can just copy and paste this one and then we can change this one later okay really nice so right now we should be able to see this so so for this one let's add the logo to this one and if you go here you go to GitHub so if you search for this one we have this but I want another logo so for this one we can maybe use reacts icons and then we can search for the icons right here so this is this one and to install this we can just copy this command and let's go here and paste and run this one right now let's search for Google icon so as you can see there's a lot of Google icon I'm going to choose this one right here so I'm going to copy this one and then let's paste this one right here and this is how we use this one so I'm going to place it right aside the Google and then we can do style one is going to be Flex items Center and then let's do gap of this one to two Okay I think maybe we we don't need to use this one okay so I think for that we need to add a div right here and then for this one let's do a flex of this one and then let going to do the flex Co and let's do gap of this one to five okay so right now if we go back here so we should be able to see the same things and so right now let's try to add another icon for our GitHub so for this one let's do with the GitHub right here and I'm going to choose this one so we can copy and we can come back and paste this one and we can do the same things so maybe I can just copy and paste this one right here and then we can I can just replace this five ion and then we can do the GitHub right here and now we can come back and we should be able to see this very nice so right now we can have we have a lot of space left so since for now we can focus on this two first and later we can add more like a magic link but for now I'm going to remove this high right here so you can see we result in this right here so right now what I wanted to do next I want to add the glow box to behind this one so for that as you can see this is I found this one I left the link in description as well so we going to add this glow box right here behind this one right here so as I'm now uh what I'm going to do I'm going to copy this go into the globall CSS and then I'm going to create a new class it's going to be glow box and then we can paste this one right here so with this glow box so we can come back here below this one I'm going to create another div and I'm going to give the class name of this one with the glow box when we add that we need to add this one with the relative so now it will relative to this component and this one we need to do the Z index my 10 as well to make sure this one is behind and so right now if we come back so we can see there's a glow Bo right here right now we need to set the background to our box as well otherwise it will result in this one so for this one I'm going to give the color of this one it's going to be BG slate let's say 900 and as you can see right now it looks something like this very nice okay so I think that's pretty much it so as of now later we can add more authentication method but for now we can skip this for now okay so in the next part we're going to work on do authentication between these two all right see you in the next part all right so in this part we're going to set up with super base and then we're going to do authentication with GitHub and Google as well so to do that first we going to create a super base project so you can go into super base and create a new project so I'm going to create a new here I'm going to call this one next- super base and right here we're going to to generate the database password so make sure you copy this one and right here for the reges right here make sure it choose close to your reges and right now we click on create new projects so right now while our project is uh setting up so we can go back inside our code right here and then we going to I think for the we going to create a newv local and this is where we're going to store the database that you just create you can put it right here as well okay so now everything's uh almost complete so the next thing is we're going to do is to set up this one so you can go into super base oer but this one as you can see it is recommend to use the new package inste so instead of the oer so for that you can go into the migration doc you can click on this link it will redirect you to this page but I suggest to go into the click on create client right here all right so right now you can open this one in the new tabs all right so this is what we need to do so first we need to install this uh package right here so we can just click copy this one go back inside our codes and then we can run this one so right now we can uh paste this command and then we can press enter so it will install the new package of super base so and then we can come back here so this is what we need to do so I'm going to copy this one right here we going back and then we can paste this one as well okay so right now we need to add the superbase URL and the Aon key from super base and so for that let's go and check out our project so look like everything is set up is complete and you can grab this one right herey go to AP uh setting go to API and this is the project URL you can copy this one and then we can replace this one right here and also we can copy this one and we can replace this one right here all right so right now we it's complete so inside the lips folder right here I'm going to create a new folder called super base and right here I'm going to create this one it's going to be servers. TS and another one is going to be called the browsers browser. TS okay so for the server we going to run this one on the server and the browser we run on the browser so to set up that one it's really simple we can go inside here and for the create client the same documentation you can see right here the create client and this is for the client component and the server component so this is for Server so I'm going to copy uh the code that we have here and I'm going to create a function for this one it's going to be export function super base server and I can paste this one right here the code that we just uh copy and so we need to import the cook keie so I import the cook keie from the header right here this one I do control control dot it is importing from the this package right here and so right now for this function we can just return this one and right now this is ready to be used inside the super base serw action uh and next Ser action okay great so for our client it's the same thing we can go to client and we can just copy uh this one right here and let's go oh I think I forgot I I copy in the wrong file so maybe we can remove this one past one on the server and I'm going to copy this one and paste it right here but this one I'm going to call this one super base browser and we do not need this one we can remove and we can copy this one right here and we can paste this one right here okay so for this one we can just uh returning this I can we can return this one and make sure we import this one I do control dot as you can see it's Auto Import for me very nice so right now we have this uh superbase browser and super base server right here that can be used inside the server or the client component so right now let's try to do authentications with our GitHub right here so for that let's go inside our page and we should have this lockin with with oo and then this one be Arrow function and then we're going to call this one on the lock in with GitHub as well so on click this one we're going to call this one and I think the same thing for Google as well so I think so for that we need to pass the parameter to this one on the lock in with the oos so we can do something like this and also this one as well so for this one it's going to be GitHub and then for this one is going to be with uh Google okay and right now we need to have like get the provider and the our provider is going to be either exist inside the server page because this page right here is run from the server so for this one I'm going to convert this one into the client component I'm going to use the client right here so and so right now if we go back here we should be able to see that this is okay great so inside here what we can do we can call our super base so I'm going to create a super base equal to super base and we're going to use the browser since this is run on the browser we're going to do super base uh browser right here and I think I misspelled this one this one should be super base browser and then let's go to browser and make sure I change this one nice and right here you can do super base do o do sign in with the o o and right here you need to give a the provider and the provider right here we can pass the as a parameter that we have this one okay and then we can to have the options so right here I think we can do the options and the option right here is going to be redirect two so the redirect two right here is going to location do origin the location origin here is equal to Local Host 3000 or when you work with your deploy this one it will be equal to your domain and we need to re change the code and confirm with the session so for this one we're going to create a new route for now I'm going to just do off call back right here okay ask call back all right so this is where it will be redirect to and so for this we need to create a new route called the Callback right here so for that let's create a new folder called the Callback and inside here we're going to do route. TS okay so we should be able to see this one and so right here we can just copy and paste from the documentation so if we go back inside here and we scroll down to authentication with o off and this is how to implement it so this is like the route call back so you can see so we can just copy and paste this one and we can paste this one so basically everything here it just like um so when you redirect with lock in with GitHub or Google it will redirect back to this page uh to this route and it will let's say for the server component so it will set up the cook key and things like that right here and also it will change the code as well if there is an error we will redirect to an error if not error we will redirect to the page and also if not we can just um return the error page so we have the next parameter right here so for example when you call back right here if you do next right here let's say if you next is equal to Let's uh let's say slash anything so it will redirect to that page but for now I'm going to leave as a blank okay so that pretty much it so right now let's try to set up the uh lock in with our GitHub so right now if I try to lck in here there will be an error because in our super base dashbo we haven't set up this one yet so right now let's go back inside our super base go to authentication go to provider and so for GitHub right here we need to click enable so we need the client ID and the client secret for this one so to get this one we can go into the from super base I'll copy here and here and right now this one I'm I don't want to enable all this one so click on register so right now you should be able to see we get the client ID and so we can paste this one and for the client secret we need to click on generate a new one and so right now we have the C secret here and we can just copy and paste this one as well and make sure you enable and hit save okay so right now if we go back to our application and if you go back in here so if I click on GitHub again so un support provider is not enable all right so look like there's something wrong we have gibs and Google so and also we enable this one again I think maybe we need to refresh this one and see I click again okay so right now for for message provider is not enabled but I already enabled here right so you can see not sure why we have this error so we got the provider and I think for now let's go and just add the provider with the maybe I can refresh this one again click on this one okay so you can see it's working but it's weird that I have to change this manually because let uh because we want to pass this one so we can use both GitHub and Google and so right now let's try it again post SL off and click on GitHub okay so everything is working so now let's click on Asar right here so and then it will redirect back to the homepage Okay so because if you look at the ask call back right here it will redirect back to origin so the origin should will be our Local Host 3000 or it will if you deploy it it be your domain and now everything is uh complete and if you're going back to the user right here I think we can go into the as user so you can see we have this user uh already lock in right here very nice so now let's do logins with the Google so to lock in with Google Google you can go into the documentation loog in with Google right here so first we need to create the consents with the Google first you can go to configuration and go to credential right here and so for this one you need to create a new apps so as I'm now I'm going to create a new project this one let's call it with uh we say next super base and let's click on create so it will take some time to create your project okay right now if you complete you can click on this one and right now let's click on the credential and click on the o client ID and right here we're going to create the config content screen first and now for this one we're going to choose external click on create the name this one you can name this whatever you want I'm going to name this one next uh super base and the email which is I'm going to choose this email I'm going to skip all of this and then we can click another email uh at the email right here again and then right now let's hit save this one and right now so this is like the Scopes and everything that we wanted to access so for now let's let's say what do you want when you lock in with GitHub uh with Google so I'm going to choose this two right here I'm going to click on update and let hit save and continue and for this one let's just click on on Save and continue as well and then let's go back to the dashboard so right herey I'm going to choose the publ my apps so then we can test this one very nice so right now everything is good to go so let's go into the credential create credential click on o again and now click on web applications and here you can give uh this name so I'm going to leave this as it is and for the this one I'm going to choose the local 3,000 and for the AAR redirect URL and this one we need to copy it from our superbase dashboard so for that let's go into provider let's go into the Google right here and click on enable and this is the US call back copy this one and we can come back here we can paste and I think I missed this one okay I need to remove this space right here so right now let's click on create so this one it will give you the credential for example the client ID the client secret so I'm going to copy this one and this is the client ID I can paste this one right here and another one is going to be client secret and we can paste this one as well so for this one is for Android and the other thing we can leave it at blank and uh I think for this one I'm going to skip this one as well so let's right now let hit save so right now I will lock in Google is enabl so as I'm now to test this one see I have only one user in my application so I'm going to remove the GitHub because my GitHub and my Gmail have the same um Gmail so I want to make sure everything safe so for this one let's go inside the O page and let's go into the Google and right now as you can see it will prompt your Google and then let's click on lockin and just click this one as continue so as you can see it will redirect back and if you look at back right here everything is good to go so we have the display name we got email and also the provider with Google as well okay so now let actually test what what happened if we lock in both with GitHub and Google so right now I'm going to click on lock in with GitHub right here so it will do the login with GitHub so it will redirect me to homepage so you can see everything is okay so but if you look at our dashboard right here we have only one user and because since the user have the same email so if you use the first one to lock in with Google and the second one with the GitHub so both of this one will result in one record only even though the provider is different all right so so everything is good so as I'm now so all right so I think we complete so in the next part we're going to use this one and and then so we're going to do the page protections and also we're going to do the lock out as well all right so in this part we're going to create the profiles table and then we're going to call the ask trigger to insert to that table all right so let's do that so right here you go into superbase dashboard go to table editor create a new table I'm going to call this one profile and this one is the ID of this one is going to be the uu ID types and this one will link into the O and let's go into the users table and which the ID record and the action is going to be Cascade and this Cascade so it mean if we delete from the O users table this will also delete as well okay so so right now let's hit save this one and so right now we can create three more column and for this one what I want is going to be email another one is going to be display name and another one is going to be the image Ural okay Mage Ural and for this one I'm not allow not allow nul and the other two is allow nullable because whenever we log in with GitHub or Google some information it might probably missing some user probably do not have the image URL some user may do not have like display name but the email is going to be sure they going to have so that's why I make this one not not nullable and this one is allow nullable all right so right now let's hit save this one okay I think I forgot to assign the type of this one and make sure that assign this type is going to be text and let's hit save this one all right so right now we have the profile table on so our goal is whenever there a new user sign up into here we're going to automatically insert into this table so the way that we do that is we going to create a trigger function and that will be called so let's go into the database and let's go into function so now we can create a new function I can name this one create user on signup and the type of this one is going to be trigger so because we going to do the trigger and for the argument is we can know for the definition of this one let's do begin in n n and so right now this one is just going to do insert into the public do profile table that we just create with an ID and we're going to have the email and we're going to do display name and also the image URL as well this is all the field that we just created and so insert with the values and so where do you get the value so the value you can get it from the ask users table so when whenever there's a new record in here we will insert into here right and so you can get information from this one so right now to get this information you can try to run this one right here you can run the select sta from the US user so it will result in this and if you want to see the record of this one you can copy as a markdown or download as a CSV you can come back here you can paste this one so you can see this is all we got so we got every information like ID rooll and emails and I think what we interested in is this two right here the raws apps metadata and the user metadata so right now let's try to fetch this one and see the information so for example if you fetch the raw apps metadata and you run this one so you can see some of the user using the Google and some of the user using GitHub and some user using with emails okay and then right here if we fetch the raw user metadata and that you can see the their information such as their names their emails and also if you loog in with Google you will have the I think it's going to be AV URL which is right here and for if you log in with Google you will have the picture right here so right now based on this information we can use it to insert into our profile table and so right here we need to do the condition as well so we need to detect okay if the user lock in with GitHub or if the use a lock in with Google we going to insert for different value if you can see right here different um provider will give you different app user metad data so that's why right here we need to do condition but as of now we can skip that first and we want to make sure that this one is running and then we can come back and update this one okay so to get the information that we get from here what you can do inside here you can do that new. ID and this is the new right here it mean the new record inside the US user table that's why it's new and then we get the ID and right here we going to New Start rawcore user meta _ data and to get the access to email you can do something like this and then we can do get an email right here okay so right now I can copy this one and one two because uh we need this one we need to add the comma right here so this one what we want is going to be the display name and so right now I'm going to do this one for for GitHub so for GitHub is going to be the username and the last one right here is going to be the alar AL EUR all okay and so there's no comma at the end so make sure we end this one with the semic column and also we make sure that return the new record back so which is right here okay so right now for the advance setting right here make sure to use the security definer all right so this this is good to go so right now let hit save this one so the next step that we going to do is create a trigger for this function all right so to create a trigger for this one you can go into the trigger tabs and if you look at the schema right here we can only create a new trigger from the dashboard which is the UI right here on the schema public only so but if you look at the as user us table or schema we cannot do it so the way that we do that you can use the SQL editor you can go into SQL editor right here so right now I already open it in the new tabs so for this one you don't have to like remember thing you can just ask AI from super base directly so you can see they have the AI right here so for example I ask them to create a trigger on our user tables let's just press enter this one so as you can see it will generate us the code like here just click accept so right now we need to change a bit so uh we need to so this one is create trigger and this is this is going to be a trigger name so you can name this whatever you want so probably right right now I'm going to change this one to create user on sign up instead and this is the event whether you want to call this one before or after so I'm going to call this one after and then whether you want to do the action update or delete and then this one we're going to do insert okay so it mean after insert into the US user table and we're going to execute function so which function are we going to call which is going to be this function right here okay so right now let's hit run this one okay so the O okay I think I misspell this one so this is one should be o. user instead okay so now let's try to run this one again and look like we have an error okay ask user near syntax maybe we can try to debu with super base AI as well let's see what happened and accept chain so look like there's not much where change so it's the same thing right R trigger on sign up after insert on ask users and let try to run this one again okay so now it work thans AI so right now if we going back into our database we go into our trigger and then if you go into the a schema so you can see we have this SCH uh trigger that will be call whenever there's a new record inside the O table right here all right so right now I'm going to remove this user right here from our github's provider this user so right now whenever there's a new record inside here we going to our goal is to have a new record inside the profile table as well so let's do that so I'm going to come here make sure I remove all the cookie from this one remove here reload and let's navigate into our o page and try to lock in with uh GitHub right here and so right now you can see everything there's no error so everything great so and right now there's a new record here you can see provider with Google uh so right now you can see we got the information like email display name and the image URL right here great so right now let's test this one with Google as well and let's go into the I think off user right here this is the lockin provider with Google so right now let's uh delete this one and very nice so right here I need to make sure I clear the cook keie and everything as well I'm going to remove this one and let's go in to the O page for this one let's go into o and right now let's try to lock in with Google so I hope this one okay it's okay I think this PR because I thought this one is going to be error because our trigger is aiming for the a GitHub only but this one is fine as well I'm not sure why surprisingly all right interesting okay if you look back right here okay we have this new record and let's go into profile and as you can see okay all right that works that work really nice but the only thing that we miss information is like the display name but the other than that it's okay I think we can fck this one all right so let's try to fix this so right now let's go into the function create uh this one and this is where we need to fix this one for the username I think we can do uh this one right here so I'm going to paste this one and this one will result uh getting the null so if we has a two variable a two value in here it will result in one if it's not null it will result in that so if you can see this one will be null when we lock in with Google right and so we can pass another one that will uh not null when we lock in with Google which is going to be I believe um this one is going to be name right here okay right now I hit confirm this one so if you going back I'm going to do this I'm going to delete this one as well and let's try to relog in again so I'm going to remove this one and reload let's go into our o page and lock in with Google and as you can see there's no error and it will redirect me to a homepage and you can see here and if you go into the profile so you can see I have my name right here and this is the everything is working out CR all right so okay so I think that's pretty much it guys so and this P so in the next part we're going to get this information and then we're going to do display this one to our web page and we're going to do the lock out of this user as well and before I close this one I like to mention that as of now we're going to do because trigger right here as if we can see this one is designed it for using only the login with Google or and GitHub right here okay but if you lock in if you try this one with different authenticate providers such as Discord and thing like that one thing that you need to make sure is that this information is available uh this information right key is available and you can do that by running the actual data that I showed you before based on the provider that you lock in with so they will give you the information um such as this information so you can update and uh pass on your application okay and also probably in the next video maybe in the next part I will try to do another authentication with um magic link or email and password but as of now we can skip that first and then we can focus on this first okay all right so for that see you in the next video all right so in this part we're going to set up with react query so as you can see right here we're using the latest react query and which is Wei so right now you can go into the documentation and so right here we can scroll down to get started and then go into installation and this is how to install it so I'm going to use with NP PM so I'm going to copy from this one and then open my VI Studio code and then we can I can paste this one right here so now it will import for me and right here I'm going to create the query provider which is going to be query provider. TSX so I will create a react query right here so I'm going to do offc this one and this one I'm going to rename this one to query provider and inside here we going to use a react query client provider so which is going to be query client uh provider which this one right here and inside here we're going to have the children's and I think Yep this one and then we going to pass this one as a props and the children props types this one is going to be make sure I spell this one correctly this one is going to be react node okay all right so right here it will need a client so right now we need to create a react query client and so to do this one we going to create this one is going to be as a state query client is going to be equal to use State and then for this one it's going to be a function that will return new query client uh not this one it's just new query client okay which is this one right here and so we're going to give some option right here so for the default option of this one for all of the query so what I wanted to do with this one is I'm going to St the stal times to Infinity okay so stal time Infinity so this one it mean whenever you fetch a data and then it will go into C cash and then there's and then if you want to refresh the cache either you invalidate the query or you refresh the page but if you do not that the St time to Infinity so every time that you go into the page it will do the refres okay so I wanted to it all the way read from the cache and so that's why I said Infinity so you can tweak this um parameter right here as you need depend on your application and so for this one I'm going to pass this one to the client all right so I the last thing that we wanted to do uh is to install the Dave tool so let's go into the Dave tool right here and then we can do the same thing which is going to copy this one I'm I'm using with npms I can paste I install and to use this one uh it's really easy so we can copy this one and then we can call it down here so right here I can paste this one and to use this one I can put it below this one and so so for initial I probably going to with fall as well okay so for the initial it's open is four and right now that's good to go so right now let's use this one inside of layout and so I would like to wrap this one between our scams so I'm going to go with the query uh provider for provider which is the component that we just created and then we can put it between this right here so it's Auto input for me right here which is from this one and that's good to go so right now if we go na navigate back to our Local Host 3000 if we refresh this one okay I see there's something wrong which is we used the use state right here we need to convert this one into the use client rate so right now you go back here look close 3,000 if I refresh this one so you can see all good to go we also see the icon from the react query right here since right now we do not fetch anything there's no state right here all right so right now let's creating and fetch the user information and create a navigation bar for this one okay so now I'm going to go into the layout let's go back into our layout right here I'm going to wrap this layout and we going to pass the children inside so for this one I'm going to set the max width of this one so let's go into the max width of this one to the 6x else only and the Min high of this one into screens and then we're going to do a Max Auto to make it one to Center let's do py1 and then we're going to do space y of this one to 10 as well uh I think the space y probably not need it and right here I'm going to create the now bar so I import a now bar so for that let's go to create a now bar first and let's go into the now bar PSX and can run our Snippets right here and let's hit save and and then let's do control dot this will Auto Import for me and right now we should be able to see this one if we navigate back we should be able to see the NAA and then we cap our Max size of our uh layout right here so right now um for the nail bar right here it's really simple and then for this one let's go with the H1 of the NAB bar this is you will be your logo I'm going to say logo or your name in here do text to this one to let's say XL and then fun this one to bowl and then this one is going to do flex and then justify this one is going to be between because you wanted to push this one and then let's do item Center and on the other side will be another one is going to be a profile component so I'm going to do the profile right here oops all right so right now let's create a new component called profile. TSS text and then let's save this one this one will do control Dot and right now if we navigate back we should be able to see this very nice so as I'm now our profile I will render this one as a as a bon and then make sure it's autoimport from here and this one as um I think the variant of this one I'm going to choose this one as an uh not the link but as an outline and then we're going to do with sign in okay so you can see right now this is will be a link so when we click it will navigate to our off page so let's go that I'm going to wrap this one inside a link component and then right here so this one will import it from the next link and the HRA of this one will go into the O page very nice so right now if I go here if I click and right now it's go back in here so when I click in here it should go back to the homepage so let's fix this one I'll on our now bar we can do our link as well from next link I can cut this one let's do the HRA of this one and to our home page so now I click here to come here and very nice okay I think for the layout right here it's probably it mess ups a little bit so maybe you can fix this one but for now I don't really care much about this one so okay so now we going to render this one so we need to fetch the user information and toggle between the sign in right here with the user profile instead all right so for that I'm going to create a hook to fetch the user and so we can use react query so this one I'm going to create a folder called hook and this one is going to be called use user and then we can do TSX right here so we can run our snippet and this one so for this one we can use a query from here and for our query we'll need two things so the first one is going to be a query key and so this one is going to be called user and another one is going to be a query function okay oops I missed this one query function and this is going to be an async function so right now we can do something like this and then we going to return this one back to our use user so inside here what I'm going to do is I'm going to fetch the user uh sessions so first we need to import super base is going to be equal to await uh super base I think we need to create super base first so this one I'm going to use the super base browser so this is will be a client's component and make sure that I use the client right here and so to get the session is going to be cons we going to get the data and this one is going to be a weight super base. us. getet session since we use the a right here make sure we do theing right here nice so right now from here we can be able to get the session of the user so we can check right here if the data do sessions do user if there's a user so right here we need to fetch the user information so okay so I need to fetch the user information from this one from the profile table so for this one let's do that so we're going to do a wait super base do from and this one is going to be from the profiles table and so as I'm now we do not have the intelligence because we uh need to fetch the type from super base I will do that in a moment so right now let's try to finish this first and we're going to do select this one and we're going to do select sty so this is going to be equal we're going to fetch best on the ID where it's going to be the data dot sessions. user. ID okay so we fetch the profile based on the ID from the our session okay so from here we should be able to get the user information so we're going to get the data which is going to be the user so we can return this one and then right here we can return the user information data which is the user maybe I can oh this one right here all right so right now if we h on this one we probably don't know the type of this one so right now let's try to generate the type from of our super base so then we can give a better intelligent and then we can see the type of the result of this one all right so to get the type of this one so we can go inside here we can search for let's say super base and then it's going to be gen generate types and the first link right here so first you you need to install this one or you can run this one so I'm going to copy this one and then let's go and run this one right here super base lock in and this if it will automatically like import and install the package and just press enter right here so you can see I press enter it's automatically lock in for me nice so the next thing that I wanted to do I need to call run this command and I can paste right here so right here I need to create a folder so this is uh when we generate the type it will live inside the lips types superb. TS so right now I need to create a folder for that we have the lips right here and then so we need to create another folder called types and then we need to link our with the project so which is this one right here so to get the project W you can go into your super base and go to settings and then this is your reference ID click copy and then you can paste right here and now when you press enter so this will create the file and then you will see the type right here okay and so to use this one you can go into the super base browser and then we can go and reset the database and which is this one so you can see this is import from our types and you can do the same things for our server right here as well so database and okay nice so whenever you change so for example whenever you change something inside your table right here or any schema or any function if you change any column you need to rerun the command this command again so in order to fetch the latest types otherwise you will lost so right now if we hover on the data so you can see this is the information that we get and as you can see right now it will result in the array so because this one we want only a single only so we can do do single and now we should be able to have this data okay so what happen if it's fail so what happen if we do not have a session so for now I'm going to return the same things of this one but with a null value so and for here let's say in nit user is going to be equal to this and then I'm going to change this one to basically an empty string all right okay and now when we do not have any user so we can return AIT user right here so if we hover on this one so when we call this function so we will be able to get this information okay all right great so right now we can use this one inside our profile table uh profile component not table let's go into profile so we can use this one so we can use user and then let's do this one so right here so we should be about to get the is fetching and another one is going to be data so if we go navigate back inside here I think it's okay so I need to convert this one into the client component as well can we use client and now if you look at right here so you can see we got the data and if we look at the data it's null so because we need to lock in so right now for example if I'm lock in for example right here I'm lock in with uh Google this one so it redirect me back here and then if I click on the this one so you can see okay we do not have a data which is weird Okay I'm not sure why we do not have a data is it okay let's see ah I see so the reason that we do not have a data is because the profile table that we set up this we forgot to set up the policy for this one and let's do that so I'm going to read this one for now I'm going to be able to authenticate user be able to read this one and if you want to them to read their own information only you can set up that but for now my policy is like any authenticated user be able to read and so for this one let's click save policy and if you go back in here not this one this one if I refresh so right now I should be able to see the data huh okay so there's something wrong with this one let's go in here and make sure for example if I click on I console. lock the user information okay now if I go into inspect and the console lock and on the if I refresh this one so we got null okay not sure why we got null on this one is it like what what about this data okay we got the session so you can see we have we do have a sessions but for the user ID somehow we it's null okay it's Weir so we got this ID right here right which is this information and which is exactly the same so we fetch from that but somehow we not be able to get the user information okay did I said something wrong this is correct with ID and the session user user ID yes and if you look at the network tabs if I refresh this one okay we got an error right here request multiple row and return H it's weird ah I see I see so because uh the policy that we set right here it's wrong and I'm going to delete this one because I set up the policy for insert instead of create uh read I'm I meant to use a template for insert but the action should be uh do the read and this one is true and I allow on the authenticate user to read this information let hit save this one and if we navigate back right here so we should be able to get the user data if we scroll right here so you can see this is the data information very nice so right now for this one I can remove this console.log let's go into the profile and so we can replace this one so if is fetching is fetching I'm going to return an empty so while it's fuding it's return empty so after it's not it's not fetching so we can say if there's a user of data let's say dot um ID if there's a data maybe we can do not if it's not this one so we can render so we can render this one else we going to render maybe for now I'm going to an H1 right here which is going to be data dot huh okay I think we need to do this one and then this one is going to be we're going to render the data. display name hit save if we go back so you can see we got the display name right here very nice so instead of this one so we're going to render as an image instead so for now I'm going to render an image from next image so we can have the source and the source is going to be data do image yourl and then the the all of this one is going to be the data dot display name okay and we can do the question mark right here I think for this one can be null so maybe we can do this all right and also this one as well it can be null so we can do this and let's give the width of this one I'm going to give the width 50 height of this one to 50 and the class of this one to let's say round it to full round it full all right great so right now there will be an error because we need to set up the uh host right here inside our next config and so for that let's go into next config let's go to image and this one is going to be the I think remote yeah remote pattern and this is going to be an array of objects so we're going to have the host name which is this one and the protocol of this one is going to be https I think since we are here we going to add another one for our GitHub as well so if you look at the other profile which is going to be this one right I can copy the cell of this one and this one is going to be a.com right here I can copy this I can remove and replace this one right here very nice all right so right now since we change this one so we need to restart our server so let's go inside here and then I am going to restart the server so I can do run on m r da again so now everything is ready so let's go back in here and let's try to refresh this one and now we should be able to see this but it did not okay profile we display the image URL okay not sure why it's not displaying the image Ural okay now it's back so we because I think it's stuck with fetching okay that look good all right so very nice so I think for this one maybe we can set the high of our na bar so let's say I'm going to give the high of this one to let's say 20 maybe do we have high 20 yeah okay and now if we refresh this one so you can see there's no chain layout for our now B and for this one we can give an an animation when this one up here so for that let's go inside this one I'm going to go inside the telvent conf fix so let's do let's add another key frame animation right here so we have this one so I'm going to give this one is going to be called fate and this one is going to be prompt opacity and opacity zero and this one is going to go into aity zero not sure why we got this error right here vacity one right here okay maybe on this one number is not okay maybe H yeah this one should be number it's not a string right okay maybe they require need to be a string I can do one right here okay all right so right now let's good to go let's go back inside here and let's go into our now bar profile and this is where we going to render so we're going to go a class name we're going to do the animation I think I forgot to register it so which is right here which this one is going to be bait and we going to call the Fate 1 seconds linear and then it's going to be forward let's save this one and let's go inside our profile and let's use it this one is going to be animation fit and it's same thing for our image okay so right now when we refresh this one it will empty so when it's appear there will be a fate animations there okay very nice all right so I think that's pretty much it so in the next video we going to implement the lockout and also do the page protection as well so if I as you can see the user is already log in but we can still be able to access this one so this one shouldn't be able to access all right so in this part we're going to do lock out and do page protection so for that first I'm going to go into the the profile and this is where we going to do lock out so for example right here when the user click on this one I'm going to do lock out and I think before we doing that we need to fix and handle the small case so for example what happened if there's an MHL here is null so we can render something else so for that I can do something like this I can cut this one put in a new component and right here we can do another condition right here so let's say it data. image URL so for example if this one is null okay and for first this one if it's not not null we can render the image all right but if it's null so for examp if it's null we going to render another one I'm going to put the diff right here for this one is going to do the H1 and so I'm going to get the email address so data. email I'm going to do with index zero and for this one it's the same thing I'm going to give the height of this one to 50 pixel and then the width of this one to let's say 50 pixel as well and then also I'm going to do the flex item Center and then we're going to do justify Center and also I'm going to give the Ring of this one to two as well okay I think same thing for this one let's give a ring of this one to two so let's imagine if the data the image Ur here is null so I'm going to if make this one fail and then so this one is going to be null and then it will render this one okay so right now if we going back here so we should be able to see this very nice so maybe we can fck this one a bit and then let's do the rounded this one to full and then also the Tex this one to maybe 2XL and then the fness can be B and right now if you can see this is look a lot better all right nice so maybe I can change this one back to the right value nice okay so and right here we show the image and okay so right now let's do the lockout so I'm going to create another function called handle lock out not lock in and right here we're going to call the super base is going to be our super base browser right here and for this one the first one that I wanted to do is to clear all of the cache everything from react query so maybe we can import that so it's going to be query client is going to be use Query client this one and then like here I'm going to do call the reset okay or maybe this one is going to be clear so this is will clear everything and then I'm going to call the super base do o do sign out I can do a weight right here and then we need to do an Asing for this one and then for this one I'm going to import the router so let's do the router equal to use a router and this one make sure you import it from next navigation go into router right here I'm going to do router. refresh right here okay nice so now let's go into the lockout right here and then we can call this one both on this one all right so when we onclick in here we're going to call the handle lockout and then I'm going to make this one as a cursor to pointer and same things for this one and then let's give the cler of this one to pointer as well so for that let's go into the CER pointer great so right now as you can see if I click on here so so you can see now it t go back to sign in if I refresh the user still signed in and then we get the data here is going to be null all right so let's try it again so maybe I'm going to run this one and then lock in with our Google right here and then it will redirect back get my session and then we got the data if I lock out so it's return to this one very nice that's good so right now we complete our lockout so right now let's do the page protection so when the US user is lock in so for that I need to lock in again and then I make sure that I cannot go back inside here all right so to do pay protection we can go into this documentation and then let's go into the middleware right here and right now I can just copy this one and then let's go back and let's create a middleware I'm going to create the middleware this is middleware dots and then I can paste this one right here and so right here you as you can see this is will do the refresh and things like that as you can see B on the documentation only R the middleware example can use to refresh expire token before loading server component route all right so this is for the server component route and so one thing we can use is one to do page protection there's two way that you can do either you can go inside the each page let's say before of each page you can fetch the get the session get user session and then after that you um redirect them to any page it's up to you or you can use the middleware which I'm going to do here so for here maybe I can change this one to get the session instead and then from here we should be able to uh get the session from our user and so here we need to check to see which pass that the request is going to because the middleware will run on every page that you request to except the one that you put in here so you can see much all the request path except for the one that's starting with this one this one and right here this is your condition if you want if you don't want to the middleware to run on a specific uh to run on a specific page you can up to chain into this one as well okay so inside here so we can check if whether the past name so for that let's uh get the past name is going to be cons Ural is going to be equal to new. Ural is going to be request.url and then we can go into the console lock and then we can lock the url. pass name okay so make sure you do this so right now if I go back in here maybe if I refresh this one and then if you go into the console. lock so as you can see this is the past name the pass right here so from here we can check if there's a data. session if there's a session okay and if let's say the Ural path names is equal to the/ O and so right here we need to redirect them back to the homepage so it mean you are log in but you if you navigate to the O page we're going to redirect you back to the homepage so for that I can copy the code right here so this one is Will NE respond redirect to the homepage right here okay and and so right here else if it's not so we can just do return so if it's not right here we can just do do return respond all right which exactly is this one and then so right here we're going to do else if there's no session and so this is like depend on the page that you want to protect so maybe let's say if you do the URL P name maybe let's say you have a dashboard so I'm going to just try to pretend that we have a dashboard page and if you try to access this one so we're going to redirect you back to the O page so for example right here if you try to navigate to the dashboard uh and then if since there's no you do not have any session so we will redirect you to the O and but if for the other page we can do just return the respond right here so maybe we can remove this one okay so this one is good to go so right now since I am lock in so if I try to refresh this one again so you can see it will already redirect me back in here and if I try to go ask right here and so you can see so the same thing for this one so if we going to create another page which is going to be let's say a dashboard do the page. TSX and I can run this one and right now if I try to navigate into the dashboard since I'm already lock in so I'll be able to see this one maybe I can change this one to dashboard but for example if I lock in if I lock out so this one should redirect me to the O page instead so you can see it's redirect me back to the O page okay but as you can see the URL here is wrong because we on the o page but it show the dashboard so for that we can fix this one so I think the best way to fix this one first I need to create the constants uh for this I'm going to go into the let's say index create this one it's going to be index.ts and let's go into create let's say the protected and the page okay protected pass maybe and this this is going to be a array so the PA that we want to protect right now let's go with the dashboard and then maybe let's say if you have another patch you can put it right here maybe I'm going to create another page soon we'll call this one called the profile okay all right so this is the protected pass so we can use this one first in the Middle where but I need we need to export this so then we can use it everywhere export okay and then maybe I I think this one should be up case so it's constant okay so right here instead of do equal we can do uh this one instead so let's go here and then we're going to do do include all right so I think make sure I do import this one and then I'm going to do do include so if it's include this path name and then we going to do this one and also we going to redirect this one back uh with the next as well so I'm going to do this one next is going to be plus equal to the eur. pass name all right so you can see very nice so right now let's say for example if I try to navigate into the dashboard so as you can see right now it will redirect me to the r Page Plus with the dashboard as well okay and the next operator the next function is will take me to the uh dashboard and so for that let's go into the off page and and then for this one so you can see you can use the next and the next right here and then you can use it right over here so this one we're going to do next is going to be equal to so we need to get the query Pam so for that let's go inside here and then let's go inside the use search Pam right here and then we should be able to get the param Rams and make sure that I import this one I see this one need to be uppercase since we use the hook and so this one we going to get the next so then let's go into the Rams so it's going to be next equal to params next okay oh no. get next right here and then so we can get the next value so we can do the plus right here all right great so right now let go back in here and so see I'm do this one so if I loog in again with Google so after redirect it will redirect me to the dashboard okay so this is will be do that so but if I try maybe we can create the link navigation to that one go into the page and then I'm going to create a couple links so here I'm going to do link and then HRA this one so make sure we import or import this one from next link and the first one is going to be the dashboard and the dashboard right here let's copy this another one that's probably we're going to create soon it's going to be profile which is going to be profile maybe I can do something like this first okay so right now let's go back so if I try to go to dashboard very nice and if I try to lock out okay it's changing but as you can see the URL here is still wrong so this one is switch it should it should switch to the URL that we supposed to be see which is going to be this one right and so the way that we do that if we go into lockout we can be able to do this so first the way that we do is we can check if the past name is inside the protected past name so oh maybe we can do this so we can get the P name pass name is equal to use pass name and so right here we can replace this one with the off so if the path name maybe if do no if. protected pass do include inside the pass name all right so if this is if this the case so we're going to do router. replace it's going to be SL off right and then we're going to do next is going to be equal to plus the P name as well and then I'll just replace them with the I think may we can just replace this one with the O page right here oops or maybe else we can just do the we don't have to do we have we don't have to do anything because for example it's nonprotected page it will the user can still be able to see that page so why bother uh doing that so this is good for the protected page only and right now if I go into here I go to the dashboard it it redirect me to something like this and if I try to lock in again it should redirect me to dashboard where very nice see I'm in the dashboard if I lock out it redirect me to something like this you can see if I lock in again it redirect me back to dashboard so to double check this one maybe we can create another page which is going to be call profile and then we're going to do page. TSX orc and this is we going to call this one H1 profile and right now we go in here so since I'm locked in I should be able to get to the profile if I am lock out I should read the right back to the O page and the next right herey is going to be profile if I click on this one it should redirect me to the profile page okay that's good to go so right now if I lock out from the homepage as you can see it still be the homepage because this page here is not protected so it's it it it doesn't matter so we don't have to redirect them to the O so all all right so I think that's pretty much it for this one all right hope you enjoy everyone in this P we're going to connect our NE chairs and super base boiler plate with subcribe so we going to build a subscription component so the user can do subscribe and then after that they can access to the subscription page all right so right here you can see this is like the boiler plate that we have done so far and right now I'm going to create into the new branch which is going to be fit stripe so where are we going to connect with stripe and this branch and this is the boiler plate as I'm now so for the first for this part we're going to focus on building the UI only so for that I'm going to go into component and I'm going to create a new folder and for this one I'm going to call this one subscription and this one I'm going to call this one is price. T exct and I can run the snippet right here so this will generate me and for the sake of the tutorial I prepare the data for our subscription component so I'm going to paste this one right here so this is really simple so as you can see we have the price array with the title we have three option that the user can do subscribe to we have the hobby plans we have the description and the benefit of this one and need the amount and basically this is like the same thing using the lawm right here the benefit is the same the difference is just the amount from from one tier to another if you want to build this to real like implementation you probably need to change this amount right here to let's say B on your application all right so right now we have this one so inside our app let's go into our page I think below this one I'm going to import our price component and let's do this one if we come back here as you can see we want to see this one very nice so right now let's go into this one let's create the component for this one and we have another diff so this one we going to have um we're going to Loop through price so map and then we can access the individual price and then so we can return as another div right here and the key of this one is going to be index so I need to get it from here as well I'm going to get Index right here okay very nice so inside here what we going to have we going to have the first one is going to be an H1 which is going to be price. tile and another one which is going to be the price dot this is going to be the amount and we're going to have the price of description okay so price do description right now we go back right here we should be able to see something like this very nice so right now we need to make this one and two the crit so I'm going to make this one into three crit which is going to be do crit and then we're going to do crit Cal to um three and right now if you go back as you can see it look really nice great so let's get add some gap of this one I'm going to add the gap of this one to five and the style of this one I'm going to give it like like maybe a border and then round it to UMD so you can see and for this one let's do it P5 as well so then we have some spacing inside here great so inside here I'm going to wrap this one with another diff and so I can give a space between this three so let's do space of this one to three and right now let's give the style of this one so this one I'm going to do TCH to two um maybe two x one to bowl and same thing for this one as well text this one to 2 XL and font to bowl and I think here we need to add a dollar sign because we this is a price and this one I'm going to give the description of class of tech to SM and then the tech of this one is going to be cray 400 okay all right so right now it look something like this so I think maybe we can increase the price uh text right here maybe to three okay that look good all right great so right now we can render the benefit so we have this diff so I'm going to add another diff right here so this one and then right here we can do price do benefit and then we're going to do the map of this one so we can get individual of benefit of this one and with the index as well and this one we going to return with another da right here and then this one will need a key which is going to be index as well so as of now we can have we can display the uh price benefit which is going to be the benefit itself okay so we go back as you can see it's render something like this really nice and for this one I'm going to keep a space of this one so let's do the space y of this one to five okay that's great and right now let's do some styling to this one as well so for the benefit right here I'm going to do the tech of this one to the SM and the TCH up this one to gray 400 as well and let's do some spacing between this and two space y of this one to three as well okay and make sure I hit save space y okay all right so it's huh it look like it's not giving I see so because we looping through this one so the space y should be going through this one right here right so because this one it will hold all of the list of the benefit so that's why adding the space here will increase the space of this one really nice so for this one we can go into the icon which is going to be the Lucid icon right here so I can go for the check icon which is this one right here click on copy jsx and and then we can use this one next to our benefits H1 right here so we can just do this and then since this one already installed I can just do control Dot and right now it's Auto Import for me so I need to do this one let do Flex item Center and then let's do gap of this one to two so if we go back so you can see we have this really nice right here okay great so I think the last things that we need to do is to add the uh the button and this one is going to be getting uh let's say getting started and this one we can do Auto Import as well so we can have aong here and then let's do some style of this one let's do the width of this one to full okay great so right now we wanted to show Once the price is popular let's say we going to change the border of this one so to emphasize that this uh price right here is popular so that you should consider maybe like getting started with this one so for that I can create another diff right here um is going to be is popular is going to be equal to index is equal to one okay and so for this one we can do like some conditional to our da right here so for that we can import our CN and the C we can wrap around here so this one we going to do if uh we're going to do ring to two and then ring of this one to Green 500 if it is is popular okay is popular and if you go back so as you can see right now we highlight only this column right here very nice that's great so I think we finished this one so the next thing that we need to do is to make this one responsive so if I go in here so you can see this is not looking good so for this one maybe I can we can do the MD ups and then we can do this one and then otherwise we're going to do crit C to one so as you can see right now it's real uh responsive which is great okay so I think I like this one so I think our price component right here is finished so I think one last thing that I wanted to do I'm going to create another page is going to be equal to say subscription page and let's do the page. TSX and then we can run this one so let's go inside the page right here we're going to have that page as well so it's going to be subscription and the subscription right here so right now if I go if I navigate to this page so you can see this is subscription page so our goal is so whenever the user subscribe to each of the plan right here we can access to this one other why the user won't be able to access this one so for that we're going to do that in the next video so yeah I think that pretty much it for this part so see you in the next pad all right so right now we're going to create a product so as you can see right here I'm going to strip a account make sure you create your stripe account and so right now as you can see I have set up just the basics uh for test mode and so if I want to go live I had to complete the second step and the third step which I'm not going to do here because we we I'm going to do the test only and so right now as you can see this is we are in testing mode if you want to activate you can do something like this but we're not going to do that so right now let's create a product let's go to more and let's go into product catalog and this is my previous product that I created four I'm going to create a new product so since we going to have three first is going to be happy and you can add description or upload any image of your products which I'm not going to do here or maybe we can add some description so I can copy this one and add it right here and we going to do like a recurring and then this one is going to be monthly payment so the price is going to be $10 okay and so right now I'm going to add the products right here and then we can add another two more which is this one is going to be a Pro and the description of this one I can just copy here and this is same thing this is uh recurring if one time it's just like pay you pay only one time this is going to be $20 and I'm going to add another product and the last one is going to be ENT pry and this one just pay description and this is like $100 all right so right now we create this one so after that each of the product right here will have the price ID so you can see we have the price ID here so I'm going to copy of this one so this is like the hobby so let's go into our resuse code right here go to price and then I'm going to add to this one so this is like a hobby so we're going to have like a price ID which is going to be a string for this one right here and then we can copy the price ID of another plan which is this one is pro let's copy this one and let's go here which is the price ID as well with this one and another one is for Enterprise let's go here and just copy okay just copy this one and right now we can do the same things for this one it's going to be price ID all right so right now we have this PR ID so the next step is we're going to load the stripe inside our application and be able to check out this price right here all right so right now we're going back to our we SC and then we going to implement the checkout so for that let's go into the price so right here I'm going to create a new components inside the subscription right here I'm going to call this one to check our component and this is going to be the client component and so I can run the Snippets right here and so for this one I can copy this puton right here and then we're going to replace with this one and this one we need to import this one as well so for the checkout right here we going to need the price ID and this one is going to be price ID which is going to be typed going to string so so right here we can go into this one and then we going to import the other checkout component so this one is going to be checkout and then we're going to need the price ID so the price ID that we just add earlier and then we're going to do do price ID right here great so right now we have this one so we need to uh create a function to be able to handle the check out so let's do handle check out and then we can call this function which is going to be right here great so the first thing that we need to do we need to install this Stripes um Library so be able to do this one so let's go inside here so we going to run npm run npm I stripes and another one is going to be the stripes right here uh stripe JS right here as well all right so make sure you install this one great so after that I'm going to create the actions right here inside the lips I'm going to create the action and then the action right here is going to be stripe. TS so this is where we're going to run the strip in on the server to do the checkout so I'm going to do use server right here and I think first we need to get the stripe public key and the secret key so for that let's go into the stripe and then go to developer go to API key so right here you can as you can see we get the public key and the secret key so let's copy this one and let's go into the EnV local and for this one so this is going to be next public and underscore Stripes make sure we spell it right striped PK okay and this is going to be equal this one and another one is going to be striped SK so make sure you not adding the next public inside the stripe uh secret key because this one is secret so that's why we don't want to expose so NE uh next public it mean this is public and accessible inside a browser and this is cannot be accessible inside the browser so for this one let's click reveal key and make sure we copy as well all right I'm going to do this one great so now let's go back inside our Stripes right here I'm going to create a function so let's go into export Asing function and just function right here this is going to be the checkout and then for this one so first we're going to import the stripe so import Stripe from stripe and so we can create a stripe object is going to be stripe is going to be equal to new stripe and then this one we need to get the secret key Dot and this is a key that we need to stripe s right here okay so we can just do this one to avoid because this is like a typescript eror all right so inside the checkout right here we going to need three things which is going to be the email of the user who want to check out which is going to be a string and this is going to another one is going to be price ID and the last one is going to be where after we check out where you want to redirect to this is going to be a string as well okay so right here we can call to stripe do uh checkout and then we can do do sessions this one is going to be do create and so right here you can after we check our success we can have the success URL so where we going to R right two so this is where we're going to use the rir two right here and if this pass right here is not pass so maybe we can add like some default value for this one or we can just do all right here this is going to be process. pnb do Des URL so maybe I can create another one which is going to be the S URL which is going to be equal to HBP SL Local Host SL 3000 okay so basically this one um this one is the site URL so if you deploy this one on production make sure to just to change this one or adding this one to your deployment let's say for example like with sell and somewhere like that with the real value of your domain name and so yep that's good to go so this one and another one is going to be the cancel urall as well so I'm going to use the same value which is this one so after they cancel we going to redirect them to this one and and yeah so and another one is for this one is going to be the customer email which is going to be the email that we pass right here and another one is going to be the line items and this is going to be an array so we're going to have the items right here so we're going to have like the price which is going to be using the price ID um price ID and another one is quantity which is going to be one and the mod of this one is going to be subscription okay okay great so right now we have this one so we can do a wait and from here we can have the session back and so we can pass this one to the our checkout component but this one is run on the client so in order to pass this object right here to the client component we need to uh stringify the objects otherwise it's going to be some warning and error so I'm going to do return do json. stringify this whole object right here and and yeah that's good to go now so make sure this is use server because this is a secret key so we don't want to run this one on the client and so this is going to be exposive secret key all right so right now this is all set so let's go inside the check out so right here we going to call this check out but one thing that we need to do is that so first we can do um check if the users is lock in or not so if they haven't locked in we going to force them to lock in first and after that they can come back and do this one one so for that we can get the user uh information by getting the user state right here and so from here we can get the data I'm going to name this one user so we can check if there's a user prob. ID right here and L if there's no user so we can redirect them or push them to the new page so I'm going to do router and then it's going to be use router make sure that you import the navigation from here and then this one is going to be router push to the O page and then after they lock in we can do like next is going to be equal to location. uh pass name okay so right now we can try to test this one first if you go back inside here and right now I'm going to try to lock out so you can see I'm lock out and if I try to click on this one so you can see it's forced me to the lock uh lockin page and we have the next right here so if I run this component from anywhere in the page so the next right here will uh specify like the the the same path of that so right now I click on lock in with GitHub so this one is Will redirect me back to the [Music] homepage great so right now um we done successfully this one so right now we need to implement the check out here so for this one what I'm going to do I'm going to call the checkout function that we go that we just create which is this one so we're going to pass right here is going to be user. email and then another one is going to be the price ID and the redirect back so the redir back I'm going to do locations. origion so this is going to be equivalent to local h 3000 and if you run this one on production this is going to be your domain name if you want to redirect to any pass so we can just add like pass right here but for now maybe we can just do with the location or region right here so we can to await this one so remember this one we're going to return back as a string right so we need to pass this one but first I need to fix the weight right here by adding the Asing so this one we're going to do Jason do string ofy this one right here and so we can back we can we're going to get back the object so this is going to be data right here okay great so right now we can have the data like the sessions of checkout so the next thing is we going to load the stripes on our client component so I'm going to do a weight right here I'm going to do we're going to call load stripes and which is imported from this library right here and for this one we need the public key process. EnV and this one is going to be dot strip PK right here okay and so right now make sure we do this one so because we just uh this is like a typescript error and right now after we load stripe we're going to get like the stripes right here here and so for this one we can do strap do uh redirect to checkout and so right here we need to pass uh the session ID so it's going to be uh sessions ID which is going to be data. ID right here okay that we get from uh this one and just type string that's not okay I think I forgot to passes one so this is not stringify is pass so and right here we should be a we do another the wait and then we can get the result from this one and so we hold on this result we can get an error if we have so right here we can just use if rest. error so as I'm now I'm not importing any Tas error so I'm going to do AER fail to check out all right so yeah think I think that pretty much it for this one I think for this one we need to do some loading as well so when we click on um lock uh check out but maybe we can test this one first if everything go as planned or not so right now if go back so if I click on this one so you can see it's redirect me to this point and if I go back to cancel it's come back here if I check out on this price so you can see this is like $10 per month and just to make sure that everything good our price I here 100 nice so right now we can test this one so I can go with we see this is like a test mode so you can see this is test mode so you can do like with the fake credit card which is 4242 right here and this is like you just make sure like you pass the wallet uh year and date of this one one 23 and a cat name let's say I'm going to do testing um 01 okay so right now let's hit subscribes so if this one is successfully it will redirect back to the URL that we set which is this uh redirect URL right here so as you can see since this is the locost 3000 that's why it redirect me back to here here and right now everything is successfully so by we can check out this one go to customer and so you can see this is like a previous customer but you can see this is like the name that I just said earlier like the testing 01 which is this is the date that I call this one and this is the time which is great so right now we be able to subscription and for this user to make um right now try to improve more user experience so you can see when I click on here we should have some loading indicator that okay this is being let's say something being called so for that let's add in the use State let's do c maybe I'm going to do some loading and then Set uh loading and let's do use State equal to fault but when we call in this one and I think maybe we can do this one Set uh loading so this is going to be true and then this one is going to be Set uh loading to fault so yep so right now and then we can do this one so this one I'm going to import the loading I think this um Library so AI I think yeah this one right here this is from the react icon with the logo icon right here and so we're going to give a class name of this one so which is I'm going to use with the CN class and then this one is going to be the animation to spin and then we can check if it is loading we're going to do block L we're going to do hidden of this one and then this one we're going to do Flex item Center and then a gap of this one to two as well all right okay great so right now we go back here back okay all right so if I click on here so you can see we have some loading indicator that okay this is being processed like that great so I guess that's pretty much it maybe we can test for example we can add like a success page that after it's successfully we can redirect to the success page and so right now I'm going to create another page which is going to be success page and TSX and let do this one and for this one let's just do success okay maybe H1 right here success and then let's give a class name tag to Which reachel F B so we you can customize this page but I'm not going to do that but just want to make sure that uh we redirect to success page right now same thing I'm going to fill out this information so you can see this is the name of the test 02 so I'm click on confirm process right here and make sure that I check out testing 02 it's redirect so you can see it's redirect to the success page so you can customize this page as you want and then yeah I think that's pretty much it so right now if we going back right here so I think we need to refresh this page in order to see so you can see we have testing 02 great so right now we be able to check out this information with stripes so this customer can be uh paid to us but the next thing that we need to do is we need to store this information that the user be uh have subscription And subscribe to our application so we need to let them access to the subscription page and store their information because otherwise uh right now there's no uh there's the separation between stripe and our database so let's do that all right so right now we're going to create a web hook to listen to the stripe even so for that let's go inside the app I'm going to create a new folder called API and inside here I'm going to call this one web hook and maybe I'm going to do another one is going to be uh stripe as well okay so we have three folder right here and this is going to be the route. TS right here I'm going to paste the ball plate that I have here so I'm going to explain you so this is we going to import everything that we needed Stripes next header and the buffer right here since we going to get the raw body so so we going to pass it with the buffer and so here we create a stripe initial stripe object using the stripe as as secret I think this key right here different from our and because I just stripe SK right here I'm going to change this one and this is like the stripe secret end point and so for this one we going to to make sure that the connection between the stripe and our API is secure so that's why we have this one so I think I'm going to need add this key to our our local in v as well and then for to where do we get this one so maybe we can come back and update that information so this one we going to construct the header and then we get an event so if not we can to have like some error and we respond this one and this is where we going to listen to a different type of event from stripe right here so right so far we this one this is example that's from the stripe subscription deleted but right here we can as you can see if you do this one we can give a different a lot of option that you can see different event okay so now I'm going to change this one back so right now let's first let's try to get the stripe end point secret first so to do that let's go back inside your stripe dashboard and go to the developer and go to web hooks and this is where we can add our Local Host listener and if you want to deploy the production we're going to talk about that later so going to add local listener right here so you can see this is like the endpoint secret that we need to use for our local so I'm going to copy this one right this value right here and then come back here so we can paste this one so right now we good to go with this one so right now we what kind of even that we need to listen to for for this one so if you going back into the events right here so this is like a different kind of events that will be call whenever we uh subscribe to the and as you can see we have like a SE uh session is start complete or another one I think for this one we have like invo payment suceed so I'm going to listen to this as invo payment succeed right here and so let's come back here so we can have like the invoy payment suceed and for this one that's good so right now from here we can be able to get an object from this one so here I'm going to console.log as I'm now console.log is going to be event. data. object so this is will uh we get an object that Rel to payments exceed it is similar to here so you can see whenever we subscribe to and then there's an even this even is fire this is all the object that we can be able to get yet and so so then we can be able to retrieve it right here and so right now so we need to run the stripe local on and our local so to do that let's go back inside the web hook again and let's go at listener so the thing that you need to do is you need to do stripe forward right here and so make sure you need to install stripe first um CLI so you can go into this link and so it will go into the documentation and to download the stripe so I'm not sure this is the right doc so maybe we can do like a stripe a download CLI and I think this first link right here so this is like if you're using with Homebrew like on Mac it's going to be easy you can just follow this one but if you on window you need to follow this documentation let's say for example here you need to download the version that is uh match to your operating system so for example this something like that and so in my case so as you can see this is what I downloaded for the stripe and then I need to open this one so I need to unzip this one and then put it right here so then I can run the CMD command so after that I should be able to get um this right here so right now and I tested this one before can clear this one first so maybe I can do like the stripes DW so as you can see I'll be able to run the stripe so make sure you'll be able to run this one okay so right now we going to run the stripe forward and we can come back here copy this command and then let's go back inside here so where are we going to forward it to so this is going to forward into HP Local Host and I'm not sure like I need to pass one Let's test it out together as well so this is going to be 3,000 and then we're going to have the API the web hug and the last one is going to going to be strap okay so right now let's try to run this one so as you can see right now uh everything is good to go because we create this API right here so you can see API web hook strap and there's no error right here all right so right now we are running this one so the next step that we going to do is to fire some even so in order to do that we can go and let this user check out again so let's try to test this one so I'm going to check out like um subscription again click on this one and so we get this information so make sure use fake credit card here I might just pass fake information this is going to be testy and let's do subscribes and so right now it's processings so okay everything is complete so if we go back in here we so as you can see we should be able to get a different event and fire to this this this end point that we created so the only um we listening to is going to be invoy payment succeed which is this one so I believe if we go back in here we go into console lock so let's go into our lock right here so you can see we get the object that we get from here okay so we get everything that we needed so right now we have this information so the next step that we going to do is to I think for this one we going to update the superbase dashboard uh data uh table so we need to create a table to store this information that related to this user all right all right so right now we're going to create the subscription table to store the subscription status of the user so before we doing that I'm going to convert our profile table right here the field email into the primary key and is unique as well so because we going to link this one with the subscription table so let's do that right here we're going to have the subscriptions table and then inside here I'm going to change this one to email instead and the type of this one is going to be text and so we can add the foreign key the profile email which go to the email here we're going to do Cascade Cascade as well so this one so whenever the profile table deleted this field will be this record will be deleted as well so we're going to add more field here so we're going to have the customer ID so this is like the stripe customer ID and another one is going to be the subscriptions ID and another one is going to be n add okay so right here we can go into type of this one text and this one also text as well and yeah this one is going to be nullable so this one we can update later from our web hooks so when we have the event so we can update and fill out this information right here so I think that pretty much it as I'm now let's hit save this one all right so right now what I wanted to do is whenever there's a new profile file when the you new user is created I wanted to have the feel of subscription as well but we going to insert only the email only and for the rest of this on we can update it later when we listen from the web hooks so in order to do that we can go into the functions and create user on Sign app right here and go inside here so right now we only insert into this uh public profile so we can insert another one which is going to be insert into the subscription table and the value that we going to insert is going to be emails only okay and which is this one and so right now this is going to be new. email and I can remove everything else and yeah so that's pretty much it so right now we can hit confirm on this one so right now let's go inside the profile and we're going to do delete the user and try to recreate the user again so I'm going to go into this user and try to delete his profile and right now let's go inside our Local Host 3000 and try to lock in again with the create a new user again and right here I'm going to click on sign in with GitHub right here so you can see right now we successfully lock in and then if you look back inside our dashboard so which is I think this one right here and let's go inside the profile so we have to profile right here and if we go to subscription we have this information so the only thing that we need to do is to update this one when the payment is succeed all right so right now we're going to update our subscription table when the payment is succeed so the first step that I'm going to do is I'm going to generate a new type of this table that we just create which is subcription table and so I'm going to run this Command right here and so in order to update the subcription table so if you look at right here we do not enable any row security level at all so it mean no one can just go and update this subscription table right so because we disable this one because um we don't want the user can just come in and update the information right here so so to in order to update this one we're going to use the service roll key so we go to API and then the service roll key right here so this is equivalent to the admin key because they have you can see this will bypass the eurow security level and never share this one to publicly okay and so right now we're going to copy this one and make sure we put this one in the local EnV I have ADD it already I call this one super base admin and notice that this one is not public so that's why we do not have the next public St of this one and make sure this one run on the server only we never expose this one to the client and to the browser all right so right now we have this key so the next step that we need to do is we need to create the admin client so so far we have the browser and then the server so right now I'm going to create another one it's going to be this one and so I can just copy everything from this one and paste it right here great so right now I'm remove this one I'm going to call this one use server make sure that everything here run on a server and then just super base admin and right here I'm going to remove this everything here so for this one I can just do with the Asing but because we use with the server we need to make sure that this function is an Asing function great so right now let's try to create an admin and so for that we can go into the documentation you can do super base uh let's say admin and the first link right here will be show you how to set up that so this one let's just copy and come back here I think we need to cut this one on top and so we need the super base URL which is this one and so we're going to do process. EnV do this one and another one is going to be the uh super base admin key right here so it's going to be process. INB do this one and then we're going to do this to avoid uh T script error and after that we can just return the super base right here okay so right now we have our super base admin so let's go back inside our web hook right here so I'm going to store this one inside as a result and this one right here and right now we need to import our super base admin so I'm going to do fun super base equal to super base admin oops not this one this one is going to be super base admin and we need to do a weight of this one as well since this is an eing function so right now I think I forgot to add the type of this one so we can do data uh base nice and then we can come back here we can do super base do fromom as you can see we get get subscription and then we're going to do insert into this one so let's do insert and we get the type so this is going to be n add and then we we're going to do the customer and another one is going to be I think this is not insert this is going to be update right so we update uh an add customer and then another one is going to be the subscription ID great and then we're going to do this one. equal we're going to do the email uhuh the email here with the email that we get so all right so where do we get this information so I'm going to do this one right here so first is going to be an add right here so it's going to be equal to result so if you look at this information go to even and this is like the payment succeed so this is like the object that we get so in order to get the nend add right here we need to go to line data and then we can go to period right here this is the n at Value and so we can copy this value and let me show you what it's like so we inspect and then I think I run it before yeah this is value right here so I can paste this value and then we need to time a thousand of this one to get the real date so you can see the end subscription date will be next month from today so because today I run this one on 16 on February and this is on March great so we can get this one so this is going to be line data and then index zero and then we're going to do periods. n okay and so we need to convert this one to the date so we're going to new. date this one and then we need one to time a thousand and then we're going to do 2 ISO string okay great so right now we have the n n add and another one is going to be the customer ID so it's going to be resel do customer and this one we're going to do as a string as well so the reason that I do not call this one directly here because I need the C type of this one so okay so another one is subscription ID is going to be equal to result. subscription and I guess this one right here and I'm going to make this one as a string as well great so this one we need going to do is equal and so for this one we need to get the customer email so this is going to be email is going to be equal to res. customer email uh this one has a string and then we can add the email right here so right now this is will update and now let's do the await right here and then we can to have the result I'm going to get the error from here only so we can check if there's an error and we can respond back with an error which is this one so right now I can do the error dot maybe message and also I'm going to do the console. lock as well so then we can easily debug if there's an error okay I think that pretty much it for this one and if we go back inside our super base dashboard right here and let's go inside this one database and subscription I think I mess up with the N add because this one should be date instead of text I'm going to update this one to type dat instead okay right now let hit save this one and if we go back right here okay I think that's should be all uh good to go I think since I update this one I need to fetch this one again as well so we can update the type of this one okay great so I think everything is good so right now let's try to test this one again go here go click on getting started and we're going to fill out this information all right so right here you can see it's success it return our success page everything good to go and let's check out the subscription as you can see we update this one as you can see also we update the end date as well so as you can see this is one month from now the ended subscription right here so whenever there's a new subscription they will be we going to update this one only okay all right I think that pretty much it that's great so yeah um so in the next part what we're going to do is to Bas on this information we going to use this one to render and fill out some let's say uh getting the user be able to get some protect data that only the subscription user be able to get all right all right so in this part we're going to work on render the UI when the user subscribe already so for example they go to the subscription page they can see the data and if they haven't subscribed we can show them like the price that they need to subscribe and things like that and so let's go inside here so the first we're going to fetch the user information and to check if they subscribe already so you can go into use user hook and right here we can get the let's say I think um the subscription table so see there's a relationship to which each other so we can add the star right here and if we going back if we refresh this one and if we look at the query right here we should be able to see the subscription but right now we get null the reason because of the policy of the subscription table so let's go and and update the policy so I click on new policy this one and so for this one I allow only the user to read only and they can read only their own information only so for that I think we can choose this template the update one and then after that we can copy this one and go to select so right here you can see this is allow only uh the user uh email so because the email right here is the unique ID so that's why we can check allow only them to read their own ID uh let's say information only and this one is going to be authenticated all right and this is going to be read and let's hit review and hit save this one so right now if you go back and I've click on invalidate this one so you you can see we should be able to get the information uh such as the end date the email and everything right here great so right now we can use this information and go into the subscription page and so so far we this is what we render so for this is there's a lot of different way to let's say render the page of data so I'm going to show you first it's going to B on the client uh render so I'm going to make this page as the use client okay and so this one we're going to fet the uh user information so we going to be use uh user and so for this one we can do this and we can get the data and I'm going to change the name of this one to user this one need to be uppercase and we use the hook right here so right here we're going to do we can get is loading as well and if it this is loading so we can just return n okay I'm going to return the empty fragment and you can add add an indicator as well so right here we can check if it is active and so we can do the user do um subscription so right now the intelisent right here maybe I need to add the types to our subscription um user right here so we hold on this one so we can be able to get the type of the subscription so I'm going to copy this information right here and I'm going to paste this one so right now I'm going to change this one to empty this is empty as well and this is going to be empty string this is like the initial user um so let's do this one empty and the last one is empty as well okay all right let did save so we go back right here we should be able to do Dot and subscription and Dot and add right here so first we going to check if there's no value so if it's this one is empty so the active is going to be false else we can check if the you uh new date see this is a date string right so we can do user do subscriptions. n add is bigger than the new date okay and right now this is going to show us an active or not and so this is depend on like how you display this page so maybe um you can say like this is I'm going to this is um subscription page and things like that and and so right here we're going to render we can check if it is active so and then we can to show them like some other component that you need to fetch so for example I'm going to create a new component called post and right here so right now I'm going to use the post right here and else if it's not I'm going to show them the another component this right here okay and make sure I import this post component component and this one is going to be uh the price component okay great so right now the post right here let's say this is like um this is I'm going to this is like the where you show the protected data this is uh protected the data so later on we're going to use this one to fetch the data but as I'm now we can just render it first so we going back right now um I think if I go to the page I I misspelled the use client okay let's save this one so go in here refresh this one so you can see this is subscription page and this is protecting data so uh this is like the title of a page and since we the user is active that's why we be able to see the post right here otherwise we will see the price component so for example if I come back here and I let's update the user subscription right here and the end date this one I'm going to add the end it let's say let's change to the next month maybe J January instead um nope not this one so January this one okay so I save this one so if we go back right here if I invalidate the data again so invalidate the data so you can see we have this uh data we have this component right here so maybe we can add some information let's say um you need to subscribe uh to see the data okay and maybe we add some styling so maybe Tex Center and then Ty to 3 XEL font to bowl and I have some spaces one so space y to five and I'm going to add the space between this maybe it's all right I guess it's one okay so you can see we need to do uh you need to subscribe first to see the data and this is just um maybe we can remove this one it's fine okay okay so yeah that that pretty much it so right now let's try to test this one again so when I subscribe this one and then I'm going to fill out the information here so as you can see we success if we go back to our subscription page so you can see we be able to see the protected data and not the price uh to our check-in so one thing that we can update this one you can see when whenever we shut down it re Return rir To Success page right so we can change this one to let's say if you check out from the subscription component of this one at subscription page so when to read right back it should redirect back to the description page so for that let's go inside the checkout component and then for this one as you can see this is where we going to render so one thing that we can do is um we can render where it's being called so this is going to be location. origion and I'm going to do location pass name instead so this is going to be plus so this is where we're going to redirect to after success so right now let's try to do the subscription again so for example I'm going to go back here and then I'm going to update the date again so let's do this date save this one um refresh this one and right now we add the subscription page so if I go to subscribe to one of this one and I'm going to fill out this information here all right so as you can see we redirect back to subscription page okay so the next step that we need to do is to be able to fetch the data from our database so I think in the next step we going to create a new table um to store our post data and then we're going to fetch those data inside this component right here all right so right now I'm going to create a new table called post and this table is going to be example only and if you work on a real application you probably work on the different name of this different table and the goal of this table is to demonstrate you how to protect the data for authenticate user and also the data for the subscription user okay so right here I'm going to make this one really simple and we have this one and let's do text as well and the type of this one is going to be text and let's hit save so right now I'm going to insert into the new record inside this one let's let's say uh testing and let's hit save this one so for the policy as I'm now for this table I'm going to allow read this one is to be true and authenticated so it mean every authenticated user be able to read uh this post right here so later on we can come back and update on allow on subscription user and so now let's go back inside our code and try to fetch the this data and so right here I'm going to make this one is uh just two example I'm going to make this one as a use effect instead and so use effect right here so I'm going to create a function called get post oops and this one and so we're going to get our super base so super base is equal to super base browser and then we can have like a super base do from post and then we're going to do select star we select everything and then we going to select every record as well we can do a wait and then we're going to have the data right here okay so and then we can console.log the data and then I make sure that I need to make this one as an Asing and then I'm going to call this one right here okay all right great so right now we have this one so let's go back inside here and so if I ref uh refresh this one so as you can see we be able to fetch this data but right now let's try to allow only authenticate user and also the user need to be subscribed as well in order to read this data so for that let's go and inside this policy I'm going to create a new function so and the new function is going to be is a sub active and then the return value is going to be Bull and then this one we're going to write something this one let's get first we're going to be declare variable so I'm going to create a new variable this is going to be one and at and the type of this one is going to be date and this is the begin and oops begin and this one is going to be end so for this one is going to be select and add into the Y and add right here and this one is going to be from public. subscriptions where the email is going to be equal to us. JWT and then we can grab the email the user who sent this one okay so we can get the email here so right now we set uh we select the end add and then we insert into this Parable right here so here we can check uh we can just return the Y and add is bigger than the current datea not current date okay so this is like the current date that we running this one and this is the end ad that we create right so and security this one so we can just use the security invoker right here see we select the description B on the user email right here great so right now we can hit confirm on this one okay so I think I misspell this one um let's hit confirm again all right so everything good so we can copy this one so we go back inside our post and for the policy of this one let's change from true true to is sub active and click on review and so right now as you can see if I refresh this one I should be able to see the data again because uh this user is active like the subscription is active so if for example if I going to update the subscription to expire which is going to be this one right here and let's set this one which you can see generate this one and if I come back here if I refresh this one so right now we see this page but let's try to disable this page so if we go back and S a code and go to our page so let's say if for some reason the user be able to access to this post component right I'm going to call this one outside I'm going to uncommon this one so even though if they access this one but if you look at the data if you could kind of console the lock we get error uh the array is none so there's no data that return back because the policy that we set right here is allow only the authenticated user who is subscription only that be able to access this one I mean description who is active that's why as you can see even though they access to this component but the the data is null so right here I'm not going to use it to render the data because this is just example and this is like if you work on a real um application you probably fetch this one differently maybe you fetch this one inside the use Query um aery instead so yeah all right so I think that pretty much it so right now we be able to protect our data and allow only authenticate user and subscription user to be able to access the data and so with this function right here so you can see this subactive you can use this one in any policy of the any table that you want to do so for example you create a new table and you add the policy to that one that allow let's say read or write the policy on the um for for allow only if the user is subscription so that's how you do it so for example here if in order to create um you need to uh you need to is subactive so is Subs active something like that so then the user can insert into into this post component if they are subscription so if they subscribe so they can be AO to insert this is just example but probably in a real world application it's probably a little bit something different all right so yeah I think that pretty much it for this uh series video so right now we successfully um connect with strape and then we go and we be able to protect the user data based on their status subscription status and also we render the data based on the status as well so yeah I think

Channel: Daily Web Coding

Views: 7,432

Keywords: next.js, supbase, react query, stripe, next.js with supabase, next.js with react-query, next.js with stripe, supabase with stripe, supabase with react query, next.js saas, next.js boilerplate, dailywebcoding, chensokheng

Id: iJpTo1Kwb0g

Length: 141min 38sec (8498 seconds)

Published: Mon Mar 04 2024