Add Authentication to Next.js: Login with Google

welcome back everyone so finally I created this sign in with Google again for you guys because I get a lot of comment I get a lot of people that send email for me so this is the final version of what we're going to building in this video basically so as you can see um oh yeah I'm going to mention this if you get warning on a console that is because this one when when we using set CN and as you can see here it's going to be fixed with latest Canon version so you need to just say npm install next at Canary it will fix that issue on your console all right so now let's take a look what we are going to be building in this video so as you can see here we have sign in with Google when I click that it will showing you the loading loading animation just a little loading animation and the button it should be disabled and we have the list of the Google account in here when I click on that it will redirect me into the admin page as you can see welcome back Chand def all right really simple so hopefully you can find this video helpful for you guys and let's get started all right so now when I click this sign in with Google we get this uh console here that is because on the source component Google with sign in which is console lock that down here okay yeah so the first thing is we need to just go through the next out documentation and go to profilers and go to the where's the Google Google and the first thing is we need to get the uh this one Google client ID and Google client secret uh or we can just copy this first and go to the lip folder and then out and then we can put that on the provider here just put that like so and also we need to import the Google profer we can just copy that and paste that right here just like so oh we have that one here yeah cool and as you can see typescript give us this warning and just t t script just say are you really get this variable here in your environment variable just put an explanation here to say okay typescript I'm going to put that value don't worry so let's copy this here and go to environment variable and I'm going to put that in here like so just do empty string for now and also the client secret like so and now uh what we need to do let's go to to the configuration here and let's click this console. cloud.google.com so the first thing is what we need to do here is let's create a new project uh this one create new project and I'm going to give a name let's say next out something like that and just click create I'm going to make it bigger so you can see uh it's still loading here just wait for that and now we need to select the project and then we need to working with the concess screen I believe should be right here so let's click on that and see what we have here all right so in this user type I'm going to select external because I want to any Google account can access my application so let's click create and then for the application name this is basically what user see when user want to log in in your application so app name is basically I'm going to do uh next out example app like so it's going to be put that inside this array here and for the support email I going to use my email app logo you can put your logo here I'm going to do my logo for the developer email I'm going to use my email let's do that at gmail.com and click save and continue and this scope here I think there's no we need to add in here just save and continue the tast user let's say save and continue and back to dashboard okay nice so now let's go to the credential and in here we need to create credential and just select this oout client ID when we click that it should be open the uh this application type we need to just select web web application for the name I'm going to say uh let's say my next out app for the authorized redirect URI we need to put this one here for the production you need to put your domain but because we working with the development we need to just put this one like so and for the JavaScript origin let's just put the uh Local Host 3000 here yep let's click create okay so now we get our client ID and client secret so let's copy that the client ID and put that into the environment variable and also the client secret let's copy that and put that into the Google client secret variable here okay we successfully get the Google client ID and Google client secret we need to change our Prisma schema so let's go to Prisma and Prisma schema so let's go to the next out documentation and I'm going to go to the let's see adapters I think yeah adapters and then Prisma and then in here we need to use this uh example here we need to just copy all of this let's copy all of that copy this and paste that right here and then I'm going to zoom out so you can see and I'm going to comment this model user and I'm going to copy the I think the email username and password or maybe all of this I'm going to copy that go to user this one and I'm going to paste that right here just like so okay so inside a user we have email and I think we need to just remove this email here because this is same with this email down here and for the username I'm going to set that to optional because when we log in with Google we don't have username and for the password when we login with Google we don't have the password so let's put an optional by put question mark in here created I I think it's fine and also the update app you should be updated it at like so it's also fine name email everything here it should be fine okay so now let's go to the Su base and as you can see we just have one table in here how to synchronize our Prisma schema with our table here it's pretty simple we can say npx Prisma Deb push when we hit enter it should be as you can see it's done and now when we go to our super base we have this account table session table user and verification token nice as you can see in our out here we get something uh error going on here this existing user. password is uh as you can see Type n is not assign assignable to type string why this is happen because on schema Prisma we set the password into optional so in here this authorized function here know that maybe sometime this is going to be a null so it's it's give us this warning that's the beauty when we working with typescripts that's why I love the T script okay so in here we need to check first to just remove this error here we need to check if the existing user do password have a value we need to just run this function here this oit in here and the error should be gone but we have that one here what is this this error here is because we returning username here right but again username sometime it's null okay because we set the username into uh optional in here so to fix that we need to go to our types here and just add for the user here username sometime is null when we save that as you can see theor is should be gone so now let's go to Google sign in and in here we need to log in with Google how do we do that so let's go to the uh let's go back to profilers and then Google this one and how do we plug in with Google we can go to documentation and client API here and just find this sign in method and as you can see in here we can just put directly string Google to sign in with Google just simple as that so now let's go back into the Google signin button and in here what we need to do is let's just remove this and I'm going to say sign in like so and just put Google and in here I'm going to add callback URL callback URL and I'm going to put the HTTP colon loal host 3000 and then admin after user successfully login it will redirect user into the admin panel admin page so let's go back and see what we have so I'm going to refresh that first and still compiling down here okay it's done and let's sign in with Google I'm going to click on that and it's as you can see now we access the account. google.com and just click whatever the icon you want to log in so I'm going to log in with my account here I'm going to click on that and it should be now we log in as you can see we on the admin page and welcome back there's no username here so let's go back to the app dashboard app. DSX and as you can see here this is surrendering the session user do username because we don't have the uh username we can just put R here and we can say session do user dot name I think so as you can see now we get our name all right so now let's try to sign out and because I'm a nice person so I'm going to show you how to add the loading okay so now here I'm going to create the state first so let's do state let's say State and then in here I'm going to say is loading like so and for the type here I'm going to say Boolean and by default it's going to be false and in here in the top of the children I'm going to put uh is loading and then here I'm going to say and if the loading is true I'm going to put this SVG here and I'm going to add class name he four with four margin right two and animate Spin and to see the loading I just want to put this state to true so you can see as you can see look nice and yeah we can just put disa here whatever you want basically so let's do disable disable is through when the is loading is through as you can see nice and yep and here I'm going to say false and I'm going to change this to as sync function like so and just cut this one and I'm going to use try and catch down here we grab the error and then in this try what I'm going to do let's set the is loading into true and also down here I'm going to await for sign in Google like so and if something wrong happen I'm going to set the is loading back to false and finally I also want to set is loading back to false and basically guys you can put here something like Po notification in here to to tell the user that something wrong happened okay so now let's try to refresh and I'm going to sign in with Google as you can see we get loading right it's really fast let's go back I'm going to zoom in in so you can see sign in nice I'm going to select my account here now I'm successfully login yeah that's it for this video and hopefully you find this video helpful guys and thank you so much for watching and thank you also for your support for my channel see you guys on the next video bye-bye

Channel: Cand Dev

Views: 17,356

Keywords:

Id: k1TL-AzavvY

Length: 14min 21sec (861 seconds)

Published: Thu Dec 21 2023