#2 OAuth, Setup Supabase | Next.JS boilerplate with @Supabase , Shadcn, React Query

all right so in this P 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 Das super base and right here we're going 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 the new. env. Lo and this is where we 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 o haer but this one as you can see is it this 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 super base 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 here 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 will 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 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 ser ction uh and next server 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 paste 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 uh browser and we do not need this one we can remove and 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 input for me very nice so right now we have this uh superbas 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 a appications with our github's right here so for that let's go inside our page and we should have this lock in with githubsign to be handle lockin with oo and then this one Arrow function and then we're going to call this one on the lockin with GitHub as well so on click this one 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 is going to be gith hubs 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 GitHub or going to do all operator right here is going to be Google okay so if we hit save this one and right now if we navigate back inside our o page so you can see this is error because the unclick right here is not exist inside the server page because this page right here is render 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're going to have the options so right here I think we can do the option and the option right here is going to be redirect two so the redirect two right here is going to uh location do origin the location the origin here is equal to Local Host 3,000 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 call back 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 we go back inside here if you 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 just like um so when you redirect with lockin with GitHub or Google it will redirect back to this page or 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 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 it as a blank okay so that pretty much it so right now let's try to set up the uh loog in with our GitHub so right now if I try to lck in here here that will be an error because in our super base dashboard 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 to the developer setting and click on the oos app which is the new application you can give any application you want I'm going to do next super base and the homepage right here you can do Local Host 3000 description it's optional and this is the authorized call back so this is where we need to copy from super base I'll copy here and here and right now this one I'm I'm I don't want to enable 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 client 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 you go back to our application and if you go back in here so if I click on GitHub again so and support provider is not enable all right so it look like there's something wrong we have gith hubs 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 uh 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 one so we can use both GitHub and Google and so right now let's try it again post off and click on GitHub okay so everything is working so now let's click on a 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 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 you can go into the documentation lock in with Google right here so first we need to create the consents how with the Google first you can go to configuration and go to credential right here here and so for this one you need to create a new app 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 credentials and click on the oos client ID and right here we get 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 loog 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 Save and continue as well and then let's go back to the dashboard so right key I'm going to choose the publ my apps so that we can test this one very nice so so right now everything is good to go so let's go into the credential create credential click on OAS 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 Host 3000 and for the AAR redirect URL and this one we need to copy it from our super base 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 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 Clan 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's 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 login 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 log in both with GitHub and Google so right now I'm going to click on lockin with GitHub right here so it will do the lock in 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 withit Google and the second one fit 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 going to use this one and and then so we going to do the page protections and also we're going to do the lockout as well

Channel: Daily Web Coding

Views: 1,885

Keywords: dailywebcoding, chensokheng, next.js, next.js with supabase, supabase, nextjs supabase, next js with supabase, nextjs, supabase and nextjs, next.js and supabase pagination, next.js tutorial, how to build project with next.js and supabase, crud with supabase, supabaser and next.js, supabase tutorial, next.js with stripe, supabase authentication, next.js 14 and supabase crud, next.js and supabase dashboard

Id: 7aYgxQ6QAjs

Length: 16min 40sec (1000 seconds)

Published: Fri Jan 26 2024