Firebase Authentication with Jetpack Compose - Android Studio Tutorial

hey guys welcome to a new Android video in this video I'm going to show you how to use Firebase Authentication make sure to add all the dependencies that we need you can get the initial source code from the description down below I will use healed for this project it will basically provide all the dependencies that you need and also don't forget to add this cotton kept ID and in the build.gradle project you also need to add this ID here now let's get back to the coding part first we'll connect our app to Firebase for that click on tools and go to Firebase from here we have authentication here click on Authentication and make sure to click on authentication using custom authentication system kotlin click here and then click on connect to Firebase it will open a new window and from here you need to create a new project click on ADD project then continue also continue you can select your analytics I will select my analytics here and then click on create project after that click on continue and then click on connect here so you can see your Android Studio project is connected to Firebase you can see that it's connected now we need also need the authentication SDK for that we need to click on add the Firebase authentication SDK so simply click on here and then click on accept changes let's begin by creating our repository here I'll create one package which is a data package and inside this package I'll create one interface and I would like to specify two function here one is login user this will take two parameter one is email of string type and another is password and the return tab will be flow up resource of odd result the reason I'm using flow here because fluids and asynchronous data stream that sequentially emits values and this resource class will manage all our state and this is basically a save class if you click on this you'll see that this is a silica which manage all our state that means if there's in success we'll get our data if there's an error will show some error data and if our data is loading we'll load we'll see when we use that and the function is registered user fun register user so we'll also like to have the ability of the registration and this will also take email or string and password off screen and the return tab is also the same or flow resource of out result we're done with the repository but we didn't yet implement this repository interface so make sure to come here and click on this bulb icon and click on Implement interface and click on OK Ctrl a and then click on enter but to work with this repository we need Firebase authentication instance which you can get by providing our dependency I will create one application class here application 5S out and this will extend application application and make sure to annotate this with hills Android app we also need to specify this class inside our minifest so go to manifest and write name and you can see that we get our application Firebase out here now we are done with our dependency actually you're not done yet we need to create one app module to provide our fibers or the dependency inside that so let's do that right now I'll create one package here di that means dependence injections and inside that I will create one app module which is an object this object must be annotated with module and also installing and I'll install this module inside Singleton component class this installing means that I'm installing this object op module object in the application component that means this object will leave as long as our application does also I need to provide here some dependency which is obviously our Firebase or dependency and I'll make sure that it's Singleton and now 5S provides Firebase odd how do we now provide the five result dependency simple just say Firebase alt dot get instance and we're done with this Firebase dependency down now we have provided the instance and we can use this inside our repository now to use this you need to get inject and Constructor there press Alt Enter to import this inject and now your private variable Firebase Alt now you see that we can use this fibers out here next we will create our login user function for that we need to return something we need to return a flow of resource of alt result so I'll return flow and a flow block here I'll open the flow block and this will just first I will emit loading that means when we get our data first it'll load our state that means our state will be loading next result and now we need to use Firebase auth Dot sign in with email and password and you can see this takes two parameter which is email and password will pass it here and say dot await this area means we'll wait till our Firebase sign in with emailing password operation is done and we get the result after that emit resource up success we expect a success here so inside this we want to get the result next we would like to also catch our exception here sketch block and emit the error here you can see we also get the error here and say it dot message Dot tostring we're done with our login user and now it's time to create our registration function pretty much same I would like to copy this from here and paste it here we just need to change something from here which is instead of signing with email and password we need to call create euser with email and password as this is a registered user function create user email and password and we're done we're done with our authentication repository implementation we need to provide auth repository implementation inside our app module so I am going to say provides and Singleton now save provides people victory implementation and this will take a return type of alt Repository and return our all three positive implementation this takes as a parameter Firebase auth now how do we get this we can simply say 5S out here and just pass it as an argument here we can use our repository implementation inside our V model let's create the vmodel here sign in viewmodel and this will extend our view model here also don't forget to annotate these so with our heel to be model and now we can inject our repository here repository is injected I will use channel here to manage all my one-time events so let's do that create two State Here sign in in state is channel of coding Channel obviously and the type is sign in state next we need to receive this channel as a flow well sign in state two sign instead dot receivers flow we're done with our state now we can use it you can say fun log in user this will take two parameter which is obviously type string and another one is password which is also string now I would like to create a scope here which is a BML scope and launch it here now you can call this repository and call our login function from here repository Dot Login user which you can see is here login user and this takes two parameter email and password we pass the argument here and Dot collect now I need to collect all the state that we have here and so when I will create a win when result is Success so that means if there is a success I would like to show something here if is loading then I would like to show something else and eventually if it's Error then I would like to show something else so we need to send something inside this Channel and get something out of this channel so how do you send something inside this channel we simply say sign in state DOT send and now we have to call our sign in state it is a data class in the end and it manages all our state to to the UI and I'll show you how to do that Sunny state is Success when it's success we would like to show something so you see it is a string so I can say that sine in success okay now you're done with our success and what if you're sliding we would like to show a loading circular progress indicator let's I can do this and instead dot send something inside this channel and sign in state is loading cultured crew true when our state is in the position of loading we would like to set this loading as true because initially it is false now what if we get an unexpected error I would like to show the error message dot send and is okay state is error now we can call this result Dot message Dot message and we successfully completed our sign in viewmodel now it's time to create our sign up viewmodel which is pretty much similar to this I would like to copy this sign in view model and use this create a side of the model yeah to sign up your model and we need to do some changes here our signup B model is also done now we can create our two screen which is login screen and another one is sign up screen let's first start with our signup screen because we would like to register fast and then login so let's create sign up screen and let's create a composite function here I won't explain you the screens here because I already assume that you already know some basic of compost we have successfully created our signup screen now what if the state is ready obviously would like to show circular progress indicator inside this button we need to call our register function from our B model so create a coordinate scope launch a quarter scope and then call our remodel from this view model call this register user and pass email and password we're done our sign up screen is complete now we can call this sign up screen for more navigation graph so navigation graph here in sign up screen sign up screen we are calling on deviation graph the same with our sign-in screen our sign up and sign in the screen are very much similar we can copy the sign up screen and do some minor changes I will leave that to you also we need to call this sign in screen from our navigation graph purchase this screen as a silent screen and now we are ready to launch our app and also don't forget to call this navigation grab for a more main activity here in the inside this set content and I forgot to mention that you need to also Android this main activity with Android entry point so The Griddle build finished and now we can test our app with some email fake email listing equipment Android fake dot com and I'm not going to show you the validation process here which is a pretty lengthy topic I will show you this in another video and let's give it a password Here and now if I click on sign up I should see a circular progress indicator and also a toast with success message let's click on sign up and you can see we saw a circular progress indicator bar and a toast this let's now sign up with this mail but we need to see if we got our user inside the Firebase come to authentication and click on reload we see that we got our fake email here now let's get back to visor again and let's see if we can sign in with that mail login if I click on sign up here I mean this button here I should see a success message with login let's click on it and you see sign is success and we also saw a circular progress indicator here that is everything with our Firebase authentication I will also show you in the next video how to do one tab sign in and sign up with the Google and Facebook so make sure to like this video I'll see you in the next video

Channel: Arfin Hosain

Views: 13,628

Keywords: android studio, jetpack compose, firebase, firebase auth, kotlin, firebase email and password, kotlin firebase authentication, firebase tutorial, firebase android studio, firebase authentication android studio, kotlin firebase auth

Id: gIuHATUBGvA

Length: 22min 47sec (1367 seconds)

Published: Mon Nov 21 2022