Google Sign In Flutter - Google authentication Flutter tutorial

today we are going to learn how to create how to perform Google sign-in authentication inside our flutter application using Firebase okay as you can see we are creating flutter login application for a quick start of any application which requires login so instead of wasting time or spending some time on the login sign up you can directly download this code and start creating your application so we have completed a design portion we have completed also email authentication phone number authentication also created a complete crud for the firestore and today we're going to talk about the Google sign-in show without wasting time let's get started so if you're new uh please subscribe the channel and you can get the videos Link in the description or the playlist Link in the description and also you can get the complete code from the codingwitty.com or I will drop the link Down Below in the description so without wasting time let's get started open Android Studio so we enjoyed our project we created for login application and inside the manual Tower you can see there documentation if you download the code and you want to read the documentation because I am keep on updating this application wherever it requires so you can read anything change inside the readme file which is down below over here okay so for now let's head back to authentication here we want to perform our Google sign in and down below I have already created sign in with Google method so first of all the first thing we need to do before coding we have to make sure that everything is ready for Google sign-in okay so the first thing you need to do is you need to open your project Wireless project and go to files console if you don't know how to create a Firebase project we have already learned and we have already created inside this series you can again get the link in the description so you have to go to the authentications and inside head toward the sign in method and add any provider click on Google I have already enabled it so once you enabled you don't have to change anything over there and click on save it will enable this Google sign in so once enabled over here when we open it when we see we can see that it's saying that automatically configured everything for apple and web apps to set up Google sign-in for Android apps you need to add sha1 fingerprint for each app on your project settings so how we can do that we have already learned to add shs inside our phone authentication tutorial but let's do it again click on this gear and go to Project settings in here down below you can see by selecting Android we have shs certificates and we need to add a such a certificates over here so how we can add them to add those certificates you have to open your Explorer File Explorer and you have to go to your windows inside the users go to the main user and search for the file dot Android open it and inside you can see we have a file debug.key store so this is the file which contains shs certificates no we want to open it if you want to open it right click open in a terminal so you can see currently we are pointing towards the same directory which in which we want to run our Command and I have all the commands over here for the Mac windows or Linux So currently we're talking about the windows so I drop all these commands in the description or you can get it from the coding witty you just have to copy this make sure you are targeting the complete path over here you have to write your own username So currently my user is this one so I will not copy this windows but start it from the key tool until Android over here paste it and you can see we are targeting C uses this user dot Android and we are also targeting the same directory so let's hit enter and it's going to give us two type of certificates sha1 and sha 256. only sha one is NF I guess but we can add both add new fingerprint paste sha it will automatically detect which one it is save it let's copy the second one add fingerprint paste it and now it's detected the other one let's save so now I had two devices so that's why this was the this was for the first one this is another for the second one okay the second step to add Shas have been completed now the third one is we need to package which is this Google sign in package in the pub. simply copy it open application go to password.eml file and inside you have to paste this Google sign in like this click on this bucket to get the latest dependencies close the Box 5.1 file that it's load okay while that's loading we have to go to the Firebase documentation and search for the flutter inside the build we have to go for authentication flutter and Federation identity and inside first one is the Google documentation Google sign in documentation and we already added shs so we don't have to do anything else for the IOS and Android we have already added or installed the package now we want to run the code so this is the code that we want to use in our application we have created a function the first thing we 2 uses this import package so we will import it in a minute let's copy the whole code from here let's go to our application and inside this function that we have created paste the code and it's automatically imported the files this is the file which we need to hold Google sign in okay once it's imported we don't have to do anything with our authentication if you're following the series you remember that we use this authentication to keep the user logged in and logged out and we are not going to do with this sign in because over here at the bottom you can see when we are going to let the user lock it using Google we are basically converting this login to Firebase authentication so we are already handling the Firebase authentication so we don't need to do anything for the Facebook for the Google or any other Federal identity okay so let's see what this code is doing the first line which is already saying that triggering the authentication flow this is going to let the application pop up the interface which is going to to have all the emails of the user and my user is going to select a specific email it is going to trigger this line and try to collect the data of the user so once it has the data located from the user it will convert all the data to credentials so that it can tell the Firebase that okay file is authentication here is the credentials please let the user to sign it okay so that's it let me just also try to replicate a try catch that we are already following it's a best practice in the previous two years we have already done it with this Firebase email verification so let's just paste it over here we are handling the file with auth exceptions which is the generic exceptions and also we want to catch the errors right let's paste our code over here Control Alt L to align the code okay in here you can see we are basically throwing the exceptions this means that whenever we are going to call the sign in method it is we need to handle the exceptions in that function so now head back to Features authentication and go to controllers go to login controller and inside previously we were using the email and password login using this and now this time we are going to use Google sign in so I've already created a function which is a Google sign in function it is just again remember that I talked about the try catch we are handing try and catch whatever the error it is we are just trying the error using some helper classes I have created a helper class with some generic type of designs of snack bar so just passing the designs over here so one more thing that you have to note over here that if you want to add a loader you've created a variable inside our login controller which is observable so inside your function when this function starts loading we will make the value to prove Google loading is equal to true and when it's done it should be false and if it throws some error again it should be false means stop loading and inside our design if we go to a design where the social button is created social means that wherever your Google button is created I have added a loader effect a custom social button which is this pattern which is a simple Button as a size box to make it full with elevated button with icon so which icon we want to show we want to show image which is the Google image we are currently displaying and when it is loading we don't want to show any image and again when it is loading when is loading is equal to true we should we want to show the button loading widget which is again a simple row which is a circular progress indicator and a text so you can directly display whatever you want and if it is not loading then want to display the simple text of this button so this is the social button I have created the past image which is a Google logo background color foreground color we have a text and over here we are passing the is loading so inside our controller we are variable is loading is Google loading load value if it is true returning the true if it is false returning a false you can directly pass this and we actually don't need this but just for the understanding and again in the on press we don't want to let the user to press while Facebook loader is loading or via simple loader is loading for the email and password so if any of them is loading we want the on press to be none not clickable and if none of them is loading then want to make sure that if Google is loading then again it's not again clickable and if it's not loading let's go to Google sign in when the user is going to click on this Google sign in it will start loading call this authentication sign in method which is performing Google sign-in operations handing all the errors so let's try to run the application let's see what we got okay so our application is running let's click on login and this is the button that I was talking about you can see the background colors the foreground color and this is the icon now when we're going to click on it loader is loading and we have our pop-up so now inside we have bunch of emails let's click on maybe the first one email let's wait for it rotor is still loading and we are successfully logged in and currently but there is no status that we are currently logged in but we are not letting the screen to be switched so for that okay if you watch the previous video to switch the screen we have already created the manual method which is the set initial screen in which we are checking that if user is null then want to show the welcome screen if user is email verified then you want to let the user to go to the dashboard and if email is not verifier we let the user to go to email verification so now we want to call this function inside our Google sign in so when the indication is completed over here we want to call authentication pulse tree dot instance dot set initial screen and want to pass the user inside it so we are repeating the authentication repository so let's create authentication repository at the top use this authentication and again this authentication and for the user we have already user inside authentication dot virus user so this is again inside the authentication Firebase user dot value so this is pass now let's try to run it again user is currently logged in so now this time we should not see the login screen and we see the dashboard so let's try it again let's click on the logout button but we have not implemented our logo so let's again go to authentication repository down below we have a logout function and inside you can see I have added Google sign in DOT sign out if you want to use Facebook then again for the Facebook instance dot logout and for the simple one we have Firebase auth.local and if they are log out we are simply switching towards a welcome screen so now let's click on the logout button and click on yes and here we go we are redirected towards our welcome screen now let's try to login again click on Google click on the email and it's loading and you can see we have successfully redirected towards the new screen so that's it for today's tutorial I hope you learned something new if you learn something new please like the video and if you are new to this channel don't forget to subscribe more amazing videos are coming and if you have any question related to flutter you can ask me down below in the comments thank you for watching take care of office

Channel: Coding With T

Views: 21,086

Keywords: how to implement google sign in flutter, google sign in flutter, google sign in flutter firebase, flutter google sign in, flutter google sign in firebase, flutter google sign in ios, flutter tutorial for beginners, flutter for beginners, firebase authentication, firebase authentication flutter, google firebase authentication tutorial, firebase google sign in flutter, coding with tea, flutter google auth, firebase, firebase auth, firebase flutter, flutter tutorial, flutter

Id: 75ZnSVEZbGU

Length: 12min 18sec (738 seconds)

Published: Sun May 21 2023