Google Firebase Authentication Android Kotlin Tutorial

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
what's up youtube this is dennis panuta for tutorials.eu in this video we are going to check out the firebase authentication module which allows us to create a user in firebase using our own code in order to then register a user for example and then log in that user into an application and that is going to be crucial for many types of applications that you could use for example if you want to you build a chat app or if you want to use something like tinder or create something like tinder uber facebook whatever where you need an account you will need to have this authentication module and that's what we're going to cover in this video so you're going to see all of the relevant steps so let's get started in this video you are going to learn how to use the authentication module of firebase and how to build a login as well as a register screen in android using kotlin in order to then basically create an account here in the authentication module via email as well as login to that account using that particular email that you used for the creation of the account all right let's get started create a new project in android studio and i'm going to create one with an empty activity then press next and give it the name in my case i'm going to call it firebase off demo which stands for firebase authentication demo and the package name could be something like eu tutorials but i'm just going to keep it simple using com.firebase off demo and the language that we're going to use as kotlin as well as the minimum sdk is going to be the api 21 which allows us to make this application run on many devices around the world now let's press finish for it to create the application for it to prepare the project once the project is ready run the application once there's not really much happening yet and there's nothing interesting going to be displayed in the application but what is interesting for us is actually going to come from the gradle and there are different ways to get to what we want here but i just want to get a little bit of information about the actual sha of my application the sharp value so here in signing report double click on it and you will find this sha1 key that's going to be the one that we are going to require so make sure to copy it and then go over to your browser in order to go to this page here console.firebase.google.com and then you need to register if you don't have a google account you will need one or gmail account and then you can basically log into firebase and create a new project so i'm just going to add a new project here i'm going to give this the name of firebase of demo you see this is going to be the unique identifier for my project fire off a 13 then you can enable google analytics for this project and you can decide to also deactivate it if you want to then you can also add an account a google analytics account in order to get details about how your application is used for example how often and so forth i'm just going to use my tutorials u account and create a project this will then take a little while until the project is ready to go once the project is ready press continue and firespace will lead you to your application now you can select android here and get started here you will need to enter the package name in my case it was com dot and if you don't recall it as i do you can just go over to your application and check it out from here in my case it was com firebase off demo i could give it the name but that's optional or i can leave it out i'm just going to copy this sha1 key and i'm going to put it in here so for debug signing certificates this will make it easier for me to make my application run accordingly with this firebase app so then let's register my app this file will be necessary and you need to add it to your app okay so download this json file because it's going to be unique for your project and then drag it into your project folder and there to be precise into your app folder when you're in the project screen okay so let's do that real quick let's go to here not android but project open up your project open up app and that's where you want to drag it in okay so let me drag it in there and press ok now you see you will have your google services json here or make sure that you have it there and once it's there press next and here you need to make sure that you add this to your product level gradle build which means you will need to have google as a repository then the dependency class path and in all projects you also need to make sure that you have google here so let's do that real quick we go to our project level build gradle which one is it going to be well it's easier to actually find it when you're back in android and here project build gradle now let's get rid of all of those additional windows here or pop-ups and here we need to make sure we have the repository that is google and then and then this class path okay so add that in here in your dependencies as well as in all projects make sure you have google and jsenter once that is done press sync now once that is also done you can go back to your browser and select kotlin if you build this project in kotlin and you can see we have this apply plugin line which now is on the app level build gradle so going back you can now select the app level build gradle which will be in your projects here it's this one here which says module colon app and here at the top i need to have these two lines so google services needs to be there com android application is already there let's add this additional line here which says com.google.gms.google minus services and then import the firebase bom so this one inside of your dependencies which means you will need to scroll the way down all the way down up to here where you can add the implementation so implementation platform will be firebase pom and then i also need to implement this analytics ktx so that i can use analytics in my application okay so moving back to android let's add that in one as well this implementation which is com.google.firebase dash analytics dash kt x standing for kotlin x okay so now we can sync that as well and once it's synced back in the browser press next and then it will check if the app is running or has communicated with the server so if you really want to make sure that it's actually going to run before that make sure that you run your app before you press next but even if you did there's no problem you can go back anytime here and it will find the connection so if this doesn't work out for you and this is just going to be stale here and nothing's going to happen you can skip this step as well but if you press these buttons in the same order in this right order this should usually work out but in my case it also at one point didn't work out so it can be confusing at times when it works and when it doesn't but in the end if it doesn't respond within a while you can just skip the step and then you will be redirected to the firebase overview screen okay so in my case it doesn't want to respond so i'm just gonna skip that step and you can see i'm back in this screen here and by the way this video is just part of a complete course this is part of the complete firebase masterclass that i created in which you will learn to build a complete shop app from scratch so you're going to build all the components using firebase and firestore in order to build this amazing app alright so check out the link in the description where you'll get the full course learning all of these things and now the next step that we need to take is to go to authentication and then you can see we have no users because we don't have a sign in method so let's go to sign in methods and here you can select the different sign-in methods that you want to allow for your users to use and the simplest one is going to be email and password i'm just going to enable that and then i'm going to press save in order to enable this so now if we get go back to our authentication we can add new users manually or what is of course our goal we can also add users via our application and that's what we're going to do all right now back in android studio let's go ahead and create a new activity so i'm going to go ahead and create a new empty activity which i'm going to call login activity and then inside of our build gradle app so the colon app one i also would like to use the material library okay so in case you don't have it yet you should also add this one here which will allow you to use google material for your design so com.google.android.material.com colon one two one okay i will update my theme colors because i also want to use a different color theme basically i don't want to use these default colors that are given to me i will use my own which is a pinkish color a dark color which will be this gray black color and then another pink which will be the same pink as the color primary so my accent color will be the same as the primary color but of course you could use a unique one for that as well all right so then let's design the login screen and this is something that you can do as you like i'm just going to show you my xml code how we are going to do it in this video but i'm not going to go into too much detail here because i'm expecting you to already be proficient in writing your own xml layouts so let's go ahead and check it out so in my case i'm using two drawables so one of them is going to be this authentication screen background which is the one that we use in our application and then the tutorials.eu logo and you can of course use your own images but these are going to be the ones that i'm going to use in my activity login and that's how it's going to look in the end so you can see we have this background image with this tutorials.eu logo then we have this title saying login screen as well as this edits text login email login password then the login button and then a linear layout which has that do not have an account as well as the register text views okay so looking at it in split screen let's look at it step by step so here i'm going to zoom in a little bit so you can follow along if you really want to this way so here at the very top we have our constraint layout inside of the constraint layout i'm using a frame layout so this at the top here is a frame layout because i want to put elements on top of each other which means i have an image view and on top of it i have another image view so this image views the background image view and this one is displayed on top of it so it's like a second layer which is laying on top of it that's how you can use frame layouts all right and underneath the frame layout i'm using this text view here which is this login screen text view then i have this text input layout which is this one which is in the end going to have an edit text in it so text input layout with all of these settings here you can just type them in or you can download the file as well as the edit text or inside of the text input layout and then we have a second one which follows the same principle so we have this text input layout as well as this add a text inside of the text input layout so you can already see this is not for complete beginners so you should be aware of how to create the basic xml files or to create your own user interface and then in the end i have this button here at the very bottom which is this package button and a linear layout that has two text views in it so the first text view says do not have an account or don't have an account and then the second one just says register all right now let's go over to our manifest because what i want to do is i want to make sure that it's not going to be my main activity that will be the starting activity the launch activity so to speak i want this to be my login activity so here inside of my android manifest i cut out this intent filter from my activity main or this main activity to my login activity so now when i launch the application it will directly go to this login activity for me all right now that we have that let's also create a register activity and now this is just how i will do it you could of course also just change the login activity around a little bit and dynamically just change the name of the login screen text as well as the register screen text or just register don't have an account so this could be edited and you wouldn't have to create an extra activity for that but in order to keep it simple i'm just going to create an extra register account that we can then use to move back and forth between the two but i'm just going to keep it simple and create a new register activity okay so let's go ahead and create a new empty activity i'm just going to call this one register activity and now let's also take care of the design of the register activity it will be similar to the login activity there's really not that much of a difference and here again feel free to create your own design and use your own as you like it okay so i have basically the same design here so i'm not gonna go over the details you can see the only difference really is the text of the button the text of the label here as well as the text of those two here at the bottom the one saying already have an account and the other one saying login okay so the rest is pretty much the same the ui is the same the only difference is really the text but if you want to get more details about the user when he registers you would need to make sure that you also have a couple of more added texts here that the user can then in the end enter his values and for example the name or the h or whatever you want to also collect from the user but as we are really just focusing on the off module we won't need those because we can't even store them without using the actual fire store functionality which we will do later on in the course but for now this is going to be it okay so now that we have the register screen also designed let's take care of the actual programming which means that i want to give these elements a click event so inside of register i'm just going to say once we click on that register button there should be a bunch of code happening and we're going to go over the code step by step so let me add that and then run over it step by step with you okay so for this to work you can see that i will need a bunch of dependencies here a bunch of imports so one of them being oncomplete listener then the auth result firebase off and firebase user for this to work so here i'm using button register set on click listener inside of the oncreate method so once we click on this button register which is by the way this register button here once we click on it we will run the set on click listener and it will then check if the user has entered something so i want to make sure that this has an entry as well as this has an entry so these two edit text they should have a text in them entered by the user that's why i'm checking here is it empty and if it is empty then we will let the user know please enter an email address so we're using a make text here or a toast make text in order to display a short host on the screen saying please enter an email address and we how do we check if it was an entry or not well we check et register email which is this edit text here so we're saying is it even when it's trimmed is it empty so especially when it's trimmed so we're trimming this here by the way as a way to trim empty spaces from the beginning as well as the end so we're using this lambda expression here for this magic so we're trimming it and then the next thing we check is that the user enter a password so we do the same thing here as you can see we're trimming so this time we're checking the edit text password here and if that one is empty then we display this toast make text and if none of those two things happen so if they're not empty so the user has entered an email address as well as a password we will take that email address and we will trim it so if the user accidentally had an empty space in there we are getting rid of it the same goes for the password and we're storing them in those two variables that we created and now comes the actual firebase stuff so everything up till this point was basic android development right now comes the firebase specific stuff so here we go to firebase off we use the firebase authentication class and we get the instance okay we get the instance of our connection to the firebase authentication and we then create a user with password and email or email and password that's the method name here and that's exactly what it will do it will create a new user with an email address and a password and therefore it will need an email address as well as password that you pass over to it so we're passing this email that we have gotten as well as the password that we've gotten from the user when he entered it and when he pressed on this button register button and then we have this add-on complete listener so this add-on completes this and there are multiple overloads and one of the overloads is where we get the task here and we check if the task was successful so if the task was in fact successful what we can do is we can go ahead and create a firebase user out of the task because the task will give us a result and there is a user inside of this result because that's what this firebase off task is going to deliver basically and then we can for now just to show a toast saying you're registered successfully or you were registered successfully maybe and at this point what we want to do is we want to send the user over to the main activity okay so if we were successful registering the user we are going to also directly log him in so to speak so we are going to go ahead and create a new intent sending the user from the register activity to the main activity and while we're at it we are getting rid of the extra layers of activities that we had so for example if we move from the login activity to the register activity back to the login activity back to the registry activity then we have a bunch of instances of our activities running in the background or being in the stack so to speak and we want to get rid of those that's what this line does so it sends us with some extra information for example the firebase user id which will be the uid so firebase user is by the way the firebase user that we created which is a firebase user object which is the user directly coming from that task result that we had so now we can use that firebase user and send it over via intent to this other activity and we also send over the email address of the user via that same intent and then we start the activity with that particular intent and we finish our current activity which means we close the register activity we get rid of all of the other activities so we are in the main activity and when the user presses back he will not get back to the register activity but for example the app will close and then if none of that was true so if the task was not successful then we are going to just print the exception so something could have gone wrong when trying to register for example no internet connection or something like that okay in order to test this correctly we of course also need to go to our main activity and design it so that it will do something with all of that information that we sent over to it okay so let's go over to activity main xml and here we will go ahead and design something so i'm going to create a very very simple design here nothing fancy the only thing that i want to display is basically displaying the text view which says you are logged in successful as well as they text you with the user id and an email id and then finally a button at the bottom which allows us to log out okay so this is going to be the ui you are logged in successfully then the user id the email address as well as the logout button okay so in the main activity now we can of course get that extra information that we did sent via our login or register activity to be precise so how i'm going to do that is i'm just going to get the extra string user id as well as email id okay so this is here where we set the information so we send it over via intent and here at this point we are getting the string extra so we are retrieving the data okay and we're storing it in user id as well as email id and then we can just go ahead and display it in our textview user id as well as textview email id so we say the textview user id this one here should be replaced with whatever the user id is so it's going to say user id colon colon and then the actual user id and for the email id text it should do the same thing with the email id okay and then i also want to be able to log out now let's look at how we can actually log out so i'm going to give my button my log out button this one here i have functionality i want this button to be able to actually log us out in order to log out you can use this one line that's it so firebase off dot get instance dot sign out so this will sign the user directly out and then what i will do is i will move over from my main activity to my login activity and close my current activity so if the user is signed out there is no reason for him to be on the main activity anymore okay so then the next point would be to also assign a click event to our login activity but before we do that let's actually test our application and see if we have any errors and if that works then we can already register and by the way now you should change from firebase off demo to app here because if you try to rerun your application it might not have worked okay so let's see if we can actually get to that all right so there we are we have the login screen with the email id as well as password so let me just enter dennis gmail.com and with a super secure password here and let me actually i'm in the login screen so i need to go to the register screen now let's actually change this real quick so here inside of our project manifest i'm going to make my register activity the start activity where we start from otherwise of course we can design our login activity or actually we need to add a button functionality to this register textview here at the bottom or an on click listener so that we can move over to the register screen okay but i'm gonna keep it simple i'm just gonna say okay let's make the register screen the starting screen at least for now for testing purposes so here i'm going to register with this amazing email address as well as password register and there you are you are logged in this is my user id this is my email aid id as well so the cool thing is now you can go to your authentication you can press this reload button and you will find this particular user that you just created here so it's y w l o u okay let's check it out y ywlou so it's this exact user that i'm logged in that is available in my authentication so let me see if i can log out there we are i'm logged out now and now let's go ahead and take care of the login screen so that we can actually log in back to our application okay so i will now go ahead and go to my login activity so there we are login activity and first of all i will give this little tv register this little button here i'm going to give it the functionality i'm going to give it the skill of sending me over to another activity so now it will start an activity once i click on this text view to send me over to the register activity let's test this real quick okay so actually now we can go back to our android manifest and actually make our login activity our start activity which should be the case because you don't want the user to go to the register activity to be bored by always having to do this extra step of clicking this button okay because usually he will be just logging in it's only one time that the user will register right so let's go ahead and register and you can see i can go over to the register screen now i don't have the same thing for the login screen it would be quite easy so you can go to your login activity you can copy this code you can go to the register activity and here add another on click listener and this one will be tv login and here we go from the register activity actually just from this to the login activity okay so if we rerun this you will see that we can now click on register and click on login now of course we have this problem of creating these extra layers all the time right and now i can go back back back back you can see i can click back many times and that is exactly why i added this line here this intent flags so that once i register they all go away all of these layers of having these extra click events and so forth alternatively i can of course not send the user with a new activity what i can just say is i will execute on back pressed that would be ld alternative and this way the user will not go and create a new activity all the time he will just jump between those two okay so let's double check this there we are register and login and now let me crack click bask and you can see it closes the application directly okay now let's actually assign the functionality to login and it will be very similar to the register activity there's really just one tiny change and that is going to be the actual well if you look at it this part here this create user with email address so you can actually just copy this whole code from your register activity this set on click listener for button register and implement it here or paste it in here and there will be a couple of changes so you can see now i'm calling this button login which is this login button in the login screen this pinkish button there and then i can go over and it's actually the login activity and then i can go over and check are the entries empty so that the user not enter an email address or a password if you didn't then display toast saying please enter password or piece enter email address then we get the email and password from those added texts okay this et login email and et login password okay these are the two edit texts that we created and then i can go over here and sign in with email and password so you can see that's the difference really saying sign in with email and password here we're passing in the email and password we have an uncomplete listener if the task was successful we're just going to say toast make text you are logged in successfully and then we have this intent that sends us to the main activity we have these intent flags which get rid of extra layers of the other activities that we had open we sent over extra information so this time we put extra information the user id and we do the same thing but this time it says current user uid okay so it's not the one the same text that we had in register activity what was task result user so it's not going to be the same as we did here where we had task result but we have current user and the uid is the unique id or the user id and then we put that extra information of email address over we start the activity we finish the current activity and if that didn't work so if we had an error logging in for example no internet connection or so then we will display the post showing the exception okay so now at this point let me run this again and see how i can actually log in with that user and let me first log in with the user that doesn't exist so eminem at gmail dot com has not yet created an account in my app so let me try to log in as eminem there is no user record corresponding to this identifier the user may have been deleted okay so i cannot log in as eminem but let me log in as dennis because that user exists and actually let me not enter a password first to test if this please enter password appears yes it does so this is the toast that we had created now it appears and now i can go ahead and log in with my super secure password and log in there we are we're logged in as dennis gmail.com okay so that was the demo of how to create the authentication or how to use the authentication module to create a registry screen in which you can register a user as well as the login screen in which you can log in a user to your application and now you can display user relevant data here which is specific to the user which we already do which means the user id as well as the email id they are user specific alrighty thank you very much for watching the video and watching it all the way to the end if you like the video then please leave a like and also hit that subscribe button if you haven't subscribed already and as always when you see such a video which is part of a course you can of course also get the full course you can find the link in the description below where you will get a huge discount and check out one of those other two videos up here
Info
Channel: tutorialsEU
Views: 23,520
Rating: 4.9026089 out of 5
Keywords: google firebase authentication tutorial, Firebase Authentication Android Kotlin Tutorial, firebase authentication android, firebase authentication, firebase authentication tutorial, firebase tutorial, firebase tutorial android, firebase authentication android studio 2020, firebase authentication android studio tutorial, firebase android studio, firebase login android studio, firebase login, firebase login android, login firebase android studio kotlin
Id: 8I5gCLaS25w
Channel Id: undefined
Length: 34min 22sec (2062 seconds)
Published: Tue Nov 17 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.