Firebase Google Login in Android

hey everyone and welcome to the Android training now there are a couple of things that you need to understand before watching this video now first of all that this video is going to be longer okay so have patience because this is a do along with me video I just don't want to skip any basic cool concept which are important just for the sake of making this video smaller I want to explain thoroughly we would be drilling down into the documentation quite a lot so you also understand how the documentation is being read and by the end of this video you will have the Google login system done within your Android app ok now let me explain you where we are right now because I think it's a good time to have a little bit summary we have explored what the firebase is we have gone through with the web interface and how the authentication and database things works a little bit and we have created our previous app in which we'd created a simple login system with the username and email or email and the password registration login and logout as well now we want to perform all these things but with a Google account sign in so going to be pretty fun exercise and I have created one asset for you as well let me show you where that asset is if I can find it and there we go so we were using this asset will look pretty cool because this is going to the image and one at the top that says Google sign-in the simplest easiest login system that we can design so let us call this something like fire oops why why is it making this this is a beta bug so let's just call this as fire Google in maybe a random name just like that and obviously make sure you choose a little bit of a marshmallow or at least marshmallow you can choose the previous one as well but there will be few features in the future apps that will require at least a marshmallow so go ahead with that you can also go with the Android oh but marshmallow is at least that you should be targeting minimum SDK let's click on the next empty activity is perfectly fine for us click on the finish and shouldn't be taking much longer this is quick pretty quick I would say give it a second to just get it just in itself ok there we go and looks good now let me also walk you through what we have right now let me click on the overview and this is our app that we have work worked on the previous video as well I will be using the same one but you can create entirely new project as well and make sure when you go into the authentication this is super important and I'll just delete this guy and the delete account make sure you go into the sign-in account and this Google guys should be enabled just click on this pencil eeping and just make sure this is enabled and save this is super important about this nothing at all will work so make sure you do that and then you can go to the docs and can open up the docs and inside the docs go to get started guide for Android and inside the authentication now we are interested in Google sign-in we will be reading the documentation will be understanding it as well as we'll be solving our error so that's how the thing is gonna work okay I can actually close these guys and now now make sure you're also logged in into your Android studio as well it it is not being shown but it's the right corner is thing which you can just point out there okay and I think that's it now we can connect our firebase to this and again just I discussed in the previous video there are a couple of ways to connect your firebase app to your Android app and we will be using the easiest one but in case in case you want to just download the JSON app and add some Gradle files feel free to do so we will be using the easiest one which is right from the Android studio tools and click on the firebase and make sure you're logged in in your browser and this guy from the same email otherwise it is not going to work authentication email and password up connect to firebase and this step will be heavily dependent on your computer speed as well as your internet speed okay and I'll be looking for you can also create a new project directly here but I'll be choosing I'll be choosing the existing one my epi I don't know why I came up with this in but I'm going to use that connect to the firebase it will download a couple of steps stuff and we'll update your Gradle so it takes a little bit of the time okay it will show you a green dot when it's done and it shouldn't take much onto my system but again your system might be a little bit slower again no problem we can wait and click on this add firebase art to your app and this also needs to be done it will also sync your Gradle file so again some time Gradle file syncing takes a lot of time so be patient we will not be working on rest of the stuff from this documentation because this is not for the Google sign-in for the Google sign-in it automatically redirect you to the page okay now let's go to the documentation and see make sure you when you are into the authenticate with firebase there is a this link open that up into new tab because we will be leading this guy in a minute okay now the very first thing that we would like to have is in our App level Gradle file just copy and paste this guy and here is a word of caution which is super super important this compile copy this go to your App level Gradle again app level Gradle okay go into the dependencies and paste this now when you will be pasting this don't just think right now because there is a problem here notice that the Play service is 11 point 0.1 but the firebase art service is 10 point two point four and this 11.0 point one will prompt you an error so make sure that firebase art and the Play service level are exactly at the same version so I'll just copy and paste this guy I think this is a reputation at line number 13 31 I'll just keep it there and sync now now this syncing should not give you any error if this gives you an error that means we have to tweak out in the version or maybe you haven't pasted it in the right file so this needs to be done smoothly okay once this is done what I can do is I can open up and bring up my screen be that and I'll paste it into my driver by the way in case you are wondering what am i doing I'm just ringing my asset screen one which is available for everybody even for the commercial purpose and all the designs and graphics are being created by me so no problem at all okay now let's get rid of this hello world in the content layout I want to set this as a background I won't be changing the aspect ratio and all these should be changing that because otherwise it will look like a smaller guy I'm not much worried about the things here you can see it shrink a little bit but let's just leave it there now let's go into the text phase and we'll be bringing up a sign-in button let me show you from where I got that if you'll go here you can see there is a button no names known as sign-in button this is not an ordinary button this is a sign-in button and that has come up from that greatest file so let's bring this guy which is a sign-in button yep it should be wrap content wrap content we'll just fix that from the design view and yeah all that looks good but you know what I can make it a little bit better with the width saying a match constraint and I'll be shifting the constraints here so it looks nice and good okay well why are you dancing here come on select that guy okay why why is it so much of the problem okay and layout with 0dp nub it should be match parent okay now should be happy okay this is what I wanted to do come on you could have allowed me to do so we will be adding this guy and we will be saying this should be 24 we'll be pinning it that from here will be saying 0 + 8 + 8 maybe a little bit more 16 + 16 this looks so awesome now notice the simplicity here just the screen one tap of a button and you are logged in so smooth and so simple for at least for Google devices I highly recommend this kind of UI so simple so subtle you can change this button and could put up your custom graphics or other things will not going to match detail of that now next thing we'll be doing is setting an ID on to it and let's just have an ID off ID will call this as Google BTN okay there we go one thing is done let's go into the design and looks looks pretty good now let's create a couple of variables that we will be for sure needing first one is going to be Google sign-in button sign-in button not Google sign-in button and we'll be calling it as button okay let's grab this button from the interface which is going to be button going to be equal to type casting that a sign-in button and we're going to find that by resource dot ID dot what do we call it Google BTN there we go okay we would also be needing one more guy which is going to be firebase art I'm going to call this as a moth there we go okay we would be needing a listener as well because we want not what is the listener okay we haven't discussed that yet now listener is actually somebody who actually listens for the change and which is the firebase or listener now whenever you change from log in to log out or log out to log in there is an activity being changed and firebase provided us with a method that says activity listener or authentication activity listener we can just use it quite a lot of time and can check out whether you are logged in or log out so we will be doing that as well okay you'll be trying to make sure that this app is actually placed already almost at least the sign-in part okay now let's go here and come back here and now let's try to apply a few methods here now first of all okay it's a is a configure Google sign-in so we do need to configure Google sign-in okay so let's just copy this and let's just paste it okay and we will be pasting this guy here a lot of errors will be there we have to actually solve all of them alt-enter should be solving a lot for us okay okay this guy is good now there is a method known as a private void sign in which we will be having so let just copy this and you know what we can actually keep this guy gso guy inside this on create as well let's just have this guy okay we will be will be looking about that in a minute have an intent okay ought all to enter okay now the first problem is our C sign-in now what is this RC sign-in this is the guy which is kind of a request code and you have to just have an integer here so we will be declaring that at the top and it's going to be private final static in teacher we can give it in any access code to one two three I usually give one for the top menu bar so I keep it as two completely your personal preferences now this is Google API client okay this guy is not aware of what is API client if I go here there is no such mention of Google API client here so again make sure you click on this link and setup a couple of things from here as well and the first guy is Google sign-in option and Google API client okay so we need to set these guys okay and and this is an on create method so will be just moving this guy into on create method so copy this guy and inside the oncreate will have this one and I would be moving this guy inside as well what did we copied it to time I think that we copied it to time we don't need this we already have that guy so delete that okay and the second thing is at Google API client I just have this copy and paste that may be done create legacy yep it says it should be in the oncreate so there we go documentation are helping us quite a lot there we go so Google API client we need to create a variable of M Google API client first of all so that it should be happy and available at every method Google API client M Google API client there we go now it's happy we can press alt enter to make it more happier there ok looks good now fragment activity this is happy but this is not happy because it's an on connection failed listener ok so we need to have a listener here so let's just get rid of this and let's just see if we can get a new oops and this should be Google API client on connection failed listener I think this should be the guy yep that is and this is basically a non connection figure the listener which is going to manage what happens when the things fail ok so we're going to have a toast in case something falls back so teh toast dot make text and we cannot write this here because we're quite deep into the code and writing this at this point is not such thing I would like to do so this and now legendary error which is frustrating for everybody something went wrong there we go now let's just make a toast dot length should be short of course and dot show there we go ok no big deal we have fixed up this guy we have already seen how we can have the sign-in button and I don't think so we need anything from here if we will need anything from here we may come back we may come back ok now let's go here now here we need to override a method this guy so let's just copy and paste this guy I wanted to be just below the sign in activity so that they remain remain close enough pace that oh my goodness again so many legs why let's just see how many we can fix that by alt-enter yep one gun and import class yep firebase art with Google I will come back onto that later on but first I need to explain what this guy is doing and that this is actually basically accessing for the request code are see sign-in we have declared it at the top no problem and when if it is resulted success we are getting a Google account sign in with the Google account and in the fallback case else I would like to have a toast here again toast oh maybe I can copy something and yep this is I can copy and I can paste it here and instead of something went wrong I'll be saying a auth went wrong something something like that we can actually fire up another activity to make sure user is helpful now one thing that is missing which is a firebase art with Google I can press alt and enter this will create a method for me okay nice and easy so far okay now also notice that we are having a Google sign-in account stored in a variable account and this account will get all the authentication information that we require and will be fired up here okay now let's go and see that we need to create a firebase a mod I think we have already created that at the top and there we go but we haven't created any instance for that so Emeth should be having an instance of firebase off let's do that and I will do that in the oncreate just below as soon as I get the button okay won't make any difference at this point and then now we notice here that the firebase width method is actually being given to me which is at the bottom firebase without but before that it is also overriding a method which is on start now I will come back on this onstart method in a minute right now let's just do this guy we don't need luck we need art so I'll just copy this and he'll try to fix up the errors okay so let us go here and paste that goodness has so many reds alt import class okay I like it alt enter okay I like it auto result okay on complete listener on task yeah that can be imported logs yep that can be imported I can fix these tag because this requires a string so tag and this is also needs to be in the string okay Google sign-in activity alt enter should not be doing the job okay now notice that when we get a credential this was just a minute ago account I don't know why the changes to the cut I cut something like that place that should be happy okay now on complete listener Alton enter yeah this fix it this requires just at this here or main activity dot this update UI I'll comment you for a minute I'll come in to you for a minute because I don't want to update the UI as of now and Google sign-in activity this is because this is the toast this is the toast we don't need adjusting like that we can have our own activity there we go and looks pretty good and now let's come back and talk about one more guy which we have actually skipped we can work on the design out later on right now let me just show you one thing that there is an on stored method that says hey you can have a user if you're not getting any user you can actually update your UI or if you're getting any user you can actually update your thing now instead of this I want to show you something which is much more professional than this which is a simple guys given to us by Google which is auth listener auth statelessness rather correct what is odd state listener now odd state listener is the guy who is responsible to track down as soon as the authentication state is being changed from sign in to sign out or maybe from sign on to sign and so you don't have to track each and every time you can just post all that job to the odd straight listener so we'll be creating an odd state listener and as soon as their app starts we'll be firing up an odd state listener and based on that we will be writing the code that if the user is not signed in our user is signed in let's move into some another activity if it is not signed in just keep it there okay something like that okay a lot of jobs a lot of code but it's actually easy it's a step by step process so lets us create an art listener so this is going to be firebase auth dot hot state listener and we can call this mmm oh my M art listener okay M our listener there we go and now instead just before the oncreate I can overwrite a method by pressing ctrl o this is going to be on start there we go and now here I can call this a odd state listener so M up there we go dot add off state listener and we'll be passing our listener which is M to listener okay now as soon as the app is being created we can fire up the auth state listener function and can do something here okay so I would like to do it here and just at the top okay how we can do that it's actually fairly simple so let me just get you there it's actually basically just a couple of lines of codes but that's it so let's just say I'm our listener is going to be new okay did we did something wrong here I don't think so it's just firebase art and art state listener there we go we can just finish it up by a semicolon there now as soon as the state or state is being changed we are returned the fire base auth object and we can put a simple F else check here if firebase ought and this will only return an object because firebase earth will only return an object fill with something when there is something because the user should be logged in if the user is not logged in how can it return something so we can simply say get current user and if the user is a not null that means we have got something we might want to redirect user from one intent to another one so but the problem is we don't have any new activity so let's just create that right-click app new and I'll choose an activity from gallery empty activity is it's fine for me right now I'll call the first second second one okay it can be your your full-fledged app being started from here as well no problem okay okay constant layout we can add one more screen object here but I think I'll just add a background here for a moment I don't like the plain things here just like black or light I think something colorful maybe I'll go to the black yeah looks looks pretty cool and I'll add a button maybe at the centre don't pad the top and this guy should be should be having a few constraints okay why why are not allowing me to select that okay here here here and I think that's it I'll just push it a little bit down and I'll be changing the color background color at least and make it make it a little bit more reddish just just like that okay looks good I'll be changing the text color if I can find the text color somewhere there death text color there we go and it should be something like light and the yep I can actually change the font as well font family can be monospace and up I don't like my own space I will have cursive and then I can change it to text to something like log me out okay now because it was a bad choice monospace yeah that's better actually we can bump the font a little bit little bit I know this is too much but hey I love it 20 okay log me how it looks pretty awesome okay now we can actually give it an ID of logout there we go nice and easy just one last thing I know some of you might be a little bit frustrated but hey I cannot bear to see this with just like that I'll have it to any planning here yeah at least like that should be looking a little bit awesome okay now let's go into the main activity and if there is already a user who is logged in we might want to redirect him on to a new activity so start an activity start activity we will have a new intent there we go and we will be redirecting from main oops main activity dot this to second one dot class for some reason they call it class they should maintain this subtlety this should also be called as class or second one class resemblance but again Who am I to complain okay now okay this looks good okay let's run it up we haven't run it with app so far strange we haven't done this in the so far and the course anytime but we got so busy with the code okay great I'll finish the row warning zero error I love it and there we go so this has crashed no big deal crashing happens quite a lot let's just open our logs and 75 and this is something I think this is a beta bug I have faced this that is why I know it what you need to do is just comment this down entire thing for some for some good reason I don't know why this happened but you know what when you do it something like this you just again write it for some some bizarre reason you just write it again and this is happy I don't know why but you just have to write it again and it is happy I don't know why so Google sign-in options will call this as gso because we have already defined the GSO there and that is going to be new Google sign-in options oops not options like that dot builder and in this builder we need to pass on a parameter which is Google sign-in options dot default sign-in and the next one would be dot request a ID token there we go we can just see it at the bottom and this is going to be get string and r dot r dot string dot default web client ID and dot request email here's of course why not you can request much more other things I don't recommend them much because user can get a little bit freaky there we go done nothing we have just commented it out and we have just written it again and I think for some bizarre reason they should fix up the thing I think this is a beta bug will be fixed up as soon as the things goes on and see that this is being fixed I think this is the beta bug and will be fixed up in the actual third version of the Android studio maybe for some reason now let's just sign in with the Google I have tapped on it please don't get crash and we forgot one thing we forgot one thing my bad my bad you know what what we forgot we have a method known as sine n but we actually never triggered it okay really bad when we can trigger it as soon as the button is being tapped okay and let's just do it here so it's going to be simply button dot set onclicklistener new and this is going to be view set onclicklistener and we're going to just call this sign in there we go we forgot that that was a nasty nasty mistake shouldn't be doing that okay okay looks good pretty good let's just hit the sign in and welcome back to firebase Google login your sign it and again at this will give you a pop-up because my device is already using my email and I actually just did a test run and all these I make a lot of app and because of that it gives me and the notice one interesting thing if I do hit a logout is that's not going to anything but if I just stop this app and run that again and since we have already signed in it automatically redirects me to the app because I am signed in it checks it this is the auth state listener which just runs as soon as the app gets started okay but we need to figure out something to do for the logout session as well and should be easy okay let's go there do it one by one first of all let's figure out what the ID is IDs logout good one thing good and this is a simple button nothing special about it so we can just call in button we will be calling it as button and button is going to be equal to button this is going to be mu not new not new find view by ID r dot ID dot you know it logout there we go okay so now we have find out the button but as soon as this activity gets started I want to fire up an auth state listener here as well okay so just below the button I need a couple of variables first of all I need a firebase firebase auth again I'll be calling it as a moth I usually call it I'm up and we need firebase odd state listener as well so firebase art dot off state listener M auth listener there we go okay now we need to override a method to check it as soon as this activity gets started we need to override that so control oh and this is going to be on start there we go and we're going to call em auth dot add up state listener I'm at listener okay there we go okay so one thing is done now we're going to set an onclicklistener on this guy so let's just do that how we can do that freezing button that set onclicklistener new view dot set onclicklistener as soon as this is being done the signup code is just one line in case you didn't notice that on that this guy which says firebase aunt dot get instance sign out and you know what we can just short it a little bit little bit and this is the usual practice I follow that whenever there is an art guy I just say simply something like this M art which am art and I usually get an instance of firebase art usually in my in my oncreate function which is something like this firebase art dot get instance so I keep it always so whenever I need an instance I can just use a moth available so what makes it in this case happier it just says mr dot sign out that's it you can write the entire line as well firebase or dot get instance got get sign out as well no problem at all that will also work okay now this is going to sign out but will not do anything okay that will happen when next time you will run the app but I want to have a same method here exactly same thing what we have done here which is let me show you this is a moth listener firebase artlessness I want to do something here whenever the state get changed so let's just fire up hot state listener okay there we go and that we can actually copy or paste I think we should write it okay em our listener is going to be equal to new em okay I need to check it out firebase art sometime I forget firebase art listener there we go okay previously notice one thing here previously we were checking if firebase gives us a user not null we'll be doing something but in this case we'll be doing something different because this time we are expecting yeah get me that we are expecting that we will get null so we will be checking it equal equal null because as soon as the user has got a sign out then he should not return me anything get current user will return null okay and we would be redirecting it from second one dot this to main activity okay sounds good why this is the red line I think there we go should be should be happy now and this is a full-fledged industry ready login and logout system okay let's run this app should be your director directly to black screen log me out there we go now if we go back see nothing foolproof stop that run that again we should not be redirected to the black screen we should get a front screen this time sign-in cool and now let's sign in and this will be signing me indirectly because it doesn't give me table because I have just one email id being logged in here yours will surely give you a pop-up if that is the first time you're running your app and this is me log me out there we go so I know this is half an hour video more than half an hour we are almost 35 minutes gone here but what you have learned here is something big something very very big this is an industry ready application for Google sign-in you can use that in your application or maybe any existing app as well this is something that you have learned big and I'm really happy that you have made it so far at the end of this video I'm really excited really happy and let's go ahead now we have done the authentication part we want to the database and storage section of the firebase let's go there

Channel: Hitesh Choudhary

Views: 83,092

Keywords: Programming, computers, code, hacking, information, Security, iOS, iPhone, udemy, online-courses, coupons, free-coupons, udemy-coupons, udemy-courses, android, iphone, reactjs, web-development, Android, Firebase, Firebase login, Firebase Android, Firebase google login, Firebase google loging Android, Android login

Id: Duz_0XkWP2I

Length: 35min 30sec (2130 seconds)

Published: Tue Jun 20 2017