Mastering Firebase Integration: Jetpack Compose App with Login and SignUp Features

hello everyone welcome to Native mobile weights in today's video we are going to integrate Firebase inside our jetpack compose application and we are going to allow users to actually create accounts using our application and then eventually they can login in inside our application using the same credentials which they have provided at the time of sign up so let's start today's video so the first step will be we need some dependency to integrate Firebase SDK so we can just use these dependency basically this is for entire Firebase platform and then we can use the respective needed dependency we need okay so you can just copy these two and we can add inside our build out Gradle now as we are using kts so we just need to change this syntax little bit okay we need to use inverted commas here and here as well and like this so this way we can integrate this basic platform and then as we are going to use authentication extension we can just add this as well in kts syntax okay now we can sync our project we can also do these things with the help of this tools and Firebase and then we can choose the respective needed thing so now our dependencies are added project testing now for the next step we need to connect our project with Firebase console okay so we'll just take this name of our project we'll just go to Firebase console and we are going to add and we are going to click on this continue button and we will enable this Google analytics as we are going to use this also in our future videos and we will just continue okay we'll just create the project now Firebase is creating one respective project for our jetpack compose application inside this project itself all of the data will be stored and we will also fetch the data we'll authenticate our users with the help of this project okay our project is ready we can click on this continue and it will take us to the project dashboard okay now we need to add this Firebase inside our application so we are going to add this in Android as of now okay so we need to add the package of our application here so we'll just go to build.gradle and we will just take this package okay and this is the same as application ID basically in application ID and name space both are having the same value we can just take this and we can just add this inside our registration where we are trying to register our application okay so we can add this and this is optional but we can take the name and this is going to be again our login Flow app okay and if you want to add sha1 key we can add this but this is optional for now so we are not going to add this and we will click on register application okay now it will give us one Json file we need to use this Json file inside our application okay so let's download this okay so it's downloaded and let me just try to add this inside our project so we need to add this inside application okay if I show you the architecture again we need to add this inside this application folder so to add this first best thing is let's go to Project structure and inside our application module add this file Okay Google services dot Json now if you just see this file it has some data related to our application our package name and so on now we can close this and we can go back to this registration form now we have added this if we click on the next button it will show us that we need to add this Google Play services inside our project root level Gradle okay so we'll just go to our project root label build.gradle file and here we will add this and as we are using codeclean kts we can just change this according to kts index we can just take this value and we can add here inside ID then we can Define version we can just take this value okay and we need to use apply folds and inside code lean KDX we need to just change this to dot okay and then we can click on sync now now our project will be synced with this Google Play service as well our build is successful okay now if we just go to our instructions page then it is also telling us to integrate this Firebase dependency which we have already added and if we click on next it is saying you are all set now we can just go to the documentation or sample application okay so we'll just continue to console and now we are ready with the dependency part okay now before we proceed one very important thing we need to do is we need to take this plugin and we need to add this inside app level plugins as well we just need to add the ID itself okay and we will just sync our project and our project is synced now one change we need to make inside our UI is that we should be enabling this button this register button once all of the validations are in check if there is any error inside any field our button should not be enabled okay so that once every validation is fine then our button will be enabled and then when we click on the register button we will initiate the sign up process inside our firewise project okay so for that let's add one key here is enabled and let's make it Boolean and by default pass as false okay now we need to add this inside our button we have one parameter code enabled we will just add this is enabled value okay now we will just go to sign up screen and here inside our button component we need to just pass is enabled we need to pass the value 4 is enabled now we need to pass is enabled as true if all of the validations are fine so for that let's go to our view model and inside our view model we have this method where we are just checking the validation with our rules right if you have missed the previous video you can check out those videos where we have implemented this custom validation for our UI State okay now we need one state or one variable which can update us if all of the variables are true or not right so let's define one variable all validations passed and let's create a mutable state of by default false value so it is kind of a Boolean variable which will update based on the validations okay now inside our validation function we have this result for each UI field like if we have a rule for first name if first name is passed the validation from our validator we will have this first name result as true same for email and password okay so we need to write one condition here that if first name result dot status is true and last name status is also true means if first name and last name is validated and are proper and for our email as well if email result status is true means email is also valid and for our password status is also true means our password is also valid so we can update the variable all validation passed load value equal to true okay if all of the fields are validated we can update this mutable State okay if any validation is failing we can just update all validation passed load value is false okay we can also simplify this expression that this value only be true if all of the validations are true okay okay now we have updated this state all validation passed based on the respective validations now we need to use this inside sign up screen so with the help of login view model dot all validation passed node value okay so if all validation are passed so our validations will be true so we will enable the button else our button will be disabled now let's try to run over application and let's see if this logic is working fine how we can identify that if our button will be clickable we will be passing on this event and this event we are using inside our view model and we are having one log inside sign up okay so we can just you know clear everything and first of all let's enter some value here and we can quickly add some random values now our button is enabled okay so if we are clicking on our button we are able to click and we are getting this inside sign up as well okay and if we remove any value and a validation is failed okay right now one validation is failed if we click on the button button is not clickable okay I am trying to click but it's not clickable the moment we entered all proper values our button will be clickable okay if we have any error it is node clickable if we have proper values so it's clickable okay now this logic is working fine now we can just go back to our view model and inside our view model we can create one function create user in Firebase okay this function will take two parameter email office string type and password of string type okay and we will pass this email and password when we click on this register button so let's go to this sign up and inside sign up we can remove this validation now because our validations are happening whenever we are entering the values so inside our sign up button we can just you know call this function create user in Firebase now we need to pass to Value email and password okay how we can pass this value we have the values entered by user inside State okay and we can just update the value and if you are wondering that how we are having the values inside State we are updating the state in every event and these events are triggered whenever user is entering anything and if you want to check how we implemented this you can check out the previous videos here we are just going to use the values from our state okay for password as well we will just take from value okay now we are getting the value here now we can make this as private because this function will be called when we call this sign up function now inside our create user in Firebase function we are going to use this Firebase oauth dot get instance and before we use this let's try to you know create one application class we will call it login Flow app okay and this app will extend application class okay and inside application class own create function this is basically the launching point of our application so here we will initialize the Firebase app okay so we'll just call this initialize app and we will just pass the application Level context now we need to use this inside our manifest we will just use with the help of name and now we can just go back to our view model we can close all of those files okay so now inside this function we can easily hold the instance inside this we can just you know call this function create user with email and password we can just pass email and password which we are getting inside this function and we are going to add few callback method that if everything is completed okay we will just add this we will also add one function for error like if it's failing so we will get any error and all inside this function okay we can add some logs for now okay and let's say inside on complete listener and we will add few other things let's say we access this task which we are getting inside this own complete listener and we add is successful okay and we can just you know take this key equal to 4 Hour readability and we can add some logs inside own failure listener as well we can just add tag and we can add inside own failure listener okay and we are getting some exception inside this we can print that as well so we can just say exception and we can access to this it dot message we can also print localized message which will be same but still let's try to print this okay now let's try to run our application and let's see if we are getting Firebase in action something is happening inside our application or not okay so let's enter some values here we are entering same value again and again next time we will enter something different but it's fine okay so if we see there is one error and our button is not clickable yet now we enter one two three four five six okay and it's clickable now and we can just go back and we can go to our console and we'll click on this button okay so we are getting some logs okay so first of all we are coming inside this sign of function then we are calling this function and it's coming in on complete listener or is successful is true okay so if it's giving us is successful as true so let's go back to our console and let's see if we are having any user okay yeah so just now as we have entered these values Harry and all of these things and we are getting coal bag inside inside one complete listener this one our Firebase code is executed then our task is successful okay and we have one user created for us okay we have this identifier as a email and then we have one user ID as well so one thing we have missed this checkbox we have right so if user is note clicking this we should not be allowing user to create any user and all right we should be only proceeding this functionality when users select this right that means user has read about terms of use and privacy policy kind of thing right so for that we can just go to our UI State we can Define one another variable let's say check box or let's call it privacy error this is by default as false okay and now we can utilize this inside our view model okay so we can just go back to our composable and we can add one function here on checked change okay and this will be of you know Boolean type and let's return it as unit high order function okay and we can call this inside here on check change dot invoke and we can pass the value which will be it okay so we have this inside our sign up screen here we can just get own checked change okay inside this we will be getting the value if it's true or false that means if it's selected or not now whenever user interact with the checkbox we will get a callback inside this function okay so let's define one UI event for this okay and let's say data class checkbox or let's say privacy check box clicked okay and we can just pass the value let's say it will be status if it's true or false okay and we'll just create one UI event okay now inside this event we are passing the status which is coming if user is selected this checkbox true will come here okay so now we need to emit this UI event inside this so we can just use login view model dot on event and we can pass this UI u n dot privacy policy clicked and we can pass the Boolean value which is coming from this function okay we need to handle this inside our login view model as well we have this on event function so we can Define is UI event dot privacy only see check box inside this we can update the UI State now how we can update the UI State and if you have seen the previous video you will be familiar with this but if you are not familiar with that you can check out the video and we can do this with the help of our UI State variable value and we need to you know update this value with the help of copy and here we need to add one New Field inside our registration estate so let's add privacy policy accepted okay and we have already defined respective error okay now we need to update this field here and we will add the naming parameter privacy policy accepted and we will just pass event dot status okay because we are passing this value status from here okay from our sign up screen and inside our view model we have updated that value inside UI State okay now we need to use this inside our validation rules okay so for this we will Define one new rule and let's use one variable privacy policy result okay and we will Define with the help of validator and let's say first we Define one rule we will Define one function validate privacy policy acceptance and we are already having status value that if it's accepted or not it's Boolean value we have and we are going to return one validation result okay inside this we will just return validation result as we have the status value okay so we are storing status value as true if user is selecting this if user is not selecting this we are having status value as false okay so we are returning the same value inside our validation result like if user has accepted is that means this validation is fast if user has not accepted this that means validation is failed okay now we can use this inside our view model okay and here we can just pass status value with the help of our registration UI state DOT value dot privacy policy accepted okay we can use this inside One log if we need we can just print this for now and we can update our Global UI State okay if there is any error inside privacy policy we can just access privacy policy result dot status okay and we can update this also like all validation condition passed we'll also have now this checkbox condition okay so we can just use privacy policy result dot status if everything is true then our Global validation will be passed okay now let's try to run our application and let's see if this checkbox is validating so we can just enter some values so we have entered all of these value if we try to click this it is not clickable yet because we have not selected this checkbooks the moment we select this our state is updated and if you see the result the validation result for privacy policy is also true because we have selected this if we uncheck this it's false okay let's select this again and now if we try to click on this it will be clickable okay and then our code will be executed the email address is badly formatted it is coming in own failure listener and because we are already having this email as a user right we have this Harry at the rate gmail.com one user and this is one primary identifier that's why we are getting this error so now if we have entered some different values and if we try to click on register and let's see the logs so it is coming inside own completion listener and it is Task is successful and if you refresh the console we can see that one new user is created Rowan at the rate gmail.com okay so whenever registration is successful let's try to add one new screen and we can open a our main activity we can just go to our post office app and then we have all of the screens here right let's say we Define one new screen okay so for that we need to go inside screens and we need to add to a new composable and let's say we call it home screen okay so here we will Define one composable function and we'll call it as home screen okay so we need to Define this inside our router first of all okay so we can just come here we can define a new object home screen okay this will be of type screen itself then we need to go inside our post office app we need to Define here as well that if screen is home screen we need to go to home screen okay we have defined this now we can modify our home screen little bit so we can just take the same code for now let's say we take the parent like this okay so we Define this here and like this so this is our home screen we have one surface and we can Define one composable for review so we can just say home screen preview okay and inside this we can use our home screen so for reference as of now we can just add one heading text component and for now and let's add value as home for now okay so now we have our normal home screen so whenever our task is successful right so we can add one condition if task is successful okay so here we can just use our router and we can navigate to home screen okay let's try to run the program and let's see if we are actually routing to the home screen right if we are creating one user one successful user is getting created and are we able to navigate to the home screen so if we create one new user this time and we select this as well we click on this registration and yes we are coming to our home screen whenever our new user is getting created we are coming to home screen so we can do one thing we can just you know create one loader kind of thing and for that we need to just go to our sign up screen and inside our sign up screen we need to add one box and this will be of type modifier we can just use as modifier dot fill Max size okay and we can just use one content alignment and we can just pass alignment Dot Center okay we have added one box and inside this box we can just take the surface okay let's add it here and let's add one circular progress indicator okay but we need to show this circular progress indicator only if signup is in progress right so for that let's create one new state and write it sign up in progress and let's define one mutable State initial value is false and whenever we click on that sign up button right whenever we are coming inside this create user in Firebase immediately we will just make that value as true okay and whenever the user is created here we can just make the value as false okay now we can use this inside our signup screen and we can just use login view model dot signup is in progress then show this only if it's true okay now let's run our application and now we should be having one loader as well when our signup is in progress so if we just create one new user okay we select this we click on register so our progress bar is there now we are landed on our home screen okay now let's try to Define when sign out button for now for now we will Define that inside home screen as well but later on we are going to add navigation Android and everything for now let's go to our home screen okay let's add one button here okay this is our button component we can just pass let's take this to a string first of all so extract a string resource and yes now inside our verton component we can just write log out okay we can take this also to our string resources and then inside own button clicked we need to do something right so here also we can just take reference to our login view model okay let's say we create one function log out inside our view model so we can just call log out okay and we'll call this function from our home screen all right inside our logout function we can create one variable to get access to this Firebase oauth and we can just use Firebase oauth dot get instance now we have the instance we can use this to sign out okay now how we can validate if sign out is successfully done or not so for that we can just create one variable and we can create oauth estate listener okay and we can just use both state listener like this inside this we are getting Firebase authentication okay so we can check that if it dot user current user is null that means our sign out is successful and we can add this inside our add oauth estate listener okay we can just add this inside our Firebase authentication instance and then inside this we have one log right for now we can just Define One log now we can use this code okay now let's run our application and let's see if it's working as expected if we select this we click on register so one new user is created and we are coming inside our home screen this button placement is not good but if we try to click on this are we able to log out let's check that so if we click on this oh why default this button is you know having that component which is false is enabled is false so we can pass one parameter is enabled and let's say we add it as true okay so we can delete this user which we have created right we write and we will create this again we click on register okay so our user is created if we try to click on this button are we getting any event let's click on this log out so we are getting inside sign out success okay so our user is logged out now and if we just go back application is closing but for now like from home we should be able to go to the login screen or somewhere if we just try to go back or if we try to log out right and for that we can just use our router so we can just use router dot navigate to and let's say login screen okay so whenever our sign out is successful we are trying to navigate to login screen okay so instead of creating new user every time we are going to implement the functionality for our login screen okay so first of all let's make some changes inside our files so we have this login view model and most of the code and methods are used inside our sign up screen so let's refactor this and let's call it as sign up view model okay this UI event also this is related to registration screen so we are going to call this also as sign up UI event okay now we are going to create functionality for our login screen so our login screen needs one view model and then it needs one login UI State okay so first of all let's create One login UI state okay and our login UI state will only have email and password right it will only have email and password and then only chances are that either email can have error or password can have error okay so our login UI state will only have these four field email and password to hold the value of these fields and then if there is any error so we will have two error variables also now we need to Define some login UI event okay so let's create one new class login UI event and this login UI event can only have email change and password chain like user can change the value of email and password and then user can click on this login button okay so we have defined One login UI event class also now we need one view model okay so let's create one normal view model class and we will call it as login view model okay and let's extend it with viewmodel okay we will add one Constructor now let's open our signup view model and let's code quickly okay so let's minimize this let's minimize this so first of all we will need one tag okay inside our view model so we can just use login view model as the tag name then we need to hold our UI state right so we can just create one variable login UI State okay and we can create one mutable state of login UI state okay this one now we need to have one validation check for login state right so we can Define one variable State let's take this let's minimize this little bit and we are going to take validation passed so we can say we can use the same name that's fine and then we need to have one variable for login in progress okay this will again be one mutable state of Boolean type false okay now let's write one function to handle the event from our login UI so it will be having one event of login UI event and inside this we can write when when condition that if our event is login UI event Dot email change then we need to do something if our event is that if our password is changed then we need to do something okay and if our last event can be if our button is clicked right then we need to do something so now we need to define the functionality here so we can just use from our sign up view model okay and so if our email is changed we need to update that inside our UI State our UI state will be login UI State okay so like this we can update the value this is just for printing the state so we no need to print anything for now we need to update the same thing inside password so we can just update password whenever anything is changed inside password field now whenever the login button is clicked we can write One login function okay we can create one function login so as we can see that we have one validation function where we are validating everything from our validator so we can create something similar so I have created one for our validation validate login UI data with rules okay so here we just need to pass our login UI state and we will get result for our email and password so we need to update our login UI State value globally okay and to do that we need to use the same way same Technique we need to update email error if there is any error inside email field so we'll just get with the help of email result dot status and then for password error we will just get from our password result dot status like this now we got the result of email and password so we can update all validation pass to Value like everything is validated if email result is true and password validation result is also true now we can use this inside our login screen okay so we can come here and inside this button we can just pass with the help of login view model so first of all we need to use now login view model here okay we can remove this and we need to use this login view model inside text event change as well we will pass login UI event email change and we will use here as well login UI event password change okay now for our button component to make it enable or disable we are going to use this all validation passed right so we are going to add this check that login view model dot all validation passed load value okay this we are passing for is enabled like this so if everything will be passed inside validation our login button will be enabled okay now we need to just use this method validate UI data with rules below our when condition okay okay we need to implement the functionality for our login method right so let's take this below and here we are going to add the functionality so we need to just use Firebase oath dot get instance okay and we need to use this sign in with email and password and we need to use this email and password via our UI State okay so we can just use we can create one variable if you want to simplify like this load value dot email and for password as well we can take from login UI state DOT value dot password okay and we can pass these email and password then for completion we can add one Lambda function that if everything is fine and it's completed and then we can add one for failure as well okay we can add some log here okay and we can use the tag and we can add inside login success and we can use one value from this task result if it's successful and if it's successful we can just pass our router okay and we can navigate to home screen okay if it's successful and if it's failed then we can just add one log in failure and we can add the print statement with error message as well okay this is the code now we need to add one progress bar also so we can just go to our login screen we can minimize everything okay we can take this code from our signup screen as well because everything is going to be same and we can add one box composable box is kind of a frame layout right so we have this screen then we are going to add one frame layout and then we are going to add one indicator which is kind of circular progress indicator right so we can add it here like this and this system back button Handler is just for our back button navigation okay so this is the screen we have but this circular progress indicator should be only shown If Logan is in progress we have this variable so we can add this here if Logan View model login is in progress then show this else we will not show this we need to access this via value okay now we need to update this value also right somewhere like we need to make it true so whenever we are logging in we can make it true okay and once login is complete we can make it as false okay well let's say we make it inside is successful itself okay so this error is no disappearing because we have node added the error status inside our components here so if we see inside sign up screen we have already added this error status right so we can access via login view model Dot Login UI State node value dot email error and same way we can access for our password error okay so now we have added everything we need to just pass one we need to just emit one event which will be our login button clicked event which is this login button clicked so whenever our login button is clicked we are going to access login view model and we are going to pass one UI event which will be login UI event Dot Login button clicked now we have passed this event and we are using this event inside our login view model and we are going to perform login when someone clicks on this button now let's run our application and now let's see the login functionality as well if we click on login so as of now both fields are having error if we enter one user which we have created okay let's enter proper values and if we click on this login button so we can see that our progress bar is shown and we are navigated to home screen right so if we just go to our locat so we can see that we are coming inside login success okay and we are navigating to home screen right if we click on this log out button our logout is also success and if we just go to our home screen and we added this signup view model dot logout right so we are logging out and we can see these Logs with the help of sign up view model so we are signing out and we are coming back to our login screen okay so this is the functionality we are having as of now if we create one new user let me show you one new user so let's create Android okay and Os let's use Android at the rate google.com for password let's enter same thing and if we click on this then only this button will be enabled else this is node enabled and let's say we create this user so it is creating one new user properly and we can see we have this logout option we can log out we can come back to login screen and now we can use that ID Android at the rate Google dot com and we can enter some wrong password let's try to see what will happen so we are getting some error I think hopefully and if we just use login view model right so we are coming inside login failure but we are still seeing this progress bar right so we need to hide this inside our error State as well okay so now we have stopped the progress bar inside failure as well now let's try to run the application and let's try to go to login and let's try to use the user which we are using inside the login flow Rowan at the rate gmail.com and let's try to enter proper values and if we click on this login so it will take us to the home screen and then we can click on this logout and we will come back to our login page we can go back to register page and we can go back to login page again and we have this small piece of application getting a good shape will keep on making it better and better in the next videos we are going to implement dagger and so many other things you can just have a glimpse of the users which we have created inside our Firebase database and yeah so friends that's it for today's video I hope you enjoy this and if you have enjoyed this video please hit that like share and subscribe button also please share these videos with someone who is learning Android or jetpack compose or if they want to learn Android or jetpack compose you can share it with them and I will see you in the next videos [Music] foreign [Music]

Channel: Native Mobile Bits

Views: 9,047

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, LoginFlowTutorial, AndroidUIUX, AppDevelopmentTutorial, AndroidStudio, Jetpack compose tutorials for beginners, how to learn jetpack compose, Firebase, How to integrate Firebase in Android app, Firebase in Jetpack Compose app, Firebase in android project, Android App with real time database

Id: KOI7fS7k8Y0

Length: 47min 31sec (2851 seconds)

Published: Mon May 22 2023