How to use Firebase Authentication in an Android MVVM App

hello this is jared from learntodroid.com in today's tutorial i'll show you how to create an android app that uses the model view view model design pattern along with the firebase authentication library to manage the login and registration and log out of users before we get started i'll do a quick demonstration of this app so the user can fill out the email address and password to create a new user using the firebase authentication platform select the register button and what it's done is it will uh automatically navigate you to the to another fragment which shows which user has been logged in if i select the logout button it will take me back to the login screen and now i can try to log in with incorrect credentials i went to droid gmail.com password this will fail login failure and if i correct this and i select the login button it will process the login successfully and take me back to the fragment now as i mentioned we'll be using the mvvm or model view view model design pattern when creating this app now the reason why we want to do this is nvm makes it very easy to separate the concerns of the different parts of your android project into different classes so it makes it very maintainable and easy to easy to read in mvvm the model is made up of data models business logic and application data the view is the structure of the layout and the appearance of what the user will see in the ui of your app and the view model is used by the views to transform the data in the model to display in the view we'll use two different uh jetpack architecture components in this tutorial we'll make use of the live data uh architecture component and the view model architecture component so let's get started we'll create a new android project now so for the name we'll use firebase auth login register mvvm [Music] and we'll select finish so what we'll do now is we'll create a fragment for displaying the login and registration form we'll call it login register fragment and this will extend fragment and we'll override the two methods oncreate and on create view next what we'll do is we'll create a fragment layout resource file this fragment layout resource file will be called fragment underscore login register then go okay so now i'm just going to copy over the fragment layout resource code okay so it's pretty simple stuff it's a linear layout inside that linear layout with a vertical orientation we've got two edit texts one for capturing the email address and the next one for capturing the password they've got different input types so that the password gets hidden then we've got two buttons one for login and one for registration so we'll update this login register fragment class to use this fragment layout resource and this will return this view we'll also need to import a few dependencies in the gradle files uh we'll need to import the navigation architecture component for managing navigation within the app and we'll also pull in the dependencies for firebase authentication so we can use that in our app so let's open the build.gradle file first in the app section first thing i'll do is i'll copy over the dependencies for the navigation architecture component after that i'll follow the setup instructions to retrieve the dependencies for firebase in our android project so in the project level build.gradle file we'll need to make a couple of changes we'll need to add the following line so open the build.growing file at the project level and i'll include this dependency after that i'll update the app level build.gradle file to apply the plugin i'll pull in two dependencies for firebase into this app level build.gradle file one for firebase analytics and the other for firebase auth now i'll sync the project with gradle and pull in all those dependencies okay because we're using the navigation architecture component i'll need to update the activity layout resource file to include a fragment so i'll paste this layout resource file in here okay so i've just pasted the code into the main activity layout resource file this has got a fragment inside it this is for this is used by the navigation architecture component and now i'll need to create a navigation graph right click on the resources directory select new android resource file for the resource type we'll select navigation and for the file name i'll give it nav graph and now we've got a blank navigation graph and i'll add one destination for the login register fragment next what we'll do is we'll create the firebase project in the web browser we'll select add project and we'll fill in a name for that project we'll select continue and we'll select continue again we'll pick a google analytics account to use and select create project once it's created we'll select continue and we'll access that project and then we'll follow the setup instructions for android we'll enter the package name that we used we'll give the app a nickname that will show in the firebase console and we'll also get a sha1 signing certificate from gradle so we'll access the gradle tab then we'll go into tasks then we'll go into android then we'll select the signing report then we'll get that sha1 key there copy that and paste that into the firebase console and select register app then we'll download that google services json file which has various api keys in there then we'll need to copy that json file into the app directory and then we can run our app to test it out once you run your app wait for your app to communicate with the firebase servers once that has happened this section will be completed and you can continue to the console now select the continue to the console button now we'll go into the authentication section and we'll select setup sign in method enable the email and password option and select save next what we'll do is we'll set up the view model and the repository for the login register fragment class create new java class we'll call it login register view model and this will extend android view model and we will create the default constructor that has the application as a parameter now we'll create the repository class we'll call it app repository and now we'll set up the structure of the packages for this project so we'll create one package for views in the views package we'll place the main activity and the login register fragment in that package now we'll create a package for model and we'll place the app repository in that model package and we'll create the viewmodel package in the viewmodel package we'll place the login register viewmodel class in the app repository class we'll set up a constructor and we'll take an application as a parameter we'll add a variable to the app repository for storing the application and we'll set that in the constructor in the app repository class will have a method for registering the user public void register this will take two parameters the email address and the password now in order to share information between the view the viewmodel and the repository we'll be using live data to do this live data is a jetpack architecture component and more specifically we'll be using mutable live data because this data can change over time so we'll create a new variable this will be mutable live data and it will contain a firebase user okay and i'll call it user mutable live data and in the repository constructor i will default this to a blank mutable live data so we'll also need to initialize a firebase auth variable in the constructor so we'll add that as a variable to the class and in the constructor we will get the instance of the firebase authentication we will use this for registering and signing in the user now we can start implementing the register method where we will use the firebase sdk for firebase authentication to register the user and then once we've registered the user we will send that firebase user back to the view model which will take it to the view as well containing the firebase user record so let's implement this now in the register method we'll use the firebase auth variable and then we'll invoke the credit user with email and password method so we'll pass the email and password as parameters then we'll add a non-complete listener okay in the uncomplete list now we will use the application to get the man executor then we'll add a non-complete listener in the oncomplete method we'll check if the task was successful and if it was we'll update the live data we'll get the user mutable live data and set the value using post value to get the user to provide to the post value method we'll use the firebaseauth.getcurrentuser if this has failed we can show a toastmessage with the exception registration failed so now we'll update the viewmodel class to make use of the register method so now i'll implement the login register viewmodel class so we've extended the androidview model and we've implemented the default constructor where we're taking the application as a parameter so now we'll create a reference to the repository we'll create a variable for this first then we'll initialize this variable in the constructor and we'll pass the application as a parameter next we'll implement the register method on the register view model public void register it will contain two parameters one for the email address and one for the password then we'll simply invoke this method on the app repository class by calling register and providing the email and the password and we need a way to get the live data into the viewmodel class so we'll create a new variable for the mutable live data that will contain the firebase user and we'll call it the user mutable live data so in the constructor we will need to set up the usable mutable live data to get that information from the repository before we can do that we'll need to create a getter for the mutable live data in the repository class okay now we'll jump back into the view model then we'll set up the user mutable live data now we'll create a getter inside the login register view model so we can expose this user user mutable live data to the view so now we'll start implementing the functionality of this app so in the login register fragment we've got a button for registering the user and we've got some edit text for capturing the email address and the password so what we want to do first is implement the registration function so we'll set up the variables for the edit text and the button i've just copied those over and then we'll in the oncreateview method use the find the view by id to set up those variables so next we'll create an onclicklistener for the register button so we'll need to create a new variable for the login register view model so now we'll set up the login register view model variable in the oncreate method so we'll need to import the lifecycle extension so to connect the view model variable we need to use viewmodelproviders.of pass in the fragment and then use the get method and pass in the class name for the viewmodel next what we'll do is we'll set up an observer on the mutable live data inside the view model so that we can watch for changes so that when a login or a registration happens we can get that user record into the view now we'll be using this in the view to then navigate to the next screen now that we've got a successful user that's logged in so let's set up the observer so we'll get the view model then we'll get the user mutable live data and we will observe in the onchange method we will check that the firebase user is not now so this means there's a real user and if that's the case we will just create a text message saying that the user is being created one last thing we'll need to do in is in the on click listener on the register button we'll need to invoke the view model we'll get the view model and then we'll call the register method and then we'll need to pass in the email and the password so we can get those as strings check that both these strings have been populated and if that's the case we'll invoke the register method okay so now we can test this out so before we create user i'm just showing you in the firebase console i've currently got no users created okay so let's create a new user go to droid1 at gmail.com password and we'll call the register method it says the user's been created now if we go into the firebase console and then we hit the reload we can see a new new uh records has been created for this user so next we'll implement the login functionality so we'll hop in the app repository and we'll create a new method for the login public void login we'll pass in email and password so we use the firebase auth object and select the sign in with email and password method and we'll provide an email and the password and we'll set an add-on complete listener we'll use the application get main executor then we'll add a new on complete listener auth result so in the oncomplete method we will check if the task is successful and if so we will provide the user to the user mutable live data we'll just copy this from above so if it's not successful we'll show our toast message and we'll use that copy that from above as well in the register method and we'll say login fail and we'll show the exception as well so now we'll make some changes to the view model and we'll add one more method for login and just like the register method we will invoke the login method off the app repository passing the email and the password as parameters next we'll jump into the fragment class and we want to set up the login button to invoke the login method on the view model so we'll go into the oncreateview method uh we'll go log in button and we'll add a on click listener and we'll grab the email and the password the same way we did before and we'll check the length of those strings and if they're both greater than uh zero characters long we will invoke the log in method on the viewmodel passing in the email and the password so if the user does successfully log in what we want to do is we want to take them to a new location a new fragment within the app and in that fragment we want to show the user's email address and a button to log out so let's implement that now so we'll create a new fragment called logged in fragment which extends fragment and we'll set up this fragment to override the oncreate method and the oncreateview method and now we need to create a fragment layout resource call this logged in fragment okay so this has a text view and a button in it the text view will display the current user that's logged in and the button is a lock out button so when selected it will log the user out [Music] so now we'll update the logged in fragment to make use of this fragment layout resource then we'll return this view [Music] and we'll add this fragment to the navigation graph and we'll set up a connection between the login register fragment and the logged in fragment so now complete the implementation of the login function on the login register fragment so what we're trying to do before is navigate the user to the new fragment if they've successfully logged in now this will also happen if the user has successfully created a new account so to do this we will rely on this observer for observing the user user live data so if the user that comes back from the live data is not null instead of showing this toast what we want to do instead is navigate that user to the new fragment and we'll do this navigation using the navigation architecture component from jetpack so now we can test this out i'll type in a user that i've already created give it a password then i'll select the login button and it's taken me to the new fragment it's not currently showing the logged in user though so we'll implement that next so what we'll show in this fragment is the email address of the user that's currently logged in in addition to that we'll also need to build the functionality for logging out the user so let's start with that first so we'll jump into the app repository and we'll create the new method for logging out the user void log out okay and we'll use the firebase auth to invoke the sign out method now we also want to have a new piece of mutable data to indicate whether the user is logged out or not so this will be a boolean piece of data and it will be called logged out mutable live data this will be initialized in the constructor as well in addition to invoking the sign out method on the firebase auth object i also want to [Music] update the live data with the value of true to indicate it's been logged out so now we want to update the view model to make use of this logout method on the repository so now we need to create a new view model so we can make use of the log out method on the app repository so i'll create a new java class and i'll give it the name of logged in view model this will extend android view model and we'll create the constructor that uses the application so we'll add a ladder variable for the app repository to this class and we'll set up the app repository variable in the constructor next we'll set up the references to the mutable live data in the logged in view model so we'll create the first immutable live data referring to the firebase user user immutable live data and the second immutable live data that relates to a boolean value if the user is logged out or not okay we'll set that up in the constructor by using the getters on the app repository we'll need to add a getter in the repository for the logged out mutable live data then we'll add getters to both these in the viewmodel as well next we'll add a method to call the logout method in the repository public void logout and call the logout method that's on the app repository now we can make the changes to the logged in fragment to show the current user in the text view and to set up the button to log out the user when selected so we'll create attributes for the textview and for the button textview is for the logged in user text view there's a button for the log out and then we'll set those up in the encrypt view method next we'll add a variable for the numeral then we'll set up that view model in the oncreateview method and then we'll just provide the correct class name which is logged in view model next we'll set an observer on the user live data from the logged in view model firebase user is not now we will update the text view with logged in user and pass in the email address of the user so next we'll add a listener to the logout button set on click listener new on click listener and then we'll use the view model to invoke the logout functionality finally we'll add another observer to check for the logged out status so we'll get the logged out immutable live data and add an observer we'll change the buoy into say logged out [Music] and if that's true then we want to navigate the user back to the initial form now to do that we need to go back into the navigation graph and add a new action to take the user from the logged in fragment to the login register fragment and we'll copy that id and if the user is logged out then we'll use a navigation architecture component to navigate back to the login form we'll also need to make an addition to the app repository in the app repository constructor we'll also check if the user is currently logged in and if so we'll update the mutable live data so we'll add a if statement firebase auth dot get current user does not equal num then we will set the user mutable live data we'll post a value of the current user and we'll also update the logged out mutable live data to say that it's not it's false because the user is not logged out so now we can run this app and we'll log in i'll take the user to the fragment which is currently showing the correct logged in user so if we select log out it'll take me back to the login form now i can try registering user as well go to droid2 gmail.com password select register and that will take me to the new fragment as well and it'll show the up-to-date user so that's it thanks everyone for watching this tutorial i've included some links in the description if you want to get a hold of the code samples and if you enjoyed this tutorial please like and subscribe to my channel thanks very much

Channel: Learn to Droid

Views: 6,213

Rating: 4.8974357 out of 5

Keywords:

Id: FuAz-ahdk0E

Length: 36min 2sec (2162 seconds)

Published: Sun Sep 13 2020