Flutter - Google login Authentication with firebase - How to add Google Authentication in Flutter

hello guys my name is junaid khan and i hope that you all guys are in a good state of health first of all i want to apologize for keeping you so long waited for my tutorials but i am back and i am back with a new technology which is flutter and in this in the in this playlist i'm going to teach you how to use every authentication method of firebase with flutter okay so in this video i'm going to teach you how to use google sign in with flutter but in the upcoming videos i will teach you the other methods as well so subscribe our channel and press the bell icon so you will be notified with our latest videos okay so for now i suppose that you already configured flutter with android studio so i'm not going to teach you that specific method but i'll promise that i will teach you that method in my upcoming videos as well but for now i just click on create a new flutter project and here i need to specify sdk path click next um after that i have to select my directory in which i need to place my source code and i will keep the default options and i will click finish and i hope that it will create a new flatter project okay i need to see that what's the matter with this so yeah it just created our project successfully and after that we need to move to a firebase console where we need to create a new uh firebase project just click on net project you need to specify the project name which will be like this and i'm just yeah just select the default account for firebase create project and it will just take few seconds to create a new file based project okay so [Music] yeah our firebase is project is created successfully now click continue and it will open you that specific firebase project and so now right now i'm telling you and i'm showing you how to integrate google sign in with android so just click on android you need to add your package name here which we can get from [Music] explore go to android directory go to app click on build.gradle and there you will find your application id just click see control copy and paste it okay then we have to create our shaky so i'm just showing you uh simplest method i just opened the terminal in android studio click cd android we are going to the enter directory now we have to write this command greatly signing report and click enter it will take few time oh yeah and just create it in just three seconds now this one is your sha key just copy it and paste it and register app okay now we have to download and download our google services.json file let me just click on download and it will download yeah okay so i already have one i just deleted and i will save it on desktop and click yes and it's downloaded perfectly okay so we need to place this file in this app folder we just need to go to our desktop click just copy this file and we need to open this select this folder paste it and yeah it paste it and it added successfully now we have to open our console again and we have to move to the our next step which is to place this class path okay just copy this line open our project again and yeah you need to open the project level build.gradle file and under the dependencies you need to place this okay and just skip this and you need to copy this line as well just click copy and open your project again and now you have to open the app level build.gradle file and you need to place this right this okay yeah cool okay and click next and continue to console after that we have to enable our authentication in firebase just click on authentication option select get started and now you have to enable google method and just click enable now you have to configure your support email which will be brock lash.org to html and just click save okay yeah see google enabled now we have to open flutter fire which is a very good website which show you show you the documentation that how to integrate firebase in in just an easy manner so we have to click on authentication documentation now we have to move to our social auth and first of all we have to overview and here they are saying that we have to integrate two libraries which are firebase auth and firebase core so we have to open pub.dev so we need to search for firebase core and here it is you need to open this just copy this and you need to open your project and open your pubspec dot yaml file and right here you need to paste this live package and otherwise another was better firebase auth let's click on this just open this and just copy this open your project yeah cool okay so these two the latest versions of these packages have been integrated now you have to open social auth just click and see that we have need to integrate uh google sign in package as well just click on this it will redirect you towards pub.tab so just copy the latest version open your project again and just paste this now you need to pop get so it will install these packages in your project and just click on this it will take 10 to 15 seconds to download these packages integrated okay so these packages have been integrated successfully for now i'm just removing this demo code from our project and i will write our own code which will be login with google i'm just naming this as like this and right below this we need to create a stateful widget login with google and it does well okay so now we need to create our ui part first which will be scaffold about and we need to define the container no we don't need to define the container for now we just you need to use column okay children and the first will be text and here we need to use row for now because we need to show the title which will be user email and that we will need to show the signed user email so text user email and text so we need to create a variable user email and we need to initialize it as empty and we need to pass this user email here okay okay so we created two and we need to define our main access alignment so main access element will be space between and this main access alignment will be center and so i connected my phone with visor and now i'm going to run our app on my mobile i just collected redmi note 8 pro from my connected devices and just click run and it will take almost one to three minutes to run our app on our mobile so let me open this see so the app have has been installed successfully in our phone and i think so we need to add a button so when we click on it it will open the dialog so you can select the email for google okay so i'm using elevated button right now i'm leaving it empty text which will be login and just press hot reload and we will see okay so the button have been added successfully now we have to add up second button which is for logout okay now control s yeah now we have to add some padding here okay yeah now it's looking up i'm not focusing on design right now i'm just focusing on logic right now so after this we have to open flutter fire again and we need to check okay so we will just copy this method and sorry we need to open yeah just paste it we need to import the libraries by pressing alt enter alt plus enter again alt plus enter and because i'm using um the flatter version which is greater than 2.7.0 so it's null safety and we need to ensure that no variable should be null if you are using it okay so we just need to call this method so as you can see this this method is future so we can use async here await and sign in at google now after that we need to set state one more thing we need to assign the variable which we created user email we need to assign the email to this variable so we can show it in our text field and so we need to use google user dot email yeah okay and after when we press head state it will show now one more thing we need to ensure that firebase must be initialized here so we can use future white and async and after that we need to write these two lines which is widgets widgets flutter binding dot insure initialized so it's ensured that firebase must be initialized successfully um again now we have to await firebase dot initial firebase y dot initializer yeah so it will ensure that the firebase must be initialized before we can use it okay so we can press again run and we can see that our app must be yeah it's hot restart so we can just click on login button and it will it should show yeah so as you can see that now it is showing us the emails which which i have uh integrated in our in in my mobile which i have signed in with so i can just select one email which is unit contract labs and it should show yeah so as you can see the user have been successfully signed in that's why it is showing me my email okay now we have to implement the sign out method which we can integrate it here okay so um here we need to use a weight again we need to use async await firebase auth dot instance dot sign out method and after that we need to set our user email variable to empty and await google sign in sign in dot sign out so i'm using this method so it should show us the pop-up dialog where we can see the emails again if we if i don't use this method then it will automatically sign in with the previously used email so that's why if you don't want to use that you can comment this line but if you want the user to show to show the user that she should select he she should select the email again so you need to do this method and after that you need to set state okay so again we have to hold restart our app after that okay we need to check okay login yeah as you can see and press logout yeah perfectly fine when you click on it it should show you again the dialog i will just like another email okay i will click log out i will click login again and as you can see that it's working perfectly fine so uh for now the tutorial is completed hopefully we will meet in our next tutorial image i will show you how to use the facebook method till then bye take care

Channel: Proglabs Official

Views: 935

Keywords: android, dart, firebase, firebase auth flutter, firebase authentication, firebase flutter, firestore, flutter, flutter auth, flutter course, flutter firebase, flutter firebase auth, flutter google sign in, flutter tutorial, google auth, google authentication, google authentication firebase, google login, google sign in, google sign in firebase, google sign in flutter, ios, tutorial, flutter fire, google auth flutter, google authentication with firebase, flutter development, social

Id: kHd2E6An2WQ

Length: 17min 24sec (1044 seconds)

Published: Mon Oct 11 2021