How To Implement Google Sign-In Functionality In Flutter With Firebase and FlutterfireCLI

so if you're wondering how Google signing functionality is being done in flutter you are the right place so with these five steps you see how that has been done integrate and instance of the Firebase odds and also the Google sign-in triggered authentication flow obtain the odd details from the request creating new credentials with all details and finally sign in the user with the credentials so if you're interested and happy to see how it has been done subscribe to the channel like the video and stay with me to the end to implement such functionality so with that said let's Jump Right In so I have my project in here that's basically written in the counter app so I'll get rid of the comments in here and also the default code and start everything from scratch I return home widgets here which I'll be creating it sooner So within the left foot I'll create a file and I'm going to name this file as home.dot so we didn't have file create a stateful widgets and I'll name the widget as home everything is scaffold in here So within the main dot that file we need to import our home widgets we just created and saving the changes there you go foreign [Music] can add more property to it like centering the title to be true can sit over there the scaffold also takes in the body as an argument and I'm going to retain the container in here and I'm going to give a width to The Container it's going to be 100 so in this situation double dot Infinity that's 100 of the screen and so I'm going to give it a height of 40. it also tastes in the decoration which in turn also tastes in the Box decoration So within the Box decoration I'll specify the Border to be bothered.org So within the border.org you can specify color to be colors dot Gray so let's wrap the container within a padding widget so you can see it over there there you go so the container testing the chart and I'm going to place a row widget in here which indenters the children and the first widget is going to be the test widgets or the test of continue with Google as you can see it's over there so right we need it there's going to be an image that's the Google image so image.asset then we specify the path of the image which in this situation is found in the assets folder and its name as google.png so when we visit the password.tml file we need to uncomment the assets and also give access to what our image so assets slash yeah and save any changes so to run Pub get to the latest version there we go as you can see it's over there so the bus decoration also testing the water radios and I'm going to give it about that reduce the circular and passing the value which is going to be eight consider rounded container there so let's give some silence to the test as well it tasting a textile and we specify a font size to be here font size of 17. there you go so let's specify the main axis elements to be Center there we go and wrap the whole of the padding widget within the Center widgets so we can have our container on the center of the screen there you go let's drop the image within a pattern widget and specify it to be symmetric and give it a horizontal of eight as you can see it's pretty late with a height of 40. there you go so let's wrap the container within a widget and the average it is going to be guest charity data we're testing and on top argument so here is where you're going to implement the functionality of Google signing so we need to install some few dependencies so let's run this command flutter path add Firebase call we need to insert a Firebase call so once that is done we also need to install um the Google sign-in package so flat up our Google sign in and finally we also need to install the flutter pop art then Firebase out for Authentication so once we have a successful installation here as usual when we change password it's EML file you can see our dependencies are installed so let's visit the Firebase console and add the project so I'll name a project as Google sign-in material and click on continue can decide to disable the analytics so in here it will start creating your project so once that is done it hits on the continue there you go so this is where I'll introduce you to the flutterfire cli2 so it's a useful tool which provides commands to help ease the installation process of flutter fire across all supported platforms so it's a set of flatter plugins that enable flat out to use Firebase services so basically it connects your flutter app to Firebase so you won't follow that manual configuration steps setting up on various platforms it will take care of everything and connects you up with Firebase so to get started with the installation you should have node.js installed on your machine to run npm install G Firebase 2 that will install the Firebase tools globally with npm package so after that you need to activate a flatter fire CLI 2 globally by running this command that pop Global activates flatter fire without command it will install the flutter file CLI with the easiest you need to run the command flutter fire configure on your terminal and get started with it so let's get back to it so when the terminal just type flatter fire configure file configuration if you have that setup so in here to start fetching our available project on Firebase in here so you can see our project here so I'll choose the one I just created that's the signing tutorial with Google and also enable it on all platforms so it will do everything under the hood for you there we go you can see you have a successful so it will create a file known as the Firebase options but that that have that some default setup so when you visit the Firebase console you've seen you have three has been added to our project we've integrate that on the iOS Android and also in the world So within amido that far I'll just refer to the coding here so first of all we need to ensure that our widget flatter binding have been initialized and also we need to initialize what our Firebase before running our main app so that's basically it and it should be asynchronous as well so our app is not crashed so it means you have Firebase configured successfully so let's click on the Authentication and get started with authentication so we need to click on the get started so in today's video I will be teaching how to integrate that or not Google signing so we need to enable the Google provider and also choose your email in here and click on Save done there you go so we did now home.dot here is where you implement the signing functionality first of all let's go to our project settings and configure add some fingerprint to our app before we can enable our Google sign in so you need to get the shower and also shot 256 so you can click there and see how that's been done so if you are on Linus or Mac you can copy the above code and paste within your terminal to get your share keys if your windows are so you can just click on Windows and see how that's been done so to enable Google signing you need to ensure that if others fingerprint within your Android settings so I'll do that clicking here so I'll open my terminal in here and clear the terminal and pasting the code so the password is Android just type Android and click on enter hit enter there you go you can see our shark is shot one into shot 256 so you need to copy that and add that as a fingerprint within your project before you can enable Google sign in so I'll copy that in here So within our add fingerprints I'll add that and save any changes I'll do same for sure 256 so I need to copy that one as well and also add that and saving the changes there we go so once you have that set up so you can clear our terminal so now we need to add functionality to sign in a user so I'll just create a function and that's going to be an asynchronous function so I'll name that as signing with Google and first of all we need to create an instance of the Firebase out and also the Google sign in next we need to trigger the authentication flow in here and also we need to obtain the alt details from the request from the user so we need to obtain the all details and also we need to try creating credentials a new credential with the odd details so one that you have the credentials then you finally sign in the user with the credentials so it's basically five steps you are coming to do here so first of all let's create an instance of the Firebase authentication also the Google sign in so Firebase auth and I'm going to name this as auth and create an instance of that we also need to create an instance of the Google sign-in so Google sign in I'm going to call this Google sign in as my object and also create an instance of that so once that you have that we need triggered authentication flow to create a Google sign-in account in here and I'm going to name this as Google user Now call upon my Google sign-in which has a signing method on it so once you have that you need to obtain the all details from the request since it's an asynchronous form we need to await to get rid of the errors you need to obtain the odd details from the request so Google sign in Authentication and I'm going to name this at Google Earth as my object and you need to await and call upon our Google user and access the Authentication so you should check the nut now here so let's try creating a new credentials so with the new credential odds credentials and I'm going to name it as credentials and we call Google Earth provider which has a credential method and it takes to argument that the assets token and also the ID token and the access token is going to be Google alt then we assess the access token the same way we are going to do it with the ID token Google alt then ID token then finally you need to sign in the user with a credential so create a user credentials in here annually awaits and call upon our alt object which has assigning with credentials that is in the credentials so we just passed the credentials so that's basically the functionality to implement the Google sign-in so once we have that set up all you need is to get a function within the on top so whenever the content the button is clicked the function will get caught so we need that on tap I'll just call my function sign in with Google so we need to navigate the user to a different page so I'll use navigation dots navigator.prush that is in the context and also the material page route if it is in the Builder and the Builder internals with this new function and you're going to navigate to a different page that's a profile page which is not yet created and I'll be creating it sooner in here so I'll head towards my left folder and it creates a file and name this as profile page Dot so in here I'll create a stateless widgets and name it as profile page and I'm going to retain a scaffold in here so I'll get rid of this import and saving the changes so we need to retain the body in here the body is going to basically retain It Center widget So within that Center it is in a child and the child is also going to take in another widget and as a test I'm going to give it a test the test is going to be just profile page services when you see the changes in here you need to import the profile page within our home to get rid of the errors and save any changes so once you have that set up you need to change this to an async transformation and also if mounted then we navigate to the profile page saving the changes so once you have that set up let's give it a try so when I click on the button can see we have a pop-up for me to choose my account so I'll choose my accounting here and I'll be navigated to a different page so that's basically it how to implement a Google sign-in you can add more functionality to it so I just wrap the center widget within the column now get rid of the Center widgets so right beneath it there's I will be having a button that's the elevator button for logout functionality so the button basically takes in the on press whenever the button is pressed that's when you're going to and the functionality to lock the user out and it also takes in the child the child is basically going to be a test widget and that test is going to give a test of logout so I'll just create a function up there that was basically send this out it's going to be an asynchronous function and you need to create an instance of the Google signing and call our sign out method so we just call our function within the own press That's the logout so once we log the user out so let's give it a try it's not let's add some more styling to it so let's enter the column and also give it set the main as this element to be Center so we can actually see what's going on in here there you go so once you click on the log out it's indeed log out but we've not seen nothing so once we log these out we should add the functionality to navigate back to the login page so let's change this to any synchronous function as well and which are the weight and log the results then we pop off from the contest so you'll be navigated back to that login page so we're just saving the changes in here and give it a try as you can see let's continue with Google and I'll choose my account in here we've been navigated to the profile page so when you click on the logout you should pop up so when you check the Firebase console and refresh the page you can see our user has been added in here there you go and also when you click on the logout functionality you can see we pop off from the context so when we click the button

Channel: CodeWithDarkwa

Views: 6,507

Keywords:

Id: JEqlf0uBRyE

Length: 17min 58sec (1078 seconds)

Published: Sun Jan 01 2023