Login and Sign Up App ( MVVM ) Firebase as Backend 2021 #androidstudio #androiddev

hey everyone welcome back to cooling stuff and in this video we are going to build our login and sign up app using mbvm architecture and we'll use firebase as a back end so if you want to know mvvm in detail uh you can check out the video in the i button and that video i have explained what mgm architecture is and how it works so in this video i'm not going to explain it again we'll just uh implement the login and sign up using mvpm and firebase okay so now i'll show you the app that we will be creating let me turn the run button so it is installed and as you can see our signup screen so i'll create a new user let's and i'll set the password okay so that's not the actual mail i'll hit on the signup and it says are registered successfully and it takes us to the sign out page again if i hit on this sign out it will take to the sign in activity or sign in fragment sorry and i can just sign in again so couldn't stop and password was including one two three and i'll hit on the sign in so it's working i will be creating this okay so let's start creating the app [Music] so we use mvm architecture to achieve the separation between ui and business logic so that's what uh we are going to try in this app so yeah i have created this empty project and it has nothing now so what we'll do first uh open your google chrome or any favorite browser and search project pack navigation click on this link we'll be using our jetpack navigation library to navigate through different different fragments so scroll down get started with the navigation components and then we'll copy this our dependencies and we'll paste it in the well dot model app layer and here and then click on sync now okay and then what we'll do we'll click on the resource and new android reserves our directory and we'll select our navigation click on ok in here click new navigation resource file and we'll name this as a nav graph click on ok and yeah now we'll delete this our text stream from here and we'll open the google chrome again and uh we'll just copy this up fragment container code so ctrl c and i'll paste it over here so yeah then uh we don't need main activity now now what we'll do uh we create some packages package and i will name it as a view views and then again i will create another package for view model sorry and then one for repository so in the views uh we'll create some fragments so click on the package and new fragment select a blank one and we'll name it as a sign up and a fragment click on ok and then another for sign in so new blank fragment and let's name it as sign in segment click on ok a new fragment and select blank name it as a sign out right one click on okay yeah i'll close all yeah so now we'll start to design our app so first the sign up let me just delete this and i'll change frame layout to constraint layout this one and i have my design ready in here in adobe xd so so what i'll be doing i'll just copy this background and i'll create the edit text button on this textview and android studio so you can add a pictures and all that in android studio as well but not waste a lot time so i have this background and i'll copy it and let's paste it in the drawable folder factor and then sign up okay so we'll change the background of this one to sign up and yeah so now i'll switch to design mode and we need edit text for email select this one and we need another text for password so select this one and then we need a button and the last three we need texture before uh let me just add that color this one in our android studio i'll paste it in the colors it will see and i'll give it name as hello maybe it's orange but it's okay so fbb148 so now what i'll do i'll just fast forward the video because it's so simple so yeah we got our signup page ready now what we'll do i'll just copy this code and i'll open the sign in and i'll delete this and i'll paste it over here okay so i'll provide all this source code in the description box so if you want you can directly copy the xml files so what we need to do first we need to change the background to sign in yeah then what we need to do we need to change its id to sign in hit enter and select here current file and then reflector otherwise it will change our id of the sign up uh email edit text as well so enter pass in here similarly sign it and project files to current file refractor this will be sign in by the final button hit enter select current file reflect and we just change the text as well so this will sign in and in here what we can write not registered yet sign up okay and yeah that's pretty much stuff and again lastly what we can do we'll copy this um buttons code so we can paste it in the sign out one now we'll paste it and we just need to change this frame layout to constraint layout and let's just constraint it already during parent and to the bottom with match constraints let's provide some id uh sorry margin of 24 db and instead of sign in we'll write sign out and we'll change the id as well sign out button select current file reflect so yeah you can add uh pretty much stuff here as well but the motto of this tutorial is to understand how we can use mvm architecture for authentication so yeah so we are done with the design and close all and now i'll open the nav graph and what we'll do okay so now i'll click on this new destination and as you can see the names are messed up i don't know why this happens with the navigation library they should fix this and okay so i guess this is sign up and then we need a sign in and then we need find out okay so we'll drag sign in over here and then sign out over here so so to add the preview what we need to do is we need to copy this stuff and we need to paste it in here this will actually find it and this should be a sign up okay so now i think it's okay so we'll tie this one to sign in and then sign in to sign out again if somebody click on the not registered yet so he can get back to sign up and yeah that's pretty much i guess so now we'll close the nav graph and we'll connect our app to firebase so click on the tools and select firebase click on the authentication and i'll select authenticate using custom notification system so click on the and then i'll select connect to firebase and i'll select the keypad because we just want our authentication from here click on connect and it is connected and then uh go to your console ios convert select your app or project and then click on the authentication then in sign in method enable this mail and password because we are going to use this authentication system so i have already enabled it and yeah then add the firebase authentication sdk to your app okay so yeah everything is fine so now we will start to work on the code part now so first we will click on the repository and i'll name it as authentication repository okay and this will not extend anything so in here first uh we'll create few few variables so first will be the context so we'll select application context and we'll name it as application context then we'll create one new table live data and in inhale will pass firebase user and we'll name it as firebase user mutable live data and print semicolon and also will require firebase auth so firebase and we'll name it as auth then we'll create constructor of this repository class and we'll pass in the application here and yeah this dot application and set the application that you get passed to the existing application that you have in this class okay and then uh we'll initialize our mutable live data so new table live data and then same column again we'll initialize our auth variable so firebase auth dot git instance and in constructor we can have a check if the auth dot get current user is not equals to null means the user is logged in then what we can do will call our firebase mutable live data and we can set value here so firebase auth sorry auth dot get current user so we'll create one method for registering the user so public void and name it as public name it as a register and inhere will pass in the email and password let's name it as a pass so we'll call the auth dot create user with email and password and we'll pass in the email comma first we'll add on complete listener to it so new on complete listener let me just try and see smooth so you can say it clearly and delete this brains notification or sorry annotation and then what will check first if the task is successful is successful elsewhere to show the toast dot get exception dot get message and if the task is successful then again we'll call our our firebase mutable data like data dot post value and our dot get current user so again i will create another method for for uh login so login and again similarly we will pass in the email and password here so string a pass and auth start signing with mlm password will pass in the email comma pass and then add on complete listener new on complete listener if the task is successful or else we'll show the toast as task dot get message get exception dot get message and i'll put send column over here and we'll delete the jetbrains annotation so if the task is successful then whatever live data firebase video live data third post value or dot get current user and that's it again the last method for logout public void let's name it as a sign out and we will not pass anything here or dot we just need to call one method that is auth dot sign out and same column again uh what we can do we can create another another mutable live data variable for identifying if user is logged in or logged out so i'll select blane here and instead of firebase user we can name it user logged status or any anything you can i'll just name it user logged multiple live data if the user is logged out so then what will do keep it small and again we need to initialize it as well so that is user tab and okay so user logged notable live data dot post value and if he logged out then we'll pass in the two okay and then uh what we'll do we'll create a data for or firebase user live data variable so click on ok and yeah also we will create a data for our logged out status mutable data so yeah that's pretty much stuff so it was simple we are just creating methods for login and registering and sign out instead of doing that in main activity we are doing it separately in one class that is a repository which directly connects with the firebase so it will take care of the backend now what will do we need to create one viewmodel class so basically what viewmodel is it is the middleman between our database and views so our views will not directly communicate with the authentication repository class instead they will communicate with the view model class and then view model class will get the data from repository and then it will send that data to views okay i'll click on the new model and new java class let's name it nothing earth view model and this will extends to android view model so we can get application as a context in constructor so create constructor we need to get rid of this database so i'll delete this and we'll create the variables so first will be for our repository so authentication repository and let's name it as a repository uh mutable live data of firebase user let's name it as user data i'll just duplicate this line and this will believe and i'm named as loved status and then repository equals to new authentication repository and will has in the application context and then user data equals to repository start get uh firebase user live data mutable live data and then for logged status repository dot get unlocked multiple live data so as you have seen uh we have called the getters from our repository class now what we'll do we'll create again one method for registering the user so public void let's name it as a register and similarly we'll pass in the email and password and we'll call our app repository so repository dot register and we'll pass the email comma pass yeah and then for sign in or login string email comma string pass and then repository dot login i guess and will pass email comma pass and then lastly for our sign out we don't need to pass anything here just call the repository dot sign out this one yeah and we'll create gators for our two live data variables generate and select data we want this for user data and logged status so click on ok so now our back end is ready what now we will do in the views we'll call this methods from our viewmodel class and we all know that we are calling the methods from repository class in viewmodel class so this is how viewmodel works it's just a middle man between our repository and our views okay so first of all in sign up fragment we delete all this stuff and i'll delete this bunch of stuff where is our sign up okay here so yeah first of all we will collect the widgets id so private we have edit text let's name it as email edit and pass edit then we have the text view so private text view it's sign in text text and then we have button so private button and it's it is sign up button and then we'll override on view created method and here we'll find the ids so email edit equals to view dot finder id dot id dot so now what we'll do we'll again override oncreate method first let's just delete this expense and we create one variable for our view module class that is auth viewmodel let's name it as a viewmodel so we need to initialize this new model inside the oncreate method model equals to new view model provider and here we need to pass this as a first parameter then view model provider dot android view model factory start gate instance and i'll continue from the next line from here and inside the gate instance we need to pass get activity dot get application and then at last dot get and we need to specify the model class so we our model class name is auth the auth viewmodel and then dot class so yeah this is how we initialize our viewmodel class it's it's lengthy but it's okay as you get practice to it it it will be easy then what we'll do we will use a viewmodel dot get user data and then we'll observe this our live data so in here we'll first pass this as open up the new observer so we'll get the firebase user again we can check here so if firebase user is not equals to null then but uh before okay we'll navigate him to the signing page so we need to create a now controller for navigation controller and we will initialize it over here on view created now controller x equals to navigation dot find now controller and we'll pass in the view and then same column so now controller dot navigate r dot id dot from sign up to sign in sign up fragment to sign in this one okay and then uh in here what we'll do we'll add onto listener to our sign in text first so signing text dot set on frequency new on click listener so if the user clicks on the sign in text means this one so we need to navigate him to the signing page here now controller dot navigate r dot id dot sign up to sign in okay then we'll add on not our signup button dot set on click listen new on click plus now and this will be we'll call our view model okay first we'll collect the email and password from our email edit dot get text dot to string then string pass equals to pass edit target text dot to string and then if this are not empty if not equals to email is empty and articles to pass is empty sorry is empty then we call our view model so we model dot register and we'll pass in the email and pass okay so yeah that's pretty much tough so i hope you understand all this so what i will do now i'll just copy paste a lot of code from here actually i'll uh i can copy all the code from here so i will just copy this one and i'll open the sign-in page and fragment first i will delete okay let's delete this as well i'll paste it in here so our viewmodel is initialized and again this will happen similarly but action will change from sign in fragment to find out fragment this one tab okay so if user is there then bring him to sign out page so we'll copy hole on new created method it will see and paste it in here okay so we just need to change the ids this is sign in press tab this is sign in this is a sign up sum text and actually we didn't change i think so yeah it's signing text in here actually it is sign up text refractor for current finally okay so this is sign up text then this is sign in button we'll change this as well sign in this says sign up text okay and this will be sign up so if a user clicks on the so we want it to sign in to sign up tap so instead of calling viewmodel.register this time will call sign in method okay and that will be happy so yeah they should fix uh what we have done just create the widgets first uh email edit and all that then view model nav control so this is how we initialize the view model then we observe the current user details um here then what we have done in on view created method uh we grab the ids and then we initialize the nav controller then we set the id to sorry but then we set on three listener to sign up text and then we navigate him to sign in fragment to sign up fragment and then similarly for sign in button we just call the method that is sign in method in viewmodel class and so that's pretty much simple stuff in sign in fragment i think you understand because i have explained in signup fragment so it's similarly like that now what we will do is we will copy this much of data from here and i'll open the sign out fragment i'll delete this stuff i'll delete this much of stuff under this i'll paste it on in here and private earth view model and name it as a view model and then we require the now controller so now controller now controller website and then in on view created we'll initialize our nav controller so now controller equals to navigation dot and now controller and we need to pass the view and i'll delete this annotations okay and we just got one button in sign outfit so private button it is sign out button will find its id in here sign out button equals to view dot find view id r dot id dot sign out button and we'll add on definition or sign out button so new on click listener and in here what we'll do we'll call our view model sorry new model dot sign out this method and then in here we'll check if uh we need to delete this we model dot it log status and dot observe this and you observer will check if a boolean is true means logged means user is logged out so we can navigate him to the sign in page so r dot id dot um sign out to sign in actually we didn't define that i guess so yeah from sign up to sign in so sign out action sign out to sign in fragment and here so yeah that's pretty much stuff i think we have covered everything so i'll provide the source code or link in the description box so you can get the xml files so now i'll click on the run button and we'll see it's working or not so sign up page and sign up and it has took me to the sign out page and if i click on the sign out it will take me to the sign in page so yeah so this is how we implement the authentication with mvpm architecture and we use firebase for authentication service so yeah that's it do subscribe and check out our new tutorial series on freeze app using embryo architecture and firebase thank you for watching

Channel: CodingSTUFF

Views: 818

Rating: 4.826087 out of 5

Keywords: android studio coding tutorial, android studio coding for beginners, android studio coding in flow, android studio coding with harry, android studio coding tutorial hindi, android studio coding with mitch, android studio coding for login page, android studio coding pdf, belajar coding android studio, android studio coding cafe, cara coding android studio, navigation drawer android studio coding in flow, android studio coding for calculator, coding in flow android studio

Id: iEzziRYaA6M

Length: 34min 7sec (2047 seconds)

Published: Wed Jul 28 2021