Next.js 14 + @supabase/ssr: authencation, oauth, page protection,CRUD

everyone so welcome back to coding in today video I'm going to show you how to use nextjs with super base to do authentication Pi protection all of authentication and also do CR operation with silver action as well all right so let's get started so the first thing first that you need to do you need to go into this GitHub repository and clone everything here so because I have written the boiler plate and so you can follow along with me in this tutorial and so when you clone this one you run and PM install and un PM start so you will see uh this boiler plate right here so you can see uh and so right now um so we have two different routes that you can go to our server action and learn CR right here and as you can see we have register and sign in everything is spoiler plate for you and so we can just focus on the important path and also we going to follow along the document from uh super base as well so to speed things up and I'm going to explain you what I copy and things like that what is need to be Shain okay all right so right now let's go into the vi code so this one uh the first thing first that you need to do you need to uh add the EnV to your local host uh in the local and pass all the credential that super base needed and so this is what we're going to do so the first one is we're going to do register all right so let's do it so before we doing that uh I'm going to close this one let's go into the lip folder I'm going to create a superbase uh folder and inside here I'm going to create the server. TS so we going to create a super base server client so then we can use it whenever we call from the server so in order to do that so I'm going to do export default and then we're going to do function create super base client and this one is we going to can C go back into this document and copy this one so you can see right here so first we're going to C uh import this two right here and let's go here and then we're going to paste this one and then for this one right here we need to call the create server client right here as well so I'm going to copy this one and we can paste and then we can return this one right here and I think we need to uh copy this one one more as well all right cool all right so right now we create this one but it was mentioned that as you can see this is a server client and we have the cook keie and the cook keie function as you can see we do only get so if you do this uh server client right here to do with authentication and so the user will not be pris and have the cook keie because the cook keie function that we have here just do only get so for that we need to update this one so you can go into route Handler and then you can copy the whole uh set and remove this one as well so we can come back here and then we can just paste this one so right now with this server action uh it will not only do get a cook keie so when the user register we will set and then also remove the cook keie when the user lock out as well and so for this one we need to do within Asing function and also we need to make this one iside the use server as well so then this Bunch uh this one will run on the server okay all right so right now we have the super based client let's go back let's go into our app off actions s action let's go into register which we're going to do first there's a lot of thing that inside here but I think the main focus is going to be the unsubmit right here so when you unsubmit so this is where we going to call to the server action and then we're going to do the register user so right now I'm going to show you what happen if we do on a client size only and so right now if I try to do some uh if password is does not much and things like that and uh if it's required so right now the password is uh minimum six so I'm going to change this to only three only I'm going to change this one to three as well so let hit save this one let's go back and if we put only three so if password is not much it will uh show you something like that okay and now I do one two three and then do one two three so if we register this one you can see we have an email and a password all right so right now let's create an action that uh get from this data and then a call to lock in user so that you go into the uh action right here I have created two function for you already so then right now we can convert this one to the use server and then we hit save this one and then so right now we can call uh the function that we just created super base server client and then we need to do the await for this one as well and then for this one we going to have the super base and right here you you can just you WR now you can just do your regular super base things so super base. o do uh sign up and for with sign up we're going to need email and password right so email is going to be data. email and then we going to have the password is going to be data. password and right here we we need the result send back to the user so right now uh I'm going to have the result uh which is this one right here and so right now you can see this is on the server right and our will register form is on the client so if we want to send the respond to the client so we need to pass this one so for that we need to do the json. stringy and then we have we can send a result and then for inside here right now uh let's go into on submit so then we can call this one let's go with sign in uh sign up with email and password so then we can just pass the data and we can do the await for this function right here and so since we do await we can do with an asyn as well and then for this one is we can get the result back so the result is this one so right now the result is going to be a string Json string so we need to pass this one so I can do something like this it's going to be equal to json. pass oops not this one uh json. pass the result and right now we can access the data or error so for right now I'm going to access the error so I'm I'm going to check this one if there's an error let's say error. message on from this one so we going to toast some error to the user all right so if not if there's no message if there's no error so we're going to do uh toast as well but with different message okay so right now I'm going to do let's say for this one if they successfully uh register and then for this one we can just display the message to the user which is going to be error. message okay and so for this one we can do just do variant of this one is going to be destructive we going to do so some so some red all right so right now it's complete let's actually try and use this one okay so right now let's go back into here so right now if I try to register again so you can see we have the error and the error is like password should be uh six character and if we go into the network tab if we try to request again so you can see it's doing the fetch request and then as you can see it's do also do Post request to uh the super base as well all right which is really nice so right now all we need to do we need to add the this one so 1 2 3 4 5 6 and then this one 1 2 3 4 5 6 and if we hit register all right so right now this user already register which is we we what we need to do if we change the user and all right this one already register as well and let's hit another one okay right now uh user is registered successfully okay all right so all right so the next thing is that so whenever we register user so the user is automatically uh signed in so then we can do some pay protection and redirect them to the uh uh to-do page as of now so right now let's do that so for that I'm going to create a function to read the session from the user for that I'm going to go to lip and then create an new action folder inside here I'm going to do index.ts so the reason that I create the action inside lip right here because the function read session will use inside multiple page it makes sense to put it right here okay so export uh default function R user uh session and also we need to uh convert this one into the server uh action as well so we going to do use server and then we're going to do with an Asing for this one so first I'm going to call to super base create um create super base so we client right here and then we going to do a wait right here and then we can get the super base so we can just return super base do o. get session right here okay so right here uh I do not do any pass because this function I will call from the server and before this this uh this function right here will it it's actually called inside the client component but it's it's shot inside the server but this function that I'm going to do is we'll call inside the server so that's why we do not need to pass um pass this one okay so right now we have this function let's go inside the O page and do the page protection here so right here I can just do read user session and then this one we need to con uh this make SN a things and then this one we can go with the let's say uh we D structure from this one we can do a weight on this one and then we can have the data which is the session so we can check if the data do session if there's a session we going to do return redirect uh redirect user to the let's say to-do page okay and so for this one it's going to be from Navigator so slash navigate and set up this one okay so right now let's hit save on this one and let's go back in here so right now as you can see uh since we already register and automatically sign up so that's why we uh forced to go here so right now if I try to navigate back it one because this page is protected okay so now we can do the same thing to the to-do page as well so let's go into the to-do page and let's go inside here and also we're going to call the function read session so I'm going to import it right here so it's going to be R uh user session and it's going to Auto Import for me and then so this one I'm going to do with acing and also we need to do uh redirect as well import this one and this one is going to be go to / server action okay uh Ser I think it's going to be action okay and then for this one we need to do not operator because if there's no authentic if there's no session we're going to redirect them back to here right now if we try to refresh this one so you can see the user stay here because there's session okay right now we complete the uh pay protection all right so now we're going to do the sign out so for that I'm going to inside the component of this one I'm going to create another one it's going to be sign out. TSX and we can do something like this and for this one it's going to be a form and inside this form right here uh and then we can just have a Wong for the sign out so it's going to do and then for the right here let's save this one so right here I'm going to create uh another server action uh and then we're going to do say lockout and for this one and then inside here we're going to do use server and so for this one we're going to call the create super base client and then for this one is we need to do a weight and this one we need to be an asyn and then from here we can have the super base and then inside here we can call the super base. off do sign down okay uh oops what happened okay c. sign down and inside here we can just do a wait and after we complete this one we're going to redirect user so redirect user and then it's going to go into the sl/ server SL action okay so and then here it's pretty simple you can just do action and then we can paste this lock out right here okay all right so with that done let's go back in here so right now I have a lock already so let so since we have only register let's try register another user so let's say this one and 1 2 3 4 5 6 and 1 2 3 4 5 6 and hit on register so right now I'm redirect back to this one and let's use this sign out component inside the page so then we can do the sign out so we can do sign out component right here and going back here all right so right now if I press on the sign down so you can see it redirect me back to the off page so if I try to navigate this one I cannot okay all right so that's done that's complete so right now the next thing is we going to do on the sign in so the sign in it's going to be really simple you can actually pause this video and try it on your own as well so with that we can go back inside this one right here and so right now we can just copy and paste the whole thing so actually this is really simple so you can just paste this one and instead of the sign up we can just do sign up with password uh and and uh and then we can just uh use this one okay so right now let's go back inside our component it's going to be sign in component and the sign in component which is going to be the same thing on the submit right here so it's going to be sign in with password and email and we have this data and then we're going to do the await and then we going to have uh the result of this one and I think we can just copy the whole thing so probably the same thing of this one and then we can pass the result of this things uh right here uh this one we need to have an asyn and if it's Error Message we can do the same thing as the register okay so right now I can just copy the whole things right here and go back into our sign in and we going we going to replace this one right here okay so I'm going to hit save so this one we can just change a bit of message so maybe uh successfully lock in instead okay so another thing is like uh for this one as you can see uh we have a a constant loading and for this one so but we want to have this one when the user click so we need to have a state if uh the action is complete or not so I think with that we can track off the loading of this one as well so in order to do that we can use uh the hooks from the react is going to be used Transitions okay and then from the transitions we going to have the is pending and then it's going to be start uh transition okay start transition and inside oops okay inside this one we have the start transition so this one as you can see it's import from react so right now we can use this uh start transition right here and let's go inside this one right here so it's going to be start transition and then this one is we going to return this function right here so we going to do a weight so I think actually we can just copy and paste all of the things right we have here and pass it to the start transition and we hit save and so for this one is we going to have the ayns for this one and for this one we can just remove it okay so right now we have this one and then so with this is pending right here we can use to Tuggle and un Tuggle the uh animation and spin of this one so right now it's going to be uh let's say I'm going to do hidden of this one and then if it's uh not pending okay if it's pening okay so right now if be going back so you can see the sign in is gone but when we register so right now I think it's actually uh this one so 1 2 3 4 5 6 and as you can see we have some loading and right now we successfully and redirect back to the user okay that is complete all right so right now we complete lock in uh sign in and sign up so with this using transition right here it's your too you can actually try to do it on your own for on the register because the register we do not have anything uh just yet so if I try to sign out again go to register you can see it's stuck with loading and we can pause this video now and try to do it on your own as well okay that's a little exercise for you okay so the next step is we're going to do with the oos all right so for the oos we can go to the oos form so right now this one is um we can have just only bong and then first for the oos we need to make this one as a client component and we need to botong un click and then we call redirect to the O call back to we change the code so that is happen for the oos because we need to call to let's say GitHub and then we come back we change the code we set the c key and things like that okay so for that inside the oos right here um I think inside the action right here I'm going to create another function uh folder called the Callback and inside here we're going to do the route. TS so right here we can go into the documentation and copy this one so from this documentation right here the oos this one so you can just copy the whole thing of this one and you can paste this one so for this one I uh after testing it it I think we I failed to redirect the user if for this next right here you can just change this uh redirect next right here to the uh parameter URL so it would be something like this so right now we have the URL uh that you have here and I think what you can do is uh we can have the request so it's going to be request URL is going to be equal to this one and so for this one we can just uh we have the request URL okay so it works the same way so you can just copy the request URL right here and then replace it with next and then just do the origin okay all right so right now we have this one so we have the call back let's go back inside the oos so for this one we need to make this one as a client component so we're going to do use client so because we're going to do the onclick on this one so onclick on this one we're going to call to lock in with GitHub and then for this one and then we can call uh we can we need to create the super based client for prows so for that uh we can come back here and then client so you can see this is pretty simple you can just copy this one and then we can copy this one and then also we need to copy uh this one more as well and we can paste this one so as you can see right now we have the client so this one you can pass uh do like the server you can create another file and then whenever we need it we can import rather than just doing this but this is uh just I I can show you that so right now we can just call super base and then we can do the O do uh sign in with the o o and inside here we going to do the provider which is going to be the GitHub on this one and then we're going to have the option and it's going to be the email uh I think it's going to be redirect to so this is going to redirect to the page that uh our page so I will call back so I'm going to first I'm going to flick this Arrow first so this one is going to be the first is going to be location do Origins and then we're going to do uh Slash this one is going to be callback slash this is going to be our app oh no I think first this one is going to be all server action SL all/ callback okay so this one right here all right so this is the way that we do that so before we doing that make sure inside your GitHub uh inside your super base inside the provider you set up and enable this one already so if it will fail all right so right now hopefully everything goes smoothly and let actually try it okay so right now let's go back here right now we do not authenticate because I cannot access to the lcraft operator uh lcraft right here so with that I'm going to lock in with GitHub so right now it will do the login so I have log in with this user account already uh that's why it do not uh do me to confirm with GitHub all right okayy so right now we lock in so we redirect back here so the reason that we to redirect back to the homepages because as you can see on the call back I just do origin but if we want just to go any route we can just do let's say SL Todo so SL too right here so it will redirect back me to the homepage after this one but right now if we can test if the user is actually lock in or that if I can access this here mean user is already uh can lock in uh already lock in if I access here user is not lock in so right now that access here so it mean that user is successfully locked in with GitHub and if I I cannot access here okay so right now let's try to sign out let's try to sign in again and make sure it's redirect back to to-do okay so you can see it redirect back to the to-do page okay which is really nice and all right so right now we complete the O as well another thing is like we should create the middleware for our app so because um this will run on um so refresh the expire session and things like that as well so for that I'm going to copy this one and let's go back and to the uh app right here and then we're going to do the middleware TTS and then for this one it's okay you can just copy and paste everything is safe there's no error from this one okay all right so right now we have done with uh the things that necessary so you can see we done register sign in and all everything ready so the next step is we're going to learn how to do CR operation with server action okay so before we doing Crow operation with server action so first we need to create a table inside the super base so go ahead inside your super base project so I think which is this one so I have a pre generate this one already so I'm going to create another table called to-do demo inside here we have a column ID and we have generate the uid and created uh autocreated and we have title completed and created by and created by right here you can see we need uh use the O uu ID so when we create this one we do not need to pass uh the value so you can see when we create this to do on the only value that we need to pass to it is uh uh title actually we can pass uh this one as well but we don't need to the system will autogenerate for us so right now let's hit save and create this table all right so right now we have this one so first we need to do the r security level so we make sure that the user be be able to access and things uh and do insert and things like that so right now for the insert so I'm going to use this template for insert I'm going to allow the user authenticate to be uh insert into this table and another thing for read so for read this one so we want to read the user read their to-do only I don't want the user to read the other uh user to-do so to do that I'm going to use this template I'm going to do read and then we're going to go with select and also I'm choosing the authenticate as well and so this one is not going to be user ID it's going to be created by uh it's going to be created by and we hit uh review and we hit save and so we're going to do the same things for update uh so we're going to choose this template and this one is going to be update so we they can update there to-do only and only authenticate the user and then this one you can just change it to true this one and then review and I think okay so right now okay we do not have the user ID so we need to uh change this one to created by I think I can make it a little bit bigger for you guys uh created buy and then hit review and then we hit save all right so right now we have app select insert oh one more is delete okay so let's all delete this one is this then we can just do change this one to create it by and then this one need to be authenticated as well okay hit riew and hit save so right now we have all the r security level that the user can read down um data and user only authenticate user that can be able to insert okay so right now we have this one so let's go back inside our apps so let's go into the apps right here and then go to to-do and then go to component and let's go to the page so right now for the listing we listing from this uh plane data right here later we're going to uh replace this one so but for the create form so let's go into the create form so this is where we going to do create I think this is going to be similar to the same thing that we do with the um login and register so you can see so for this one so let's go back in here so right now if I try to create the title require and if I do something like that uh this one is created we get the value okay so right now let's go into the action of to do I have create uh four function for you that we going to use and then so we need to convert this one to the server action so we're going to do use server uh and then so then this will be inside the server and then for this one we can call the create super base client and then we can do the await so then we can have the super base so we're going to do con super base this one and then so with this one we can do uh super base Dot from and and then this is going to be a to-do so this one is I do not add typescript so you can actually do the typescript support so then you will give the intelligent of table that you have from the super bay dashboard but uh maybe in the next video okay so for now this is going to be uh to do demo and this one is going to be insert and insert right here is going to be the title okay so because we need the title only it will pass from here so the reason that we have only the title only because all the other value is automatic insert okay so after we insert this one we going to uh try to select this one single and then we're going to do the await and then we can have the result of this one as well so we're going to do count and then we can result similar thing so we going to return back this one as a Json stringy so return json. stringy this one of the result and yeah there you go so okay so right now we have this one so let's use this to do inside our create form so let's do that so it's going to be create uh okay is it create too uh create too and then we can pass this one the title right here which is going to be data okay and let's see we have the title string and yeah so this is what we want right so because we have the title okay I see so data. title because this title is is an object right here so inside here we can do a weight and then we can do I think we can use the transition again so for this one oh I already import this one already so we can do start transition and then we can just pass uh this one inside and then we can do the acing inside here okay and then we going to have the result of this one so it's going to be a result and then we can destructure this one so similar thing that we do with the form so we can check an error and things like that and like that okay so if result I think we need to pass this one first right so and it's going to be the json. pass and it's uh it's going to be result and inside here it's going to be an error so if the error. message and we can do something like this let's say for for now if there's no error. message we are going to pass this one and then we also going to do the form reset as well okay all right so let's go back in here let's try to create a to-do I think for the pending we need to use it right over here as well to not this one so for this one it's going to be hidden and if it's not pending okay if it's not is pending all right so I'm going to hit save this one so right now the Creator is gone so let's try to create a to-do so let's say uh subscribe so if you haven't so right right now let's do create so you can can see right now subscribe is created so if we go back inside our uh super base and let's go in here uh table and to do demo so we should see one table as you can see all right which is really nice okay that's good so right now uh we have this one so let's try to so we create already so let's try to read this one so going back here and for the read function is going to be really simple so for this one is we're going to do uh the same thing we're going to copy this one and then we're going to do super uh await super base super base okay dot from to do demo and then for this one we're going to select star we going to do select star so you can see this is really good thing from Super pay so right here you don't have to specify okay I want to select my own ID but the policy that we set up so this is we going to select only the data that we has from that that so this is really nice so and then for uh this one we can just return as you can see right here I do not pass this one the reason that because this will read on the server so we will get data uh directly so we read from the server comp function as well so okay so right now let's go here and instead of the to-do right here I'm going to do super base I'm going to do uh read to do instead I think we should be do below this one so we can do read to-do and then we can do await this one so from here we can extract uh the to-do uh it's going to be error or or to-do we going to have data and the data is going to be I'm going to call this one as to-do okay so we can to have this one we hit save so right now as you can see everything should be go smoothly so right here as you can see we have subscribe so this subscribe right here is actually uh actually so right now let's actually try to create another one so uh okay uh like this video and we hit enter so right now you can see like is created but it's not update right here I will show you how to update it soon so if we refresh right here you can see right now we have this two data right here very nice so in order to update this one let's go back inside this one so we need to do the revalidate pass after when we create something when we mutate something we need to do revalidate so the path that we need to do is uh this path right here and one more thing is that this page is going to be the to-do page is going to be uh static so right now we do not do any Force Dynamic and things like that and the way that we do this one is uh let's go into the read of the to-do and we can call the no store functions so it's going to be uh it's going to be unstable uh cache I think this one and for this one it's going to be I'm going to do s uh no store okay as no store and then we can call this one as a no store okay oops we're going to do no store right here okay wait I think there's something wrong so uh okay not this one is going to be unstable no store and this one is we going to do no store right here and there you go all right so right now we have this no store and I think we can do the same thing for this no Store to our read session as well let's go back in here and then we have no store and then for the no store we can just call this one okay all right so right now we have this one let's try and check it again so right now if I uh I'm going to do share this video and press enter so you can see it's update immediately we have the feedback to the user as well all right that's pretty cool all right so next we're going to continue on the do delete and update so to do that you can come back into the action right here so go into this function so this one is going to be really simple I'm going to copy and paste uh this one right here and then we going to do uh for the delete so it's going to be super base and let's see super base uh Dot from to-do it's going to be uh to-do demo and then we can do dot delete and then we can do do equal and to is going to be the ID of the uh to-do it's which going to be this ID okay and right now we're going to do the weit for this one as well so right now I do I don't want to handle all this one right here so we can just uh after we revalidate this one so we're going to do revalidate the pass okay so if we delete successfully we can do the validate maybe right here we can do the same things for the update as well since we are here so right here and then we can instead of this one it's going to be the update and you can uh pass the update value that you want so for now we can just we update the completed only we not update the title and so this one that's why we need to pass the complete only okay so this one we need the parenthesis okay so right now we have the update and to-do so let's go back inside the page and do the update and delete so because this one we need to pass as a parameter to the function and so for that first we I'm going to wrap this one inside the form each of the delete and update so we're going to have form and also we have another form for uh Delete and update as well uh let's go back in here and then uh for this one so as you can see so we can do the right here we can create the function that bind the ID to the the function so for that it's going to be delete uh to-do is going to be equal to delete to-do by ID and we going to do bang and then we're going to do null of this one is going to be to- do. ID and so then one more thing we can do the same thing is going to be update to do is going to be equal to updates by ID and same thing things find n and then too. ID as well okay so right now we can pass this uh action right here into our form it's going to be uh the delete to-do and one more this action right here is going to be uh into the update to-do uh no no no update to-do not update Todo by ID uh which is this one right here right okay so right now we have okay so because this function is needed the to-do do complete as well and for this one we need to do this one because we when we update we wanted to uh pass uh different value from the original complete right okay so right now and as you can see right here you can do another let's say transition and get Penning for that and to improve the user experience but overall it's fine so right now if I go into here if I say okay right now if I subscribe already I can update and then you can see it subscribed and then for this one it's share already and all right there you go so right now as you can see we have this one okay really nice so right now let's actually refresh this one let's create again so I'm going to do the hello world and so right now we have this one let's actually delete this one so you can see it's gone if I update this one again so it's go back into this one okay all right so there you go so right now we completed already all the functionality CR operation with sare action and and go and try this out and let me know in the comment if you have any feedback or any problem and so all right so thank you for watching don't forget to like subscribe and share this video see you in the next video peace

Channel: Daily Web Coding

Views: 32,547

Keywords: supabase, next js with supabase, nextjs, next.js, next.js tutorial, nextjs supabase, supabase and nextjs, next.js and supabase pagination, supabase authentication, nextjs 14, nextjs 14 releast, nextjs 14 reset form, next.js 14 server action, @supabase/ssr, next.js and supabase authentication, next.js 14 server action crud, next.js 14 and supabase crud

Id: PdmKlne1gRY

Length: 35min 38sec (2138 seconds)

Published: Fri Nov 10 2023