Flutter Google Login with Firebase | Gmail sign in with flutter

hello everyone welcome to my channel and in this video we are going to do google sign in using flutter and firebase okay so we will use firebase authentication and do google sign in for our android and ios application so you can see this is running in my ios simulator i will show you i will run it in the android simulator as well and by end of this video we will create this application so as you can see in this application we don't have anything we just have a login button which is a google login with gmail so you will be logging in with gmail email id right so when you click on it it will ask you to give access so just continue and in ios it shows like this you have to select your email id and then it goes to the home screen so we'll have two screen one for login and one is the home screen so at the home screen i'm just showing the user image so this user image is the gmail account uh image which you have set the gmail account whatever photo you have set over there you will get that your user's name and email id and then i have set a logout button as well so when i click on this logout button i will go back to my login screen so this is this is it this is what we will do it and as of now what we have is the sample photo project which you get when you create a new application so this is a fresh application fresh fresh flutter application so what we have to do as i said we will do a sign-in page using google and firebase right so let's do it let's let's get rid of this uh default flutter page because we won't be using this and let's create our screens so we will we will have two screens so let's create a folder and call it screens and then we will create two files in it one for home dot dot and another one would be for login so i'll say login dot right and in this uh let's create a scaffold widget uh sorry stateful widget and in that we will create scaffold widget so sdful and it will create the whole state for widget for me and then i will name it login screen okay and let's import our material widget material dot dot is important now it's all good let's go to main dot dot and instead of calling this which is not which is not there anymore we will call our login screen that's it so now we have an empty screen as you can see so let's fix that so how do we do it let's create a scaffold and we don't need a app bar we need a body and in the body we'll create a container and as i had showed you it would be a you know linear gradient background so let's do that so what we have to do is we have to set decoration decoration box decoration right and in this we will set gradient right and we will have linear gradient and then we will set our colors so for colors i need a color utility which converts my color my hex colors to the colors which is accepted by our flutter application right so i'll create a utils folder commuters right and then i'll create new file and i'll name it colors colors util okay dot dot and then i have to create a function which converts which takes in a string hex uh string color and converts it into the color which is accepted by flutter so i have already created that i have this function ready over here i'll just copy it all it does it takes a string hex color and then convert it and then return me a color which is accepted by flutter right so i'll use it i'll use that so in the colors it needs list of colors so list and then hex string to color and then i have my colors also defined over here if you see these are the colors we have to use i'll just copy it just to save them some time and i will remove this because that now we will just paste our colors okay so there you go oh okay so this is not what we want we want linear radium from top to bottom so for to do that what i need to do is in my linear gradient i can just give end uh sorry let's start with begin and say alignment alignment dot top center and end alignment dot bottom center right and we have our credent very nice now we have to have our button through which we will be logging in so let me fast forward the coding part for the button so that i don't waste your time and then we will see how to how do we you know use our firebase to login with gmail id now our but button is ready to log it right and what i did is very simple i have created an elevated button and just wrapped it with a container because we needed some margin and in the elevated button on press we're not doing anything as of now and then there are some buttons style to keep like to keep the uh you know to get the background color when we press on the button so it looks nice right and then uh in the button inside we have like a text and an image so that is a row as you can see over here and i have added image a google image as you can see so in i have added a folder assets images and then in that folder i have my google image and i also you know added that like uncommented that assets images uh in the pub spec ml so i'm sure you know all these how to add an image and all that things uh so yeah so we have our ui ready okay for the login screen at least we need to have a home screen so as of now what i'll do is i'll just create a stateful widget call it home screen and very simple just import material and i will call it scaffold and let's give it an app bar and empty and bar should be fine so that we just we can just call it from here so on click of our this login button i will move to this to that file so navigator navigator dot push and we will go to our material material page route okay and then in this just like we call our widgets so um the name of our file is home screen and this should be good let's just i think we have extra okay uh what is the problem i have to import it okay this is and i need to call context sorry click on next to this and this should be good okay so now if i click on this login with gmail it goes to this empty screen which has nothing so uh we can add our logout option logout button as well so that one click of logout i can come back to the screen so let's let's do that as well quickly so create a body and in center i will have child and i'll have an elevated elevated button on pressed i will not do anything as of now and child will be a text which will be calling log out okay so now we have a logo button in the center of the screen and on click of it we will go back to our login screen so let's just do it you're not doing the actual login yet but i just wanted to do the uh navigation between the pages so let's let's just copy this and paste it over here and instead of home screen we will call login screen okay so when i click on logout i should be okay back on the login screen okay that's fine but we want when we click on it i want to perform google authentication right to do so we have to first go to our console.firebase.google and we need to create a new project so click on new project give your project a name so i'll say google login and continue just enable everything and continue select an account default account should be fine create project and this will create our project okay so our project is ready our firebase new project is ready so click on continue and it would show you the dashboard so this is the dashboard for firebase and you can see we have all these services available with this firebase project right so we have to click on authentication because we are doing authentication service and click on get started and now you can see that we have the sign in methods right so we have all these silent methods which we can use through firebase to do authentication for our application so i had already created one video for email password authentication if you want to see that you should be able to see some something over here and on the top at the top uh some link which can take you to that i i will give this i'll give that youtube link in the description as well so you can go and watch that if you want otherwise we can go ahead and click on this google service google sign in authentication right so click on that and we have to enable this right uh okay so we have to give a supported gmail id as well so for me it is the gmail id with which i have entered so i can click that right and then click on save okay so now our google authentication sign in service is ready very nice now what we have to do is we have to set up our projects our android and ios project uh we have to uh set it up for our application which i have created so the flutter application we will set it up with our firebase so to do so let's add let's add this android so click on android and you have to give your package name so where do you get that package name go to user studio go to this android folder go to app src main and in this you have android manifest dot xml so just copy this package name and paste it here right and then uh optional nickname if you want to give i will say google sign in this is completely option so if you don't want just leave it and then we have to give this sh a certificate okay so this is very important because as you can see over here required for dynamic links google sign in or for number support in authentication so we have to do it because we need google sign in so click on this question mark and it will say see this page so click on it and it will take you to this page all you have to do is scroll down and over here it says you can get that certificate using this uh command line command um terminal command or command prompt command something right this using this command you can get your um you can get your sha key right so just copy this if you're on mac copy this if you're on windows copy this okay so as per your os just copy the correct command and go to your terminal and paste it so i will go to my user studio terminal itself so let me get it in the terminal i'll go and paste this command just enter and it will ask for keystore password and if you see over here it's certain the default password for uh the debug key store is android so just enter android and you should have your sha1 so just copy this sha1 we will copy it from here and paste it in our console right so over here and then click on register app so once you click it it will give you a config file download config file right so we will have to download it and keep it in the apps folder in the android application so this is so this is showing the native android application what we need to do in uh in flutter application in the android if you see we have app so in this app folder in this app folder we will keep our google services.json file and this json file basically connects to your connects your google uh you know firebase application with your mobile application so just drag it and put it in the app folder so there it is i have downloaded multiple times which is showing number six just delete it if it is the case with you and then you can see this is all the ids and everything it needs to connect your mobile application with the firebase server click on next and it will tell you some more um you know some more uh changes to do in your application for firebase to run in your application right so what you have to do is go to project level build first okay project level build gradle and then do these changes so we will go to so in the android folder itself because we are doing all these changes for android app so that's why we are in android folders in the android folder so when when it says project level build reader so this is our project level build and this is our build gradle right so over here we have to make sure that google is there in the repository so google is there fine and dandy and then dependencies we have to add this dependencies so i think this is not there so in the dependencies we don't have that so let's add it google services it's added now okay now in the all project repository google should be there it should be already there so you can see it is already there no need to add it now it says you have to go to app level build reader and do these changes so go to app level build reader so app level build reader will be in this folder in app and we have this build reader now we have to see if these are available or not so apply plugin com dot android dot application i think it is there it is there no need to do anything this one with their google services so let's let's just copy that and paste it and then in dependencies we have these two dependencies we have to add so one is for firebase let's go to dependencies over here at the bottom and add new line and add firebase and then this google services dependencies click on it to copy and then add the cell over here as well so this is all uh there's one more thing actually the default file flutter application minimum sdk version supported is 16 which is not supported by firebase so we don't want that so let's remove it and make it 22 okay so make sure you do that because otherwise it won't work and it will give you minimum sdk error which we do not want okay so now we click on next and continue to console so our application is ready to ready to be all set with the i'm sorry i'm babbling all set for android okay very nice now what we have to do one last step is we have to add the uh dependencies firebase dependencies in the prospect yml file so to do so we have to add our dependencies in the in this in this part right below this flutter sdk flutter right so i have already written all the dependencies we need we need a firebase score we need a firebase auth and we need google sign in so let's copy it you can get it from for dev uh from online apps as well or you can use these whatever is the latest one you can use that so this is the latest one as for today uh so i have used these okay so eb needs these dependencies to call all the services of label and firebase right so flutter pubget is running very nice let it run so now our flutter pupket is done and we have all the dependencies in our application so now what we can do we can write our firebase authentication uh for google sign in right so what i'll do uh let me just close these android folder assets folder everything and in lib i'll create one more folder and i'll call it services okay and i will create new file and call it firebase underscore services so we will write our sign in and sign out uh methods over here so let's create a class and call it firebase services and in this we will have two methods one for sign in and one for sign out so we will have sign in with google this wouldn't take anything but it will be an asynchronous function and we will have a sign out sign out and this would be a sync as well okay and we let's let's create two variables one for firebase authentication and one for uh google sign in so i'll call underscore auth i'll call my variable underscore and it will be firebase auth dot instance so one is for firebase auth instance and another one is for google not so this would be final google [Music] sign in we will call google sign in this one yeah and that's it so these two variables we will be using in these two functions so let's let's write our sign in function pass so what we will do is we will be writing first of all our code in a try catch block okay because this would throw some error so now let's create a variable of google sign in account and this would be a optional and we will say google sign in account and this would be an await because that might take some time and with this google sign and we can call our method that is sign n okay so this is our first google sign-in account variable which will call our authentication so we have to first because it is an optional we have to check if it is null or not so let's do that i will say if this is not equal to null then i will use it to create a google authentic authentication variable so again google sign in authentication i will call it google silent authentication and you this will again be an and using our first variable which is google sign in account dot authentication and we have this now using this we will call our auth credentials which will be basically what it is doing is when you click on sign in this function will basically call your web page to sign in with google right so all these steps are for that so let's create our auth credential so auth credential final ord credential i will call it our credential and again using our okay not not we won't be using this we have a function called google auth provider okay not provided id we will say credentials so it will take the credentials which you will be entering and uh so not exactly the username and password it takes the access token access token and we can get the access token with google authentication dot access token and it also take an id token and this would be google authentication again dot id token okay so this is it now let's let's put uh okay and we will have last thing to use so with this auth credential we will be able to login so what we'll do we will use this auth firebase auth so again this would be a weight underscore auth dot and now our final function which will make us which will you know finally which will basically finally log us in sign in with credential and we have this auth credential that is it that is it for the sign in and in this instead of catch i will say i will say for a particular exception that would be firebase auth exception so if during the exception if we get this we will catch it and i will just simply return uh you know print the exception you can return it and handle it in the way you want and then throw e because i mean we are in try catch block and if there is an error we will throw it as well so basically what we are doing we are just calling our google authentication and this will basically open up our you know our web browser in that you will use with this auth credential provider when you will log in this auth credential provider will get some access token and id token and using that auth credential we have in firebase we have the sign in with the credential and then we will provide this auth credential and we are all good so just simple step first get the sign in account this will basically open up the web page second we will do our authentication we will from once user enter their username and password and they are signed in they will it will take the credential and then sign in in our application using this uh firebase authentication right so this much of code and you are good to go with google sign and that's how great it is okay for sign up also all the this is um very simple all you have to do is call the uh cy naught on both uh google sign in and auth so in auth there is simple method like sign out and similarly await again and we have sign and google sign in and with this also sign out so both of these sign out will have to do then only our user will be completely signed out so with this uh i can now use this firebase services and call this sign in google sign in with google method to sign in and then sign out with this so let's go to our login. and before call going to home screen i will first log in actually so again as we had written an asynchronous function we will have to make sure we are calling it inside an sync so we have we have to say sync and then over here we say await firebase services firebase services dot sign in with google okay so this will sign you in okay and then uh in the home screen on the logout again very simple we will have to say await and let's make it sync and i'll call firebase services dot sign out so that will sign us out so let's let's test it let's run our application let's close it run our application and then see how it works okay so our app is running now no error is there so that is a good sign uh you have to make sure when you are running a google sign in type of application you need to have your emulator with play store so what you have to do is go to your android studio and make sure the emulator in which you are running play store is available in that emulator okay otherwise it will throw you an error okay so let's let's click on login and it throws it in our okay so the problem is we did not initialize our firebase so that is that is a huge problem so let's let's go to our uh main. and before running our application what we have to do is we have to call a widget binding widgets flutter binding dot insure initialized and it will ensure that our firebase is initialized and i'll say await firebase let's say sync as well over here otherwise it will complain sync firebase firebase dot up that should be good so this is the first step you should do when you add firebase which we missed so no problem now we have added let's run it again okay so our app is running now let's click on login with gmail and it should open us okay so i have already logged in like while testing so you you will be taken to a screen where you'll have to enter your email id and password i've already entered so it says that which account you want to select i will select this account and it will do some processing and it comes to the screen right so as we have seen in our login dot dot after this after once this is done we will move to home screen and in the home screen when we click on sign out it will sign out and take us back to the screen so let's let's do that again so let's do this log out and we are logged out login with gmail it will again ask you to select your account select your account and enter and you have many other things to do like um like you will get access to your account like like the user which has entered like the user which has signed in you will get all the details about that user so let's just let's just show some user details so i will just and wrap it in a column and keep it in center because i don't want it okay it is already in center okay so wrap it it is an element not not here let's let's wrap this whole elevated button in a column and before the elevated button we will show uh let's say username okay so uh that would be firebase auth and we want to show it in um in a string let's use our dollar sign and then firebase auth firebase come on firebase okay five is auth dot instance dot we'll say current user dot display name so this will give me the current user's display name the problem is current user is actually optional you can see there is a question mark so we have to put an exclamatory sign over here and then it should work we will put a comma and our ui is not responding uh but you can see at the back we have our harsher edu written which is the username okay and it has come on top let's just close let's click on weight i don't know this is some simulator issue and i'll say in the column i'll say main access and let's pull it down so main access center and this should pull this down okay and let's let's write our email id as well so this should be email and this will give me the email address very nice now i want the image as well right so let's let's get it so we'll say image dot asset not asset we will be getting it from a url so network image and we have to pass our url so that would be again firebase on dot instance dot current user and exclamatory mark and i'll say 40 ui so this exclamatory mark basically unwraps it's like it it is like force unwrapping our optional which is not correct you should not do like this when you are uh doing it in a production app you should never do this you should always check if this is null or not if it is not null then you you can use this exclamatory marks because it is just a simple project so i'm just using it but you should not do it in the production app so let's save it and i should see okay now i can see my user image as well let's give some sizing let's give some spacing as well so that it looks nice i'll give a height of 20 okay now it should look a little bit fine okay now we have our app running properly in our android application now let's do the same thing for our ios application also as well so as you can see in our console this is all we have only added android application let's add ios applications click on ios and we need our bundle id so to get the bundle id what you have to do is you have to go to your project directory so i have kept my project over here sign in google right and over here you can see ios folder so just go in that folder and you have this runner.exe workspace click on this workspace double click on it and if you are on macbook then only it will work it won't work in uh you know in the windows so if you are in windows you can run your application in android phone in android emulator only so uh you can skip this part actually so if you are an i macbook you can run your application in the xcode and see the bundle id we can actually see it in our visual studio code as well but that's a bit complicated you have to go in project directory and so many uh inner levels so better to open our x code itself which we already have so let's click on this click on this project and if you see in general in the targets you have this selected and in the general we have this bundle identifier so just copy this and paste it over here everything else is optional so we can leave it register the app and you will have a config file just like what we did in android application setup right over there we had a google services json file over here we have a plus file so we will download our plus file and where we have to keep it as it shows in the project we have to keep it near infrared p list in our application so if you see our info.plist is over here so let's drag it and keep it over here we want to copy item if needed everything selected and click on finish and we have our in google services dot info we don't want this file so remove it and there we have it okay another thing as we did in uh so if you click on next over here this will show the setting for the core native ios application which we don't want we want it with our flutter so just click on next next and continue to console so that is all we had to do in the console but come over here again in the xcode and there are one more thing we want to do so as we did in our android application the minimum ios uh minimum android os supported was 16 and we increased it to 22. similar similarly we have to do it in our ios application as well so if you see our minimum os supported is 9.0 so we have to increase it let's select ios 12 same thing we have to do with this project runner so this is this was the target runner in the deployment info we changed it now go to project runner and in the ios deployment target select 12.0 okay and now over here as well app framework info minimum os version and we will change it to 12. that's it these are all the changes you need to get your application running in your iphone device or simulator so just close it we don't need the xcode anymore and go back to our visual studio now from here since our iphone is selected we will uh we will go and change it and select our uh okay our pixel was selected so we'll go and change it and select our iphone so iphone 11 pro we will select and we will run our application for android i had told you let's just close this application for pixel and then okay iphone is selected and now run it okay so our app is running now in iphone simulator as well so when i click on this it will ask you to sign in if you want or not just click on continue and then select the account through which you want to sign in and you have your information available in the home screen so this is it this is how you use firebase google authentication firebase service to sign in with gmail account and yes this is it with this video so thank you so much for watching if you like this video please do not forget to subscribe and do tell me no let me know in the comment section if you have any suggestion for my next video thank you so much bye

Channel: Harsivo Edu

Views: 14,004

Keywords: Flutter google login with firebase auth, Gmail sign in with flutter, flutter google sign in, flutter firebase google sign in, firebase authentication, firebase auth with flutter, flutter firebase tutorial, flutter, flutter tutorial, google signin in flutter, flutter login firebase, flutter sign in with google firebase

Id: 2AJwuUVD5_Y

Length: 40min 26sec (2426 seconds)

Published: Mon Dec 20 2021