Flutter Google Sign In using Firebase | Flutter Firebase Auth Tutorial iOS, Android

hello everybody in today's video I'm going to be showing you how we can Implement Google signin within our flutter application using Firebase our application is going to have a UI similar to the one that's being shown on screen where when the user Begins the application they're going to have a button that is going to say sign up with Google and when they click on it they are going to be navigated to another web browser screen where they are going to be able to select their actual Google account log to it and then after that they will be taken back to the application where now they will be logged in and we are going to be playing their email their profile picture as well as a button that they can click to actually sign out so with this said let's get going so to get started the first thing that we're going to be doing is actually adding the dependencies within our project which we required to actually successfully code this project so we are going to be using the Firebase core dependency so I'm going to come to the dependency section and paste it under copertino icons besides this we're going to be doing Firebase Au as another dependency and then also the signin button and this is an actual package from pub.ed that allows us to display these beautiful oot signin buttons already pre-styled without having the need for us to style them so that's what the signin button packages for as a side note all of the links for all of the resources that I use in this video alongside the source code for this tutorial can be found in the description below so feel free to take a look at them now that we have our dependencies included the next thing that we're going to be doing is basically setting up Firebase within our application to do that I already have a detailed tutorial that's going to take you step by step through the process of setting up Firebase so if you're new to setting up Firebase within your flutter application you could take a look at that but here I'm going to assume that you have the flutter fire CLI already made so we're going to be moving from that step onwards so what I'm going to be doing firstly is that I'm going to be navigating to console. firebase.com and then here I am going to be creating a new project I'm going to give my project a name so I'm going to say flutter Google signin sign in YT and then from there I'm going to click and continue unable able the analytics select the default account for the analytics and then I'm going to create the project welcome back everybody so now that our project has been created I'm going to click on the continue button and then from here I am going to be momentarily docking this browser window to the site I'm going to be coming to my flutter project I'm going to be opening up a new terminal window within the folder where my flutter project source code is located and then here I'm going to type in flutter fire and then configure like so with this done it's going to fetch the available Firebase projects for for me and if you're again interested in actually setting up flutter fire for yourself or setting up Firebase then I already have a video for this on my channel so take a look at that if you're confused with what's going on and then here I'm going to basically use the arrow keys to select my flutter signin YT project I'm going to disable Mac OS and web for this and I'll keep Android and iOS I'll press enter and it's going to go ahead and it's going to register the Android app and the IOS app for me within our Firebase console and it's going to pull down all of the necessary config files that it needs to pull down so while this happens what I'm going to be doing is that I'm going to be taking you guys back to Firebase and here I'm going to be showing you guys some other steps that we need to take in order for our application to work properly with Google signin so the first thing that I'm going to be doing is that I am going to be reloading my page to make sure that the Android and the iOS applications have now been registered with this I'm going to go to the build section click on authentication and then from here I'm going to click on get started once inside of the authentication tab I'm going to go to signin method I'm going to click on Google and I'm going to say unable this for the project name you can name it anything you want I'll just keep it to the default name that it is and then from there I'm going to click on Save what this is going to do is it's going to unable the Google signin method for us and basically make sure that everything is set up for us to log in using Google signin within our application once this is done I'm going to do done here I'm going to dog this window to the site again and I am going to just call flutter fire configure again and I wanted to show you guys this because of the reason that if you had already configured the Firebase application within your flutter project you need to call flutter fire configure again because this time the config files would have been updated specifically the Google info pist files so you need to get them again so for that just go through the process again select whatever platforms you want go through the whole steps so once gives you options like should I overwrite a file you just say yes and then after this you should be done so now our Firebase options file should be created and we should have the appropriate files wherever required for our Google authentication to work properly so now what I'm going to be doing is that I'm going to go to the main. do file and then I am going to be removing the my homepage class as well as the my homepage State class I do not require this boiler plate code I'm also going to be removing all of the comments that you can see with this within this code and then from here I'm going to go to the lip folder I'm going to create a new folder pages and within this I am going to basically create a new page called homeor page. Dart once this is done I'm going to create a stateful widget within this and I'm going to call this homepage like so for the build method for the homepage state I'm going to return a scaffold and then I'm going to come back to my main. do file and then for the home property for the material app I'm going to set this to be equal to homepage to command save and then I'm going to start debugging my application I'm going to wait for my application to actually start running on the simulator welcome back everybody so now that our application is running on the simulator the first step that I'm going to be doing is going to my homepage and actually setting up the UI here so to get started with setting up the UI firstly what I'm going to do is that I'm going to get access to the actual Firebase off package instance so for that I'll create a variable called final I'll set that to be Firebase oore AU is equals to Firebase o. instance like so once this is done I'm also going to be creating another variable which is going to be optional called user which will keep track of the current user that's within the application then I'm going to create the init State method and I'm going to overwrite it and what I'm going to be doing here is that after the Super classes init State method is called I'm going to be setting up a listener on the a objects a state changes. listen function and here every time the OD state is I want to do something and what I specifically want to do is that every time the odd State changes I want to call set State and I want to actually set the user to be equal to the event that gets passed to us so it's going to update the user to whatever the current user logged in within our application is according to the Firebase a instance so once this is done I'm going to now come to the build function and here what I'm going to be doing is that I'm going to be creating the app bar so for that I'll just copy and paste it in because it's very simple and after this I am going to be now defining the body attribute so for the body attribute I'm going to firstly create a function which I'm going to saycore Google sign in button and this function is going to return a fidget and then inside of here for now I'll return a center widget and nothing else then I'll come to the body and I'm going to say that if our user is not equals to null then I'm going to be showing the user info which I'm going to create the function just now and if that's not the case then we're going to be showing our Google signin button then I'm going to come down and I'm going to create another function which will return a viget I'll call this function user info and then within this I am going to return a container I believe or a sized box is the actual thing that I'm going to be returning like so once this is done I'm just going to do a quick City check by hot reloading my application and since nothing broke we can actually move on to the next step so firstly what I want to do is that I want to tackle the Google signin button so for that what I'll do is that I'll come to the Google signin button and within the center widget I'm going to set the child and the child is going to be a sized box of height 50 so I'm just going to copy that in and then the child for this is going to be signin button so this is the package that we had added within our actual flutter application specifically the signin button package and to this we are going to create a signin button object and here we're going to Define what type of a button we want toate cre so in this case it's buttons dot you could do Apple email Facebook whatever you want in my case I'll do Google and then then after this I'm going to also give it a text and the text in my case is going to be sign up with Google like so and then finally we're also going to give it a onpressed Handler function so for now I'll do this but I'll come back to this so now that our button is being shown what I want to do is that when the user clicks on it I want to actually initiate the process of logging the user in so to do that I'm going to create a new function now which I'm going to say is going to return nothing void it's going to call handle Google signin and then this function is going to basically have a TR catch block within this um so firstly I'm going to create the catch block so if we catch an error then we just print the error and nothing else and then in the Tri block I'm going to say that we're going to get the Google Au provider and I'm going to say this is going to beore Google Au provider like so it's going to be equal to Google Au provider like so and then once this is done I'm going to say that I'm going to do Au Dot and then I'm going to say sign in with provider and I'm going to pass the Google Au provider to it like so and it's not going to work so as you can see when I reloaded the application our application is not working as intended and the reason for that is because we haven't set up the actual Firebase app properly so to do that I'm going to be going to my main do do file and here I'm going to be setting up Firebase properly so within my main function I'm going to mark this as as synchronous like so then I'm going to call the widget bindings function within flutter to ensure that our actual bindings have been initialized so that's widgets um flut binding. insure initialized and once the bindings have been initialized then I'm going to do await I'm going to await Firebase do initialize app and then I'm going to pass it the options which are going to be the default Firebase options default Firebase options. current platform like so so once this is done hopefully everything should be fixed now and Firebase should be initialized properly so if I reload my application we are not getting any errors so now that our Firebase application has been in initialized properly hopefully we are not going to be getting that error so if I click on sign up with Google it's not working for me and the reason it is not working is because within our Google signin button on the onpress we're not calling this function so I'm going to set onpress to be handle Google signin like so with this done I'm going to restart my application again and if I click sign up with Google we are going to be actually getting an error which says that we have eror getting project config failed with invalid sirash so to fix this problem it's going to be very simple I'll leave a link to where you can actually see the actual fix for this down in the description below and there are a couple ways to fix this on Android but basically what we need to do is that when we're debugging our application or we are actually working with our application in the development phase we need to provide the Sha one or sha 2506 hash for the APK to Firebase for it to know that the actual request for signing in is coming from a legitimate source so to do this what you can do is you can stop running your application you can go to the build folder and you can actually open it up in finder then within build you can actually go to app within app you can go to outputs APK and then within the debug folder and then what you can do from here is open up a new terminal instance increase the size of the terminal just so that I can show you what you guys have to do and then you're going to be basically navigating into this debug folder so to do this you can right click within Mac and then and then press alt option and it's going to copy the debug as a path name so just basically come within this actual folder and then once you're within this folder if you do LS you're going to see that there's the app debug APK available within this so what you can do here now is that you can type in the following command which is key tool and then from here you can type in Dash printt and and then after this you can do das jar file and then you can do ab debug. APK or whatever the name for the APK file is if you press enter it's going to give you the Sha one here so copy this sha one hash and then after this you can close down the terminal and there are a couple more ways to fix this you can either use the key tool on the certificate you can do the thing that we did using the key tool on the APK or you can use theg gradal signing report and each of these would work and I'll leave a link to this down in the description below so you can take a look at what you have to do but basically once you have the shaan for the APK you're going to go back to Firebase you're going to come back to the project overview you're going to basically click on the Android apps and then click on this Cog icon you're going to come down to where it says add fingerprint and here you're going to paste that shaan in and do save now that you have given the shaan for the APK Google should know or Firebase should know that the request is coming from a legitimate source so now now if you start debugging the application again hopefully the Google signin should work as intended welcome back everybody so now if I click on sign up with Google you're going to see that it's going to take us to another section where we can actually go through the process of logging into our Google account selecting our Google account and then from here we are going to be navigated back to our application and now since we are logged in we're showing the user info and hence there is nothing there that's why there is an empty screen so now what I'll quickly do is that I'll set the user info size box width to be the width of our devices screen then I'll create a column with the following attributes like so and then I'm going to set the children's list for this to be empty and then do command save then for the children the first thing that I'm going to be doing is that I'm going to be adding a container with a decoration image or a box decoration and then within this box decoration I am going to say that I am going to have an image which which is going to be of type decoration image like so and then this image is going to be equal to network image like so and then the URL is going to beore user Dot and then I'm going to do photo URL like so and then I'm going to add the remaining brackets do command save and now the users image should be showing so in the case that the user actually had uploaded then an image then it wouldn't be showing the default Avatar once this is done after the container I'm going to add a text which is going to be for the users's email like so and then after this I'm going to also add a text for the user's display name which might be or might not be populated so I'm going to also add a conditional statement so if display name is null then we just show an empty string and finally I'm going to add a material button which is going to say sign out and when it is pressed then what I want to do is that I want to do Au do sign sign out like so and then after this I'm going to add the remaining bracket and do command save so with this done if we actually go ahead and do sign out then we're going to be signed out and then when I click on sign up with Google again it's going to go and take me through the same process again and then bring me back to my application so now that we have the Android side of things working what I'm going to be doing is that I'm going to be quickly showing you guys how you can get this working on iOS as well so I'm going to stop debugging this application and I'm going to open up an iOS simulator and then I'm going to start debugging this application on iPhone but before we do that for iPhone for Google sign in to work properly we also need to do something so what we need to do for iOS is we need to firstly come to iOS Runner and go to our Google service info. pist file then within our Google service info. pist file we need to copy this reverse client ID like so and in the case you do not have this within your actual Google service info. pist file then what I'll recommend you do is you delete your Google service info. pist file rerun flutter fire configure and then hopefully the reverse client ID should appear assuming that you've unbled Google signin option within the authentication tab within Firebase so once this is done just copy this reverse client ID then open up the runner. XT workspace then xcode so I'm going to open it up then within xcode you are going to be going to Runner and then you're going to be clicking on info to URL types you're going to add a new URL type and then within URL schemas you're going to be pasting in the following reverse client ID whatever it was then after this you can close down xcode and now you can actually start debugging your application so I'm going to click Run start debugging and hopefully this time we should be able to sign in with Google within our flutter application with the power of Firebase so as you can see that the application is running on my simulator so if I click on sign up with Google it's going to take me through the same sign up flow where I'll have the ability to firstly select the account that I want to sign up with and I'm going to basically type in and then once I've successfully signed in once I come back to Google signin you're going to be seeing that it's going to bring back me to the application and it's going to show me the actual profile picture the email if we had a display name then that and then we have the option to sign out as well so with that that's pretty much it for today's tutorial I hope that you enjoyed it if you did then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I upload a new video if you have any question comments or concerns then please don't forget to leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 2,746

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: k7TVYn5jwQk

Length: 19min 6sec (1146 seconds)

Published: Fri Oct 20 2023