Completing Authentication Flow

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.4 instructor rating • 20 courses • 33,091 students

Learn more from the full course

Build a Social Network with Flutter and Firebase

Make a complete mobile social media app like Twitter, Instagram or Facebook using Flutter and Firebase!

09:02:15 of on-demand video • Updated December 2019

  • How to build a complete social network with Flutter and Firebase!
English [Auto] Now let's get Google sign in working so that when users click on our sign and with Google button they'll be given a pop up that will enable them to provide their Google email or phone number as well as their password. And as a result we can get their user data authenticate them and show them the authenticated screen to do this we're going to need to use the Google sign in package located in your dependencies and pub specs gamble. We'll bring that into home dot dart up at the top and instead of having to import it man manually we'll just execute a method called Google sign in and you might get a suggestion to auto import it. You can just hit tab in that case. So now we brought in Google sign in the package. And when we execute this function we can create a reference which we'll put in a variable a final variable called Google sign in and this will enable us to use a number of methods that will allow users to log in and log out et cetera. And this is going to have the type Google sign in. So now that we have this reference we can head down to our gesture detector and instead of just printing some value we'll instead execute a function. So provide a reference here to a function called log in which will create above our build function we'll actually put it above both of our functions that return widgets into log in users is very simple. We just need to take Google sign in and on its call a method sign in and that's it. So this function is going to be necessary to actually open that modal that screen that I mentioned. However when a user is actually authenticated nothing's going to happen in our app. We're not going to be able to collect their data and we're not going to know when to update is off from false to true. Fortunately Google sign in has given to us an active listener a listener that we can set up in order to check to see if a user's signed in with firebase using Google sign. So this listener is to be set up within our init state function when we initialize this state we want to set it up so we'll add our in it's state method. And here we can take Google sign in dot on current user change that's the name of the listener dot listen and when a user is signed in successfully using these sign in method we'll get back our data using the callback that's available within listen. So at an anonymous function to that where we'll get within the parameters an account that's of type Google sign in account so the account data that we get is either going to resolve to some user data of type Google sign an account or no. So we can add a conditional here and say if the account is not equal to no we actually have some user data then we can print account print that data and we can update our state so we can use set state to update is off to be true otherwise we want to set it to false make sure it's still false. So let's test this out and I'm just going to add the text account or user signed in to the print line and then I'll interpolate account by adding he dollar sign before the actual value so let's save home dot dart and test this out we'll click on sign in with Google you may need to do a hot restart and just as a quick aside if you're getting the following error or platform exception saying your app is missing support for the following your URL schemes. That means that you haven't provided the reversed client your l that's within your Google service info dot P list file the reversed client I.D. I should say you haven't provided that string to your info dot P list file that's within your runner folder in Iaw so you'll just need to provide that and once you do once you update this file and save you should be good to rerun your application in whatever way you did previously. Also if you're a debug session suddenly crashes that's usually the result of this error. So once we hot restart and attempt to sign in we should see a little pop up that says that flutter sure wants to use Google dot com to sign in we'll hit continue and we should get our page that I mentioned asking users to provide their email or phone and we see here sign in to continue to flutter share and since we provided that as the apt name when we enabled Google sign in as our provider and firebase that's where this app title is coming from. So once you provide an email and password for automatically taken to the authenticated page when our on current user change listener fires and if we check out our debug console we see user signed in with a map of type Google sign an account containing a bunch of user information display name the name associated with our Google account the email associated with it a unique I.D. as well as a photo your URL the URL that we have associated with our account. So this is great. However when we hot restart our app to simulate when a user opens their app a user opening their app we see if we head back to our simulator our obsession has gone we're taken back to our north screen so this helps to reveal the nature of our listener. It listens for when there are any changes to our current user but it's not preserving our session. So how do we re authenticate our user when our app is opened once again. Obviously our user just signed in and we want to restore the session. We don't want it to go away whenever a user opens the app again. So the solution is to execute a different function when in state is fired. When our home state is created and by the way one good measure to take for this Listen function I should say after this Listen function is to add a comma and then the on error argument on error is a callback which detects any errors in listening for a change in the author state or the user state and we can provide to the parameters of this on air function one called error. This is going to contain information about any errors. So if that's the case we'll just print error signing in and then interpolate that error with its message. So I'll just add a comment above our listener and say This detects when user signed in or signed out as we'll soon see and we're gonna add another function that will re authenticate user. When app is opened or reopened so again we're gonna get it from Google sign in and this is gonna be called sign in silently and to sign in silently. There is a parameter or a arguments called suppress errors. We want to set that to false because just like with our listener we want to catch any errors. The difference with sign and silently is that since it returns a promise we need to in order to resolve what comes back from executing it from signing in. We need to add a then statement. So we need to resolve the future and we see if we hover over the function the return future when we resolve it resolves to an instance of Google sign and account for a successful sign and or null. Just like our on current user change listener so too then which accepts a function. Again we're gonna get our account and we're going to apply the same logic we're gonna set state and make is off true. If we have our account and we're going to say is off is false if not. So instead of duplicating this and pasting it in again right here in our then function of abstract this extract this to a separate function which we'll just call handle sign in which will accept an account of type Google sign in account. And here is where we'll said state. And we can now remove all of this within the function we pass to listen and just call handle sign in and pass an account to it and do the same for the function in the. Then for a sign and silently and then for silence silently to catch any errors we can chain on the function catch error which is also going to give us an error map and we can print the same value with the line that we used for our listener. So now when we save home dot dart and go back to our simulator we may need to hot restart once again but as you can see when our app runs it signs us in in the background with our sign and silently function and we're taken back to our authenticated screen. Now that we've allowed users to sign in and sign up to our app let's add the last bit of functionality for our authentication flow and that is to enable users to sign out or log out. So just like logging in or signing in. That's very easy. We'll create a separate function called log out and to do that we can just say Google sign in dots sign out and we want to display this in our auth screen so we can replace the text authenticated with just a simple button we'll use a raised button where the child is going to be the text log out where we'll set on pressed to reference our new logout function so we'll save home. We'll do another hot restart. We'll be taken to our off screen which is now just a button and when we click on it we're immediately taken back to our unknown screen. So we see that the on current user changed listener not only signs us in automatically detects when a user signs up to our app or signs in but also when they sign out by executing this sign out method. Since recording this course has been some changes to doing Google sign in with firebase apps you might be getting this error upon trying to sign an error for 0 3 restricted client. This app is not yet configured to make a lot of requests to do that set up the apps off the consent screen in the Google cloud console before finishing Google sign and we need to create this consent screen basically the screen the mobile that's going to show up whenever a user tries to sign in with Google. So to configure that we just need to tap on the link learn more and we'll be taken to this console developers Google site and this project was created for us behind the scenes when we created our firebase app and what we need to provide here to this o off consent screen tab. So we need to provide an application name in our case that it will be flutter share an application logo. If you don't have a logo feel free to just use a familiar image on your computer and we need to set up a support email shown on the consent screen for user support and when that's done we can hit save and now our consent screen is setup and now our users can sign and successfully with Google and we won't get any errors during that process.