🔒📱 Google Sign In • Flutter Auth Tutorial ♡

yo what up welcome back to the Florida authentication tutorial we've made some good progress in the last couple of videos where we can now log in and also register a new account now it's time for us to implement the Google sign-in [Music] so just to keep everyone on the same page in the last couple of videos we made it so that we can now log in users and also register a new user so now we need to do the Google sign in now for this one we need to look at this package which I'll definitely link below so the Google sign in now just copy this and let's come back to our code go to your pop speak yaml and let's add this packaging so save it and let's close the file once that's done now just going back to the Google sign in package there's a lot of instructions here for the integration between Android and iOS but some of this is a little bit outdated so I'll show you what you need to do now the very first thing we have to do is to register our Firebase app which we actually already have done in the last tutorial so if you go to your console we can now go to the authentication and if you go to the sign in method we enabled the email so now let's add a new provider and enable the Google and for the public facing project name you can just call it whatever you want I'll call it flutter Google off tutorial or just shoot and just select a project support email such as your own email and it says here to set up Google sign-in for Android apps you need to add this sha1 fingerprint so I'll show you how to do this a bit later on now just coming back to the Google sign in package if you read these instructions for the integration just starting with the iOS one like I said a lot of this like Steps two to six is already done for us we already did that and we just need to do this step seven so copy this and then you can see where we need a paste it in the iOS Runner and the info.plist file so let's go to iOS Runner info plist and just add it here and then if you look carefully you can see here it says copied from the Google service info.plist so we have to give it the correct ID so just go to this file that's just right above it and you can see so get this little number here after the Google user content dot apps and just replace that one cool so this is a very important step so save it and let's close this so coming back to our code let's go to the library and let's create a new folder called services and in this folder let's create a new file called auth service and let's put all the Google sign in in this file so in this class auth service the method let's call it sign in with Google and just to have a bit of an outline on what we're trying to implement here the first thing is to begin the interactive sign process so bringing up that page to click your email and then we have to obtain auth details from the request and then create a new credential for the user and finally we can use the credential to sign in so I'll explain what each of these steps are requiring so at the beginning the sign in process let's get the Google sign-in account and let's just call it g user and let's try to sign in so this should open up a page that allows you to select an email or you can import your own email and then let's try to authenticate Google sign-in authentication I'm just going to call this G auth and let's wait for if the authentication request has been has been all good and then once that's done let's create a credential so if you look in this credential we have to specify two things the access token and the ID token so let's give it that and then finally once we have the credential we just need to use the Firebase method to just sign in cool so in terms of the code that's actually really it for signing in with Google now if you come back to the login page we want this button of the Google to be clickable right now if you scroll down it's this Square Tile that we created earlier now we could just wrap this in adjust the detector right here but since we have the Google as well as the Apple to do let's go to our Square Tile component and let's add the gesture detector here so on the on Tab let's create an untap method and require the Constructor so what we just did is we should have some red squiggles because we have to specify the untapped method so if I tap on this Google Square then let's go to our auth service class that we just created and the method is the sign in with Google so we're going to need to remove this cons tag now and same thing for the apple one this one we'll do in the next video so I'm just going to execute nothing and I want the user to be able to um see these Google and Apple sign in on both their login page and the register page so let's just do it for the register page as well I'm going to run this on my iframe simulator and we should get some error yeah this thing so it says the Coco pods it's out of date so to update it just run pod repo update and then if you copy this and try to run it again we still have some issues and so I did a bit of Google search to to see how to sort this issue and I can link this stack Overflow post below if you like but I can show you what to do if you just scroll down just do exactly what I do so it says here go to the iOS folder in your project and we're going to delete this pod file.lock so in the iOS folder let's just delete this guy and then let's run this pod re repo remove trunk command and then from here this one becomes sort of machine dependent so for Intel chip users you can just do that but I'm actually using an M1 Mac so I'm going to follow these instructions here I'm going to copy this and then just put your password in and then we can run this Reaper update and as it says here we should do this in the iOS folder so let's change the directory to iOS and in this folder I just run that command and hopefully we see some some green sick so that's looking pretty good and the rest of this don't worry about now let's hit flutter run finally let's just make sure everything is working smoothly cool so I'm going to hit Google and sweet we get this little window and it opens it up and there's my email I'm just going to click it and we're signed in so that's how easy it is to implement Google sign in cool so it's working on iPhone so we just need to do one little thing for Android which is if you go to the project settings and you scroll down for the Android app you can see this sha certificate fingerprints so if you click on this question mark you can see this page and we just have to do a little something so for the debug certificate so I'm on Mac I'm gonna use this one so make sure if you're on Windows do the windows but just copy this and put it in your terminal and it wants a key Store password so if you go back the default password is just Android or lowercase so just type in Android and then you can see the certificate fingerprints so the sha1 and the sha256. so let's copy this and let's go back to the console and let's add the fingerprint do the same thing for the sha256 cool and that should be done so it should work on Android as well cool and that's essentially it so for the authentication we can now sign in using Google and in the next video let's try to focus on the Apple sign in and that should be all of the authentication for us to do so I'll make sure to link the code below so you guys can take a closer look at it play around with it and let me know if you have any issues I'll come around and try to help you out but other than that thanks for watching and I'll catch you guys in the next one peace foreign [Music]

Channel: Mitch Koko

Views: 93,347

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: 1U8_Mq1QdX4

Length: 9min 49sec (589 seconds)

Published: Fri Dec 23 2022