Google Sign in Flutter Firebase | Google Authentication using Firebase

and welcome back to cing with today we're going to learn how to log in using Google signin using flutter Firebase so let's first quickly have a look what we're going to create let's run the application and once we are inside the application you can see currently no user is logged in so that's why we redirected to the login screen and in here in the previous tutorial we learn how to login using email and password and you can see also when the application loads itself it fetch the local email and password user stored last time using this remember me option so this is what we covered in the previous tutorial whereas before getting started with the Google signin let's also see the create account in the create account tutorial we first try to add authentication authentication is added then we try to get all the details make sure that this privacy policy terms of use is toog Lael we get all the data create user using email and password once created we pass all the data to the fire store and store the user information inside our fire store so that we can later fetch all the user details and redirect user to the next screen which is to verify his email and also if you is going to close his application right from that state and rry to rerun this application he will be redirected to the verification screen and he has to verify his email first in order to login so we going to start with the Google sign in when user is going to click on Google from either login or from the sign up when you're going to click on this it is going to load a bit then you will be able to see all the list of emails you are logged in using your device among all these you have to choose your email once you're going to select it again you can see we have the loader which is loading behind currently it's processing it is going to check if data is already stored in the fire store it's not going to stored but if it is not stored user is new he's trying to log in for the first time so we first have to get his data stored it in the fire store and then definitely you can see at the top we will pass user to our main application and also in the profile you can see user email user profile picture name and all the other information will be inside his profile so this is what we are going to create in today tutorial if you following you can see we creating flutter e-commerce application and we are in the section four of our playlist we are about to complete this playlist and the section five is the last section in which we are going to deal with the back end of our e-commerce application after this e-commerce playlist when this is going to be completed we are going to start a new playlist which will be related to this one and we going to learn how to create admin panel which will definitely running on the website using the flutter definitely we will also use the Firebase and we will try to add all the data using that admin panel to our application so before directly start jumping to the coding the first thing is that how we going to perform the Google signin authentication the first thing is we going to definitely add the dependency enable Google sign in from console add sha1 which is required for the Google to sign in if you're going to skip part two and part three definitely you will not be able to perform Google signin after that we we going to create a function inside our authentication depository which is going to handle everything related to the sign in authentication then we will use the controller to start loading check the internet connection form authentication and store the data inside user fire store if it's the first time of the user and then definitely we will redirect user to the main screen so let's get started so we are inside our application and in here in the terminal to add a new package we just going to run flutter Pub ad name of the package is Google sign in hit enter head towards the pbpc DML file and it is going to add new dependency over here and you can see the latest which is Google signin 6.1.6 is added now head towards the Firebase console and open the project which we created in our previous tutorial if you open the playlist and you can see the setup Firebase setup tutorial in this tutorial we learn how to set up Firebase account and also we added sh1 which is going to be used in today's tutorial and also we learn how to add sh 256 so you can watch this tutorial if you open that tutorial from the playlist down below you can see you can also get the link of this playlist from here and the pin comment you can see generated sha1 256 Keys one for the Mac windows and Linux you should start from the key tool and definitely you will get sh1 and 256 so let's first go to the Firebase console inside the signin method we already enabled Google signin but if not you have to click on add new provider and enable this Google signin okay once enabled click on this gear icon go to Project settings and inside you don't have to do anything for the iOS and web but for the Android you have to add these to sha1 and 256 so you just have to copy this right from here and if you run this video you just head towards a point which is saying get sh1 256 right from this point you will be able to add sha1 and 256 so once you have the S 1 and 256 you will get it from here and you have to copy individually each of them paste it over here and that's it now let's start coding open the authentication repos which we have already started or if you're not following the series you can create this function anywhere where you are already working with the back end so down below over here we have already completed login with email and password register with the email and password send email verification already learned how to call the log out feature but as it is Federated in entity so we going to work today on the Google signin so simply copy these all try and catch values the same function and in here inside this sign in with Google I Chang the name to sign in with Google and user credentials this is what we are going to return from this function and now we have to change this function whatever it is but first let's talk about each of this exception because previously I get a lot of request that you didn't show us any of the class these are the custom classes the reason to create a custom classes is that want the user to not see any technical error because you see in the catch section over here I am printing this in the debug mode complete error whatever it is the complete exception and simply returning null from this one because I don't want the user to see whatever the technical error is so at the top of these you can see first I'm calling the Firebase o exception getting that Au exception and throwing back again drawing the Firebase exception format exception and platform exception because I want a relevant message for the user to be appeared so that in case if there is anything for the user he should do it right away instead of calling the sport team so first of all we have a pro exception the Firebase Au exception will be bought using e it has some code so we going to get that code open this class it is a custom class and it has a bunch of already created codes email already in use invalid email week password user disable and list is keep on going so these are the code it's going to get using the switch statement we're going to return the string which will be thrown back to user so let's say if email already in Ed we going to display the email address is already registered please use a different email same list is keep on going this is only for the Firebase Au exception if we head towards the Firebase exception which is specifically for the Firebase you will see the same approach we have a code we receive the code using unknown we are going to display unknown Firebase error C down below app is deleted be invalid sender credentials already in use and at the end using a default approach we are going to display some default message then the for the format exception we have some format related errors because we don't have the code so definitely these might not be useful but just for the learning purpose you can display any relevant message for the format most of the time invalid email format phone format date and URLs you have that code and you can utilize by this way and then same for the platform we get the code from the platform if you see over here we have the code e do code we get it inside this Constructor and using do message because this is a getter so we pass the code return whatever string we want to be displayed and that message will be shown right away now for the sign in with Google we first have to trigger the authentication Flow by the authentication flow I means that the popup which we going to display to the user with all the list of emails for that we going to use Google signin so we will receive the Google signin account from the user pop-up screen name it anything use the await sign because this cury might take some time and simply call the Google signin like this and then using the signin method we will get the signin account so Google signin is going to open the popup and then the sign in is going to get whatever the value of that user so everything will be performed from this single cury after that we have this user account now we want that user to be authenticated using the Firebase to let the user log in using the authentication we need the o o of the Google signin so first we have to get the o of the user so which is Google signin authentication and I'm going to name it Google Au or the Google authentication again we have to use the weit sign and use the user account we created at the top which can be nullable do authentication so what's the error okay so error is that we have to add a question mark because this also can be null we get the user current account we get the authentication of that current account if that account is authenticated from the Google we have to create that authentication for our Firebase to do that for most of the Federated identities Firebase use credential approach so for the credentials we have a Google Au provider Google Au provider. all the credentials there are a bunch of other methods that you can use for the Google o provider so for the credentials we have two things first one is access token which we can get it from the Google authentication right at the top it is nullable so add a question mark. get the access token and pass it next is the ID token ID token again we're going to use the Google o dot over here we have the ID token Control Alt l so once we have the credentials we have to pass those credentials to the Firebase and return those credentials back to the function which is calling the signin with Google so that we can use the user credentials and store the data of the user inside our fir store for that we are going to return the statement or the result coming from this statement which is await authentication do fire but you can also call Firebase o. instance because we already have the Firebase o. instance created as a variable over here so we can use this one authentication dot use the sign in with credentials and pass the credentials we have created over here now this is going to tore the user inside the authentication and return those credentials of the user and if meanwhile all these operations we are going to catch any exception that exception will be thrown over here if it's related to Firebase authentication will be part over here for the Firebase exception we will bual it over here and rest we have already covered now once we have completed this function we will head towards the design for the design head towards the features and inside the authentication you can see we have controllers and screens and we're going to go for the login inside the login head towards the login Dart and in here you can see we have t social buttons it is a simple widget which has two buttons the first one is the Google sign in second one is the Facebook button so inside this class we first have to create the instance of the controller because we already learned that design should not have anything related to backend design should be a separate design and then we have a controller which is going to control everything right between the design and the back end so authentication repository is going to deal with the authentication which is related to Firebase fire store Firebase storage or any other database you have add all the functions related to the backend in the repository design will be in the design screens and then we have a controller which will be in the center of these both and going to handle a single operation for each function so now we are not going to do anything inside the design so let's call that controller final controller using get.put we are going to call the controllers get.put is the gex approach to call the class it is going to just create a new instance if you're not using gex you can simply call new and name of the class new is obsolute you can directly call the class name to create its instance but because we are using get. put which is a gex feature so we'll use this approach we have already created login controller so I'm going to use the same controller and we will use this controller to call the function so to call that function on on press of this icon button of the Google we'll call the function controller. Google sign in head towards the login controller which we have inside the controllers in the login we have login controller over here so previously we created email and password signin but today we are going to handle the Google signin Authentication create a function Google sign in it is not returning anything and it will be an async function because we have to call some operations which has a wait sign so compiler should wait until that operation is finished using async approach next we're going to use the try catch and in the catch we're going to catch the error whatever error thrown by the Firebase exception Firebase authentication exception format or any other exception will be bought over here and then we are going to display the error to the user using T loaders do error snack bar let me show you this class again this is a t- loader class Class A simple class and using static functions we can easily call T loaders do any of the function and the function we created over here which is error snackbar is a simple get. snack bar popup or it is a snack bar it has some title message dismissible should icon pears and some of the designs so let's start with the function itself in the try the first thing we have to do is we have to start the loader which will start loading when we going to press the Google sign in we will use the T full screen. open loading dialog this is again a class and this is a static function so we can directly call this without creating instance you can see this class and we have a static method previously people are asking in the previous video that they are unable to use this pop scope the reason is that if they have the older version of the flutter previously it was will pop scope instead of Pop scope so when you're going to use the will pop scope and if you have the latest upto-date flutter you will see a depreciation line on that will pop scope and it is going to suggest you that you have to convert to the pop scope so you have to use this it is a buil-in in the flutter nothing new that I have added and using can poop you will be able to disable popping off the back button so it is again a simple loader which is going to open animation loader dialogue so this is the animation widget it has one text one ly asset which will be animating and then have a Boolean check either you want to display a button or not then we have a stop loading Navigator of context. pop so start the loading then we going to check the internet connection using network manager which we have created we use use the connectivity plus when you head towards the pup speec and see the connectivity plus over here we use this package and created some defined classes which is a connectivity class using a stream subscription we have already subscribed Whenever there is no internet it is going to trigger this function because we are listening to this function and whenever it is going to be triggered it is going to check if there is connection result is none it is going to display the snack bar that there is no internet connection instead of that specific message I'm going to create a custom toast which is a snack bar and using That Snack Bar I'm displaying a custom toast so displaying it over here connectivity after that this is a custom function is connected whenever this is going to be called it is going to check the connectivity which is the connectivity package instance and call the check connectivity function if result is none return false this means that is not connected if it is true this means that it's connected and if there is any platform exception we will display false again and after that we have a close to cancel the subscription and in here when we are going to call network manager do is connected variable when if it is going to return true we're going to check over here if it's connected we will not going to do anything it is not connected using the not sign we will stop the loading and simply return so stop loading is over here navigator.of context so we'll stop the loading and return so return is must if you're not going to call the return you will definitely be redirected to the next screens and compiler will start compiling the next part now you have to all the Google authentication so to receive credentials use user credentials is equal to Now call the authentication repository do instance this is going to call get. findind feature because we have a getter which is do instance get. find is going to find the instance which we have already created using get.put if you remember we created login controller instance using get.put because we was not sure that either the login controller instance is already created or not so that's why we have to use get.put otherwise we will definitely facing some error so in here authentication repository is already created inside the main Dart whenever the Firebase is going to be initialized we use the getput to create the first instance of authentication repository and then whenever we want to use authentication we can simply call get doine and it is going to return the authentication of authentication repository so use this instance dot we can call sign in with Google function now it is going to perform all the authentication return us the user credentials and also we have to call the await sign now as we have already created the sign in with Google we have the user credentials now we want to store these user credentials Inside the Fire store and this is what I'm not going to do over here because maybe we have Google sign in we have Facebook signin sign in with apple and bunch of other Federated identity sign-ins so we cannot redo again and again the Google sign in over here and also the job of the controller is very obvious that controll controller should not deal with the functions which is not related to its own let's say we have the login controller storing data is not the responsibility of login controller right storing user data should be the responsibility of user controller so instead of creating a login controller over here not inside this authentication inside the personalization in the controllers create a new file user controllerart you name it user controller and extend it with a gex controller now also we want to to use gex and for that I'm going to call static user controller so whenever want to use user controller. instance later on when the first instance of user controller is created later on want to use the same instance throughout our class and we don't want to call get.put so for that I'm going to create this getter using get name it instance and next we have a function using fat arrows we can create a single line function and that function is simply going to return get dot find now it is going to find this instance from the memory so whenever there is any instance it is going to return so we can easily use user controller do instance so in here I've created a function save user record which is a future type of void not returning anything and an async operation it is going to perform it will definitely get the user credentials from any of the Federated identity we'll use the same approach try and catch in the catch we're going to display the loader which is warning snack bar we have a title and message because currently we didn't yet get the user dat data from the authentication and we're not using the user data inside our application so we're not going to add additional check over here which is going to check that if user is already logged in and if user data is already stored or not so this is what we are not going to check over here because that will be very soon at this stage we will definitely going to come back to this stage in the next videos but now we are only going to check if user credential is not is equal to null the first thing we have to do is we have to convert the display name which we get from the user credentials to first name and last name because we storing the data in the first name and last name variables final use the name parts user model. name parts and we will store the name parts because we first have to divide into part one part two let's say we have three parts of any name or two parts first name and last name so we have to convert it using the model which is a user model we have already created for the user we have ID first name last name username email phone number and profile picture now we want to map that data on on to this model so that we can store it and inside you can see I have a helper function it's a full name simply add first name and last name variable from here and return it as a full name then we have a formatted phone number same way I have a name parts which have a list of strings it is going to get any name split it into half using the spaces so let's say we have a full name which is coding with P so we have three names with the two spaces so it is going to get that divide it into name parts return the list we can use it same way we can generate a username so it going to split first using spaces get the name parts as a first it is going to convert into the lowercase and the rest all the remaining will be used as a lowercase as a last name combine first and last name add some prefix return the user name these are some of the helper functions now to get the name from the user credentials or from the Google we have to call user credentials do user property this can be null so we know we have some data so we're going to call user do display name as this display name can be null so double question mark at single quotes this means that if display name is null return empty string using the same way we are going to generate the username do generate username and we want to generate the username for the same display name definitely if you want a unique usernames you can do any other approach now we have to map the data on the user model so the first thing is the ID we want to store the user using ID which is being used in the fire store if you head towards the Firebase console inside the authentication you see every user has a unique uid so we want to use this uid and using that uid we want to create the document of the user or store the user data inside the fir store so you can see the user will created in our email and password authentication and also store user tutorial you can see this email and it has a u ID which is starting from WK 3A and the same ID is over here with the same email and rest of the data there's no password so this is what we want to do so for the uid we have to get the uid from the credentials call the user. uid for the first name we are going to call the name parts add zero index will be the first name using this one because it is going to return list of string so first one will be the first name last one will be the last name so to get the last name it might have two to three characters so for that we have to check if name parts. length is greater than one we'll use name part. sublist sublist means means that the remaining list so remaining list where we want to start this remaining list from the first index because zero is already stored it is going to start from the first index and return the complete remaining parts we will join all of them using the space and in the else we not going to do anything and as username we already have a username at the top for the email again use user credential do user do we have email property this email can be null so if it is null we are not going to do or store anything same goes for the phone number and file picture if we have anything in the photo URL we are going to return it otherwise we're not going to return anything so next to store the data create instance of the user repository using V.P and call the user repository previously we have created save user record function we use some of the exceptions and we call the database do collection which is the user collection do document this is the ID which we stored in the user. ID because we return the user model using do ID this new ID document will be created then in the set we're going to convert the complete user model into Json format like this because we have to convert data into Json then we can store it so once we convert this data we store it into the fire store so if this action is going to be completed we're not going to get any exception this means that user data is stored we're going to save user data using a we sign we're going to use the user repository which is this one created at the top do save user record and pass the new user we have just created to this one and it is going to deal rest of the operations and currently that's it for this function later on in this function we are going to check if user already stored inside the database or not and if it is stored we will not going to perform anything to this function so let's close this controller back to the Google signin function and in here now we can easily call Save user record so first we have to call controller at the top we will call the user controller using get.put and create the instance of the user controller you can do all of these operations in a one single function but definitely for the separation of concern for the readability for the reusability you have to follow these procedures call the weight sign use user controller do save user record and pass user credentials and that's it now this function is going to store the user record for us if there is any exception we will catch that exception over here once record is stored we want to remove the loader call full screen loader do stop loading and also if there is any exception we also want to remove first loading then we want to display the error and at the end we are going to redirect user using Authentication repository. instance called the screen redirect so this is the function we created in our previous tutorials and we see how we can get the logged in user so we have the authentication fire. instance. current user so this is the state of the loged in user if you want to use the current user inside your application which is logged in you just have to call fire off. instance. user so this is going to return the state of your user if user is not equal to null this means the user is logged in we will check if email is verified of this user if not we will readed user to the verify email screen and pass the email if user email is also verified we will let the user to the navigation menu which is basically the home screen and if it is not the case user is not signed in we going to use the local storage to check if it is the first time of the user we will display onboarding screen and if it is not the first time we will simply display the login screen to the logged out user okay so let's run the application and also I'm going to talk about that if you're going to run this application inside this run manual Dart it is not going to let you debug anything so make sure when you are dealing with a backend run things in the debug mode which is or debug main do okay so our application is running and you can see we also have email and password inside already using the memory feature but when we going to click on this Google button we are expecting a popup it is loading so loader appears and you can see we have a nice loader now we can click on any of the email which we want to be logged in so let's click on it again it's loading and we are redirected to the mainroad do this means that user is successfully logged in when you head towards the profile down below we have a log out button so for the log out button I have just added a new line which is using a we sign called Google signin do signout button just right on top of the Firebase Au instance. signout to let the user sign out and after that we are redirecting back to the login screen so when we going to click on this log out it is going to log out back to the previous screen you can also display a loader over here for the next tutorial we're not going to go for the Facebook sign in because there are some issues currently going on with the Facebook developer account they're not letting the developers to create a test account I don't know what's the reason but there is a reason because they currently temporarily block the service of creating the test accounts and without test accounts it's very hard to test the flutter app using Facebook authentication and for the real devices we have to upload our device on the Apple store or on the Google App Store so we'll cover that in the upcoming days or maybe at the end of this playlist don't worry about that we will get back to the Facebook login as well but for the next tutorial we're going to see how we can click on this forget password and deal with the forget password and reset the password using Firebase so that's it for today's tutorial I hope you learn something new if you learn something new please like the video and if you have any question you can ask me down below in the comments you can also download the complete code from the description below so stay tuned thank you for watching take care Allah h

Channel: Coding With T

Views: 974

Keywords: google sign in flutter firebase, sign in google flutter, sign in with google flutter firebase, google login flutter, google login flutter firebase, google login using firebase in flutter, login with google flutter firebase, login with google using firebase, flutter google login with firebase, flutter firebase google authentication, google authentication in flutter, google authentication in flutter using firebase, coding with t, flutter google sign in, flutter firebase tutorial

Id: oUYiCbOETls

Length: 28min 19sec (1699 seconds)

Published: Wed Dec 06 2023