Flutter Tutorial For Beginners #9 - Adding Google Authentication with Firebase

Key Takeaways

[Music] hello everybody and welcome back to the flutter tutorial so in today's video what we're going to be doing is actually adding google authentication and google sign-in to our flutter application so we're going to replace our current login screen which is just you know enter a name with an actual button that says sign in with google that will bring up the google sign-in someone can then sign in from there and they will stay signed in until they sign out or they reinstall the app or whatever it is but regardless that's what we're going to be working on so let's go ahead and get started so we had a bunch of setup we did in the last video related to getting firebase working with our app assuming that you guys have done that we're pretty much ready to go there's a few small steps we need to follow one thing on the firebase website but it shouldn't take us more than a few minutes so we just need to go to this pubspec.yaml file and there's two packages that we need to add that we're going to be using here so this is firebase authentication and google sign in so just simply add these two lines into the dependencies section of your pubspec.yaml file these are just packages or plugins or whatever you want to call them that need to be downloaded so that we can use um use them within our file right sorry within our project so we can have you know firebase auth create a firebase instance actually sign in with google we just need these two things so put them in here save the file it should automatically run a flutter pub get if for some reason it doesn't run that in your nvs code you can type pub and then get packages otherwise just run that command in your actual terminal or in your command line so flutter pub get and that should get all the packages that you need okay now that we're in here what we're actually going to do is preemptively add something i'll talk about or i just show you how to add that after but we're going to comment out where it says assets right here and we're just going to go tab in once put a hyphen and simply type assets with a forward slash the reason we're doing this is because we're going to add a folder actually you can see that i already have it added but i'll go through the steps again into our root directory here that says assets and that's going to store an image that we're going to need to use which is actually a logo for google so if i click on this assets folder here i added this so if you guys don't have that then just make a new folder so assets like that and then you're going to download a logo from the link in the description which i'll show you in just one second and throw that inside of the assets folder so let me just go here you can see i actually have the page open oops this link will be in the description simply download this just click the download button then grab that and drag that into the assets folder here and just make sure you name it google logo and it doesn't have you know like a bracket 1 or bracket 2 or whatever on the end of it well it can have that but if it does just remember that you have that because we're going to need to reference this name later on but anyways we've just linked the assets folder up so we're all good here now we need to do a few other things in our android folder so we're going to go into our android folder we're going to go to settings.gradle and we actually need to modify this file just to fix a bug that's happening with the current version of these two packages so i don't actually know why this bug has occurred or exactly what's going wrong all i know is that we're not going to be able to run this app unless we make the following edition so we just need to copy some code which again i will have in the description or some way for you to access it in the description into this file so you can see that from line 17 to 29 this is new code i've just copied this in from my other screen again this will be in the description but grab it and paste it in here this will just fix a bug hopefully that will actually make this work properly for us i will also leave a link to the github issue if you have you know questions about why we need to add this again i'm not sure all i know is when i added this project worked so that's good all right next what we're gonna do is we're going to go to the app level build.gradle file so within android app build.gradle and we're simply going to go here to the min sdk version and change this to 21. the reason for this is again the packages we're using don't work properly under the sdk version of 21 so just to avoid any errors we're going to change the minimum version to 21. just note that this will mean that your app will not be able to run on any sdk version lower than 21 that's fine because i'm pretty sure probably like 99 of devices are above sdk version 21 already but if you do care about that few percent then you're gonna have to find another workaround this was my work around for the issue that i was having uh so looking through my kind of instruction sheet on my other screen i think that's all we need to do and now what we should be able to do is actually go ahead and start working with um the google sign-in so we're going to go actually to our firebase console so just go to firebase console like that firebase console and we're going to go to our project so i'm going to get to my project i'm in the wrong account right now and then i'll show you how we can actually set up the different sign in methods okay so i'm in my message app right here i'm in the firebase console once you're inside of your app you're going to go to the authentication tab and then you're going to go to sign in method so here you can see i've actually already enabled a sign-in method i just clicked on the one that i wanted so in this case it was google it asked me a few different things here it asks you to put in your support email which i'm going to blur for myself and a few other things as well but just fill this in we've already done the sh1 fingerprint thing that's what we did in the last video simply just click save after you select your support email and then the supported signup method which is google will be working so that's all we actually need to do is just click on google and just follow through the steps so that it's set up and working if you do care to add some other things like twitter facebook you can do that but again i'm not going to really be showing us how we set that up now let's go back to authentication here you can see it says what my current user is so right now in this app we have one user which is just me i was just testing this out previously so that's why i have that you won't have any users here and then you can see my unique user id so just a note here whenever you're looking at users and you're trying to identify unique users you're going to use this uid which is just their unique identifier and yeah that's just a good note so if you need to identify users for some reason just in case i don't say this later use their uid all right so now we've have that all set up within firebase again all i'm asking you to do is just go to sign in click on google follow through these steps and just say that that is enabled and then we should be good to go okay so i'm going to close that out now and i'm going to go back into my files here so i'm going to go into lib and i'm going to make a new file called auth.dart now this is going to be the file that handles all of our authentication related stuff this is actually going to be a fairly large file with just two methods pretty much google sign in and google sign out so when we want to sign in we will call the google sign in method that will prompt and bring up the google sign in page then the user will sign in and it will return to us what user actually signed it then we have a sign out all that we'll do is just simply sign out the current user now google handles all of the hashes all of the password stuff which is really nice which means we don't have to have like you know a sign up here page or anything like that we can just say sign in with google if you don't have a google account just make a google account and then you can sign it get started so the first thing we're going to do is we're going to import package colon slash and then firebase and this is going to be firebase auth slash firebase auth.dart so we need this package you can guess what this is it's simply just all the stuff related to firebase and authentication next we need to import the google sign in which is going to handle actually uh you know popping up that google sign in window and everything so we're gonna go package colon google sign and then i believe that's google sign in slash google sign in dot dart so you should get those auto completions um because this is really annoying to type if you don't have those but these are the two packages we need next we're going to set up a firebase instance and a google sign-in instance so these are what we're going to use as the main instances to handle all the stuff related to firebase and then obviously all the stuff related to google kind of hard to give a better explanation than that but i'm just going to say final firebase off and i'm just going to go underscore auth equals firebaseauth.instance so getting an instance of firebase and then we're going to say final google sign in we're going to just call this google sign in equals google sign in and this is a class so we can simply instantiate it like that okay so now we have two instances let's see what this is telling us the declaration underscore auth isn't referenced okay that's fine we will use that in just a second all right so next we're going to make a function this is going to be a future if you're familiar with asynchronous programming essentially what this means is this is going to be an async function that will not immediately execute so just a really basic explanation for anyone that doesn't understand what async means asynchronous just means that this operation will not block or stop the other operations going on in the app so let's say i'm like waiting for someone to sign in my app won't freeze while we wait for it to sign in my app will be able to run and then as soon as the sign in happens an event will be called and something will happen so you will kind of see how this works but a future is just telling us that hey you might not immediately have this value you might have to wait a few seconds and handle when this feature is done or it's been resolved you'll get it as we go through but that's just kind of my basic explanation here of async there's a lot more to talk about when it comes to that so we're going to say future firebase user this means we are going to return a promise if you're familiar with kind of javascript related lingo that is going to resolve and give us a firebase user once it is done so future firebase user we're going to say sign in with user like that and this is going to be an async function so we're going to write async and then we'll open and close the brackets now what we're going to do inside of here is get our google sign in account so just so you know all the stuff i'm showing here is just from this blog post i found that really illustrated this stuff well so i'll link that in the description in case you care just copy all the code out but i'll write out with you guys and try to give kind of basic explanations as we go so final google sign in account is going to be google sign in account like that that's going to be the name of the variable and we're going to await google sign in dot sign in awesome okay for the id token what we're going to use is what we've already defined so google sign in authentication dot and then can you guess it's going to be id token this is taking up a lot of space here sorry guys so let's add our semicolon that's better and then for the access token we're going to say this is google sign in authentication dot access token awesome so that's what we need for our auth credential next what we're going to do is we're going to add an auth result which is essentially us authenticating against firebase so now what we've done is we have all the google stuff ready so we've you know got our credential we've got our sign in authentication the users signed in from that ui page and now we're going to take the auth result which we'll get in a second and we're going to use that against firebase in the next few lines of code to actually authenticate the user with our application so final auth result this is going to be called auth result this equals underscore auth which is firebase right so we have auth right here which is the firebase instance and then we're going to say dot sign in with credential and then we use that user credential so now we have credential and is that right uh this needs to be in a way to sorry let's add that right there because this is an asynchronous value so just to kind of clarify this part right here is all the google related stuff so let the user sign in get their authentication get a credential based on that authentication pass that to firebase sign in with that and then authenticate against firebase next we're going to say final firebase user which is the user that we actually want we're going to say that's equal to user underscore auth dot user and sorry this is not off this is auth result okay so i think not underscore just auth result okay so i think we're almost done now so now we actually have a user from this credential now what we're going to do is just make sure that this worked properly so we're going to have an assertion we're going to say assert that not user dot is anonymous so essentially making sure that they actually have a username they actually have a real account they're not an anonymous user and then we're going to say wait that user.getidtoken does not equal null okay and then after this we're gonna say final firebase user current user equals await underscore auth dot get oops is this not why is that not working this should be dot current user there we go okay and then finally we're going to return the user after we go up here and we make sure that this is right so we're going to say assert that current user dot and i think this is i should be uid uh yeah currentuser.uid equals so equals equals user.you okay so the reason i'm doing this is to make sure that our signed in user with firebase is actually the same one that we tried to sign in with so just to summarize here we do all the google related stuff sign in get our authentication result from here then we use firebase to actually sign in with that credential and then we have a user which is the auth result.user so we just want to make sure that this sign in actually leads to the fact that we get authenticated against firebase so then when we call auth.currentuser we want to make sure that we're getting the user that we just signed in with if we're not then something went wrong with this sign in and we'll get an error message because we're doing this assertion so that's kind of just what we're doing here that's like the basics of it again i didn't write all of this this is from the blog post which i'll link in the description but i just wanted to kind of walk through and at least give some basic explanation okay so now that we have that most of the auth stuff is done we just need to change our login page so that it looks a little bit better so we have um this like build thing right here that just allows us essentially to type in our name right and actually if i go to this app it's not even open right now so i can't show you but you remember it was just a little text box and you just say you know what is my name and press enter we don't want that anymore obviously we want it to be the google sign in button so we're gonna need to change this so i'll leave the alignment um yeah should we leave the alignment yeah i'll leave the alignment for now within the body but let me just get rid of all the stuff within the child here so i think that should be it for child and now what we're actually going to do is make another function inside of here that's going to return just the login button and then we'll add a few things to the actual body page itself so we're going to start by inside of our login here inside of the body state we're going to go widget and then we're going to call this one login button or i'll say like google login button like that to be more specific that's going to return a widget that's why i'm defining a widget right there and now what we're going to do is we're going to return and we're going to return a border button or is it a border button sorry it's an outline button is what it's called and within the outline button we're going to define the on press method and all that other stuff so first we'll say on pressed and what this is going to do is actually be this dot click so obviously remove the other button so now we will call this one but we don't need this controller text stuff so we're going to get rid of all this text editing controller and instead of having a string name what i'm going to do is i'm actually going to define a firebase user of user so what's going to happen is we're going to get the user back in here and then from there we can access the user's name we can access their email like anything about them we can access if we actually have that user so inside of the click function what we're going to do is actually handle the google sign in so we need to first import that sign in or sorry this auth from the top here so we're going to say import and then auth.dart so now we should be able to use uh this sign in with user function that we've defined okay so now that we have that we're gonna go sign in with user dot dot dot and then now we're gonna say dot then and inside of here we're going to say user because this is going to return to us a user and then we'll do something inside of here when we get that user and i've just realized that i've called this method sign in with user i actually wanted to call this sign in with google i don't know what i was doing when i was typing this out but let's change this back to say sign in with google because that makes a lot more sense than sign in with user and then we can come back here and modify this so now we have sign in with google dot then what this is saying is when this is done when we've finished all the stuff related to this then we're going to say let's get the result which is going to be user so whatever is returned is what's coming in as user here and then we have an arrow function and we'll define what we want to do so what i actually want to do is i want to push to the next page and instead of going this dot name what i'm going to do is i'm going to say user dot display name so we're going to pass them the display name of the user we'll get rid of that semicolon and we'll actually say this dot user equals user just to store it in the state and we don't need a semicolon we need a comma all right so now we have the click method handled and we're just going to sign in with google you'll see all of that stuff work when it's working in just a second we'll get the user and then we'll actually go call my home page with user.displayname which means instead of just passing a string or sorry instead of passing the string that we would have typed in before now we'll just pass the display name of the user now for the google login button uh what we need to do is add a bunch of styling and add the image and all of that so let me just go over to my other screen here because this is going to be a bit of a long thing to type out we're going to start by defining the shape so the shape is going to be a rounded rectangular border so let's find that rounded rectangular border and then what we're going to do is say border radius is going to be equal to border circular this is going to make it a kind of rounded edge button and i'm going to go with 45 for the radius so this is just telling us how much do you want the corner of this button to actually be rounded i want it to be rounded 45 degrees so now that we have the shape what else do we need let's see we're gonna add a splash color so what color should this button splash when we press it uh let's go with colors dot gray okay and next we're gonna add our border side so essentially what do we want the border of this button to look like because it is an outline button in here what i'm going to do is say border side and then we're going to say color and this is going to be colors colors dot gray again so we're going to go with that gray style and then we're going to say the child of this outline button is actually going to be that google image as well as some text that says sign in with google so for the child we're going to say padding to start and padding inside of here we're going to say padding edge insets dot and then from left left top right bottom that's what this stands for we're going to say 0 10 0 and 10. so just padding off the top and the bottom we don't actually want to pad on the left and right hand side next what we'll do is inside of padding we need to put child so let's add that here uh am i doing this properly i think so yeah okay so child and what do we want for the child well we want a row and this row is going to have the google icon as well as the text beside it so inside of the row what we're going to do is start by saying min axis alignment and i think what is this this is main axis alignment dot no not alignment sorry yeah main access alignment dot center and then we're going to say min axis or what is this one main axis size sorry main axis size and this is going to be main access size dot min okay so what i just did here is i'm pretty much saying that i want this to all be aligned in the center and then i want it to be as small as possible so rather than filling the entire container be as small as you possibly can and just fit everything in that size that's also why i've added the padding here so we're going to pad on the top and on the bottom so that this will fill up a little bit more room because this is going to take up you know the minimum amount of space that it possibly can so now that we have that we're going to say children this obviously needs to be a widget list and inside of this list we're going to add all the stuff that we want okay so now we're going to add the google logo and that text so we need an image here so we're going to say image and then inside of image we're going to say image again and then asset image which means look in that asset folder and we're going to say this is asset or assets sorry slash and then google underscore logo dot and i'm pretty sure that was png so that's all we need there and then we can define the height that we want this to be i want this to be 35 pixels high but sorry that's not inside of image or sorry that's one side of asset image that's inside of image so we're going to say height 35 so just make that 35 pixels high next we'll add the text so we're going to add some padding first of all so we don't squish it directly beside the um the image there and we'll say padding and then we'll go edge insets dot only and only means okay we only want one side of padding and we'll go padding on the left side we'll pad that by 10 pixels and then we'll add the child of the padding which is going to be the text that we want to add so we'll simply say text and we'll say sign in with google and actually i'll make this a lowercase w and within the text i think can i add a style i'm pretty sure i can we're gonna go style and then we're gonna go text style like that and for the text style i'm just gonna simply make this uh the color gray so we'll say color and then this is gonna be colors.gray and then sorry last thing we'll do is change the font size just so that it aligns with everything else so for the font size we're going to go font size and i think i'm going to go with 25 for that that might be a little bit too big but we will see okay so now we've pretty much done the google login button it's inside of its own function but to use this now all we have to do is just simply add it as a child so let's just say google login button like that i'm going to add that to our build so now the child of our center alignment will be this button and let's see how this looks when we actually load up our app so i'm going to press f5 see if i broke anything or not which is likely based on how much we just did without testing but let's see what this is looking like all right so there we go we have sign in with google we can see this button is popping up right in the middle of the screen and we have that google logo some nice padding and then the text so let's see what happens when i press this so i press that and what happens it immediately actually just brings me in now the reason it did that is because i've already signed in with google before i'm going to show us how we can actually sign out in just a second but if that's your first time pressing that assuming that worked you should have actually been brought to a google sign in page where you would have put your email and password and all of that stuff and you would have actually signed it but just to prove this to you watch what happens when i type hello you see it actually shows my name from my google account that i'm signed in with so i can tell that i'm signed in because it's showing the correct name when i'm actually making one of these messages so again sign in with google if that works you're good to go and that's why we use this as well it can remember who's been signed in or not you don't need to constantly put in your username or password now last thing we'll do is simply write a function that will actually let us sign out so we can test to see if this is working properly so i'm just going to add one here and wow dart analyzer has been terminated sure we can restart that that's fine and i'm just going to say this is a void i'm going to say sign out to google and we'll make this an async function like that and all we're going to do is say await and this should be google sign in dot sign out that's all we need to do and that's going to sign our user out so wait save changes okay great okay so now we've made the sign out method and i want to actually use the sign out just to make sure that that is working so i'm actually just going to go into this login page i'm going to go inside of my body here and i'm going to make it's called a life cycle method that just essentially means as soon as this is loaded we always do this so it's called a knit state so sorry we're going to say at override we're going to say void init state like that okay so what this method will actually do is automatically run as soon as this is initialized so as soon as this page gets loaded or this body gets loaded this will run so this is a great opportunity to put anything we want to happen before the app actually renders inside of here which in this case i want them to be logged out before we actually even render this page so what i need to do though is i do need to call super dot init state there's just a rule here with this init state method that you have to call the super init state method which means that comes from the inherited class here we have to call that already so we'll call super dot init state and then what we'll do is simply log out so we can just say auth dot or sorry not we don't have to call auth we can just say log out google or what did i call this this method sign out google sorry so let's go sign out google like that okay so that should work sign out google so when we initialize the state we will sign out and then that will force us to sign back in so we saved that but let me just hot reload this to make sure and let's go here to sign in with google and now it did not sign us out so this is interesting let me reload this app actually and see if anything's going on here okay so there we go so now it actually did sign us out i just had to reload the app i think for that to actually take place this is saying choose an account because it automatically signed us out but this is saving the account that i had signed in with so we can make this kind of the standard that whatever this app gets reloaded we sign the user out and then they have to choose what account they want to use to sign back in so let me pick this account which i'm going to have blurred just you guys don't see my email but i'll do that and now that signs us in and let's go ahead and type hello and we can see my name is popping up and everything is working properly now if i go back here and click sign in it's automatically signing me back in because sorry i think i might have made a mistake here the init state will only run when this app restarts so the first time that this login page actually gets loaded will be when we initialize the state we can manually call this if we want to or manually call sign out but for now i think the method that we currently have is fine and we're going to go with that so that being said this has been a long video but i hope this at least helps you get authentication set up and working again i'm no pro at all this stuff but i'm just learning along with you guys and i think this is cool and we have a lot to do now uh with having our authentication in fact in the next video we'll probably try to store those messages in a database and i'm looking forward to that so if you guys enjoyed the video make sure you leave a like subscribe to the channel and of course i will see you again in another flutter tutorial [Music] you