Google SignIn with Flutter | Android, iOS and Web tutorial

in this video i'm going to show you how to integrate google sign-in on android ios and the web platform we are going to have step-by-step tutorials starting from firebase app creation to setup in individual projects and then doing get-x integration so that we can update our page automatically all of this coming up right after this intro [Music] what's up everybody i'm your host azil and in today's video we're gonna start with the ui design then we'll do the ios integration and get a state management basically eighty percent of the time we'll be doing the above three tasks and this video has a chapter so you can navigate easily through them okay let's get started so we are going to use the command line to create the project so you can select any folder you want and then write a command flutter create and here we are going to provide the organization name in reverse domain and this is really important because we need the package name in proper this fashion now pretty much you can get the same result if you want to create from vs code but you have to go to the manifest and info place to get the package name that is only different okay let's get started and open the root file of our project which is main dot dot and here we're gonna get rid of all these comments perfect now let's go ahead and create a login page where our actual ui will reside and i'm going to use one extension to get the template of the page which is called get a snippet or get template something like that i'll put link in the description below a simple extension but it makes writing code more productive isn't it okay so we have the login page let's go ahead and link this from the main page here we go now we can give this application a run and meanwhile it's building we're gonna go ahead and create our firebase project i have added link for this firebase console in the description below so basically what we're gonna do is name a project whatever you want to create and when you say continue it's gonna end up giving you the project which is like empty we don't have any ios android project so we're gonna create those project in this tutorial all right so our application is up and running over here we're gonna go to the login page and define the ui and at first i'm just going to define a floating action button with some text which says sign in with google now there's nothing fancy going over here let's give some stylize so i'm gonna give the background color of white and foreground of black so it looks like a white theme and let's also give it a icon now you can totally stick with this icon if you don't want to add assets and all those things but just for the ui sake i'm going to add asset for the google icon and here we have nice and clear google login button perfect now let's go ahead and do the ios setup part first we'll create ios application and this is very important you have to enter the package name exactly the same way you have created your application you can check inside info.plist now for the name we can give anything like ios app and once you register the app basically you have to download this google service info.plist this file contains all the information of your application so we're gonna go ahead and bring this file inside our application it's totally fine even if you're watching on a windows machine because this is related to ios setup we are just gonna move to the integration part so basically what you have to do from visual studio code you have to fire up xcode okay and inside the runner over here in the root directory you have to add this file okay and make sure these check boxes are selected in the same way you can see on the screen add this file and we are done with the xcode part so basically you can see this file is added over here you can close the xcode now and you will see the same file inside vs code and now there's a reason because it adds a reference in particular way so we have to do on xcode okay let's go ahead and go to the google sign-in package and see what steps are remaining basically we have covered these seven steps now we have to add this dictionary inside our info.plist now we have to go to the runner folder inside that we have info.plist make sure you paste this value over there not inside the google service file just i'm going to format this and over here we have something called reverse id now you have to copy this information from your google service and then paste this inside the info.plist don't make mistake over here be careful you are copying data from google service and pasting inside info please right it's easy so now we are done with the integration part let's go ahead and add an actual package which is going to do the signing job so i'm just going to say flutter pub ad and the name of the package which is google sign in and here we have the package imported now let's go ahead inside the on pressed event and i'm going to say google sign in dot sign in so this is the method basically to do the sign-in thing and of course we're going to do the get is integration but for now let's see how application is working so i'm going to click on this button and we got this exception that google sign-in is not found anytime you get this exception it means that your library is not yet referenced inside your application so you have to stop and give it a rerun along the way we are learning so many new things so a like will be much appreciated now let's go ahead and click on the sign in button we have something to look at and bam we got another issue so let me just uh convert it to english so that you can also understand and basically it says authorization error and it's talking about something concept screen now i'll put link in the description for the cloud console so you have to go to cloud console and define the oauth concept and make sure you have the proper project selected once this console is loaded okay so i'm going to select the project codecs if you remember we created the firebase in codex project now once your project is selected go ahead and click on this oauth concept and over here i'm going to define just a simple setup we are just going to authorize this for the external use and you have to just specify the email address leave all the fields empty and just provide your email address click next next next and finally you have to click on publish app over here once you publish you are good to go so let's go ahead into our application and just skip this exception for now and we're going to give a return after that we can click on login so we are getting this proper page and we have the proper email now you may get the login screen if you haven't logged in previously but for me it's there okay and once i log in i get nothing because we didn't have defined the interface for the profile so let's go ahead and do that real quick i'm gonna keep it nice and simple so let's go ahead and use circular avatar for the profile picture and two text widget one for the name and one for email and also let's bring this thing down in the center don't worry this is just a structural thing once we do the integration with get x we are going to fetch the data and populate inside this dummy data okay so let's go ahead and create a login controller this is the time we are going to go with get x state management thing so here i have defined the page let's go ahead and import the package as well so we're gonna write a simple command flutter pub add and the package name which is get perfect so the package has been loaded now let's go ahead and make use of the extension again so i'm going to write get controller void which is going to give me the template of controller which is pretty simple right and here i'll say login controller now i'm going to define the google sign in the same class which we did on on pressed method so basically we'll be doing everything from the controller and let's go ahead and define a login method instead of doing things from the ui it's better to do inside a controller so here i'm just going to say google sign-in dot sign in okay and now this sign-in method returns google sign-in account which is the actual user data so let's go ahead and define a variable for that now we need to create an observable variable so that initially it will be null and later on we're going to change the data so let's try to do that so we'll be using google sign in account and create an object of that and we have some issue we cannot create object of this class let's try to write obs and it's not working and this is not the issue with get x because the google sign-in account it's not allowing to create objects so we have to find some other way around so what you can do you can wrap this google sign in account inside rx and then create an object with a null data and because we are working with null safety we have to put a question mark that's it so now inside this variable will capture whatever user information we get so we will write google sign in account dot value and still we have some issue and the reason because we get a future of google sign-in account so we have to use a sync and a weight it's that simple to write inside get x controller okay now we are done with the controller part almost let's go ahead and refer this controller inside our login page so we're going to create an instance of controller in this way we have to call get dot put and name of the controller now using this controller we'll be writing a condition but before that we have to fix issue of these two child so let's go ahead and simplify this by extracting to a method so for the button i'll just say build login button something like that and we're gonna extract the column as well so here i will say build profile view now that we have method for both of the widgets let's go ahead and introduce obx inside widget hierarchy now obx is responsible for updating the widget if you have some observable variable inside it so here we are going to put the condition on google sign in account data okay so i'll write condition like if controller dot google sign in account dot value is equal to equal to null then it means that there's no data and we have to show the login button otherwise we can show the profile which means that we have the data right it's a simple logic just we are updating the widget based on condition and this condition is listenable so i hope you guys are enjoying this tutorial at this point of time we are almost there we just now have to integrate the profile picture and all this stuff so let's go ahead and use the controller dot login method inside on pressed event done and now we are going to give the application restart and we're gonna see how it works so let's go ahead and click on the sign in button we got the control over here perfect now i'm just going to play and authorize from my gmail account let's see what happens we got this blue screen so the ui got updated which is fine now let's go ahead and quickly update the profile section so here for the name of course we are going to use controller information so i'll write something like controller dot google account then we're gonna use the value inside it and which property we'll use for the name uh display name right so let's use the display name and because the display name can be null because it's a null safety so we have to put a check and give uh empty string now the value also can be null so we will put a question mark over here this is a simple statement which just fetched the data from the display and you can see the name over there now let's go ahead and do the same thing for email and instead of display name this time it will be email address now also i'm going to change the styling a little bit so that you can see it better and also it looks better so i'm going to use the style with get dot text theme and i'm gonna go with the headline three now for the email address i'm gonna go with the body text one all of these text themes are built inside flutter so you don't have to worry about that and the reason it's not reflecting because we have to do some modification in the main file and before we do that modification let's copy the same value for the photo url so basically this profile picture will come from the photo url and the same logic will apply we have to do a null check perfect we have the photo we have the name and email let's go to the main file and change from material app to get material app now what it does it brings all the feature of get theming routing and everything in the place so that we can talk in a later video now only one thing left to do is add logout button for that i'm going to use action chip which says log out and also you can add icon as a avatar which says log out right it looks like a logout button now so let's go ahead to the controller and copy this method and it's going to be exactly the same only thing will be different is instead of signing we'll be calling sign out that's it right so that is what it takes to create logout method now let's go ahead and call controller.log out from on press method so now i'm running it for the final time and you can see that i have selected my profile it is visible all the information and when you say logout it's logged out so we have successfully integrated google sign in on ios platform next up we're gonna do on android and web before that let's give shout out to our channel members who have recently joined thank you so much for that i really appreciate you guys and you can also contribute channel codex by taking membership or buying me coffee on buy me coffee or at least you can hit the like button and write down the comment section your feedback about this video that will really be helpful and if you're new here a sub will be awesome all right enough of interruption let's continue with android integration oh so much of editing okay now let's go to firebase console and we're gonna create one more app for android make sure you add the correct package name net dot codex dot flutter sign in which you can find inside manifest file okay after this we have to add sha 1 fingerprint now what is sha1 fingerprint and how to get it you can go to terminal and move to android directory by using command cd android and then run this command which is gradle the blue sign-in report and it will give you the sha-1 sha-256 and all the different keys but here we are concerned about sha-1 so you can go to the debug section and copy the sha 1 fingerprint and this we are going to paste inside of our firebase console let's go ahead and copy from here paste inside firebase and register the application and just how we did for ios we're gonna download this google service file and paste inside android directory but this time it's quite simple we don't have to go to android studio or stuff like that so let's go ahead inside visual studio we have the android app over here let's minimize and we're gonna paste inside the app folder so make sure you don't paste inside android root paste inside app directory inside the android folder that's it now i'm going to launch the android simulator which is running over here and we have the application up and running let's click on the sign in with google we have the nice dialog select the profile and bam you have the profile inside android so basically we have done integration onto platform which is android and ios now we're going to move to the web part and this is going to be even simpler so let's go ahead and create a web application you can name whatever you want and basically that is what required on the firebase console side so now we have the web app let's go to the setup what it requires so here we can find the documentation basically it says you have to add this metadata inside your index.html file so let's go ahead and do that so i'm going to paste that meta tag over here and one thing inside the content you have to go to the cloud console and put the credential value so basically we'll be putting this client id so let's go ahead and copy this value and paste inside content perfect now instead of running directly on the chrome browser we have to run it on particular port and you can see over here if you click that it can allow to run on 5000 port or this url so let's go ahead and find out a way to run on specific port inside flutter you can go ahead and type in a command flutter run minus d which is device chrome and then we will provide the host name and the port name ourself let's see how does it look on the chrome browser here we have the brand new signing application running on chrome as well let's click on the button and we got the authorization screen so here we have to log in because i'm running like this chrome browser it created a new instance so i have to login again and then i'm authorizing on my tab over here and bam we have the login profile on the browser itself so now basically we have done on android ios and web perfect wow that was so much of content so much of information and if you want to learn more about flutter you can find two videos right over here make sure to check them out i will see you guys in the next one you

Channel: CodeX

Views: 10,879

Keywords: flutter, tutorial, how to, android, ios, ui, getx, sign in with google, sign in with google flutter, firebase, firebase with flutter, flutter tutorial, web, login, with google, null safety, codex, auth, console, firebase console, google_sign_in, getx snippet, authenticate, latest, 2021, flutter 2.2, state management flutter, login with google, web app in flutter, google sign in, flutter google sign in

Id: Q00Foa8CiDk

Length: 17min 49sec (1069 seconds)

Published: Sat Jul 24 2021