Jetpack Compose & Firebase Authentication | SignUp, SignIn, Firestore Integration | App Development

welcome back to coding Hub and today we are creating an awesome application where we'll be basically having a splash screen now after this will be having a sign in and a sign up screen the user will be able to sign up by providing his first name last name his email addresses and the password now we'll be storing the email address first name last name in the fire store while the authentication we'll be doing using the Firebase authentication using email and password now we'll be also looking how we can integrate Google authentication and Facebook authentication in our upcoming videos now after clicking on the sign up button user will be able to sign up and navigate to the main screen where his name will be displayed now he can sign out and now he can again sign in by providing his email address and the password now by providing the password you know user will be also able to check whether his password was wrong or his email that he provided was incorrect now for this we have also done the validation check now after providing an inconsistent password or we can say you know uncorrect password the user will be getting this message like the invalid password or email after this user can you know recheck that and again sign in by providing the correct credential so now let us jump into the tutorial and see how we can create this application okay so at the beginning what we'll be requiring we'll be basically requiring an empty activity project after creating your new project you have to come to this tools now click on this Firebase now you'll be finding out this like Cloud function for Firebase Firebase ml you have to navigate up we'll be finding out this authentication click on this they'll be seeing this authenticate using Google authenticate using Facebook login that authenticate using a custom authentication system they'll be clicking on this after this you have to click on this connect to Firebase now a window will open which will basically open up your console or you might be required to sign up to uh this particular Firebase website after doing this you have to click on this add project name your project so by default the naming will be you know considered as of your application name I'll be you know keeping it as now I'll be click on this continue now see you will be having this unable Google analytics for this project if you want analytics you can click on this you have to click on this continue now you have to select your account for the analytics I be selecting any of one and then what I have to do I have to click on this create project now we have to wait for some time till this you know create uh creating of our project is completed now we have to click on this continue they you will be opened up with your project now you have to wait because you have to connect it with your Android studio now you have to click on this connect and you will be finding out this that your Android Studio project is connected to your Firebase application okay now the next thing will be that you can come back to this now you have to add the you know Firebase authentication and you will be seeing this your app is now connected to Firebase if it is then you are okay with all of things now you have to click on this add Firebase authentication SDK now click on this accept changes it will you know configure your grle project again it will uh add the required dependencies and all of that okay now we are done with this we'll be finding out few of the you know default codes we don't require that we have to come back now in this this you know we are also getting this Cloud fires tool so we have to also click on this now get started with Cloud fire so you have to click on this now also add the cloud fire s sdate to your app now click on this accept changes this you know this fire store we'll be using it to store the first name last name and you can store any other things in this particular fire store so you can use that particular values in your future references you have to come back now you have to also set up this realtime database now this databases can be used to store you know the images and all of that things if you want so we'll be configuring this particular things also because if it will be required we'll be using it in our upcoming videos okay so we are done with this now our Firebase is set up there will be a few more things for this you have to open your Chrome browser now over here you have to basically search for Firebase come to this Firebase console okay upon opening you have to you know select your same project so I be selecting my lockin sign up project okay over here you have to come to this authentication now in this authentication you know you have to click on this get started now see you will be finding out this you know the things like we have email password authentication phone Google you know Microsoft Facebook so you can you know authenticate using all of this additional provider with this you can also do it using email password for this video we are basically covering this email password and in our upcoming videos we'll be also implementing this Google Facebook and all of this available authentication providers okay now the next thing will be that you can also have this this SMS multiactor authentication if you want uh we will be also looking it in our upcoming videos what you can do is that now our authentication is almost you know set uped but our fire store is not set uped so we have to define the rule set now for this what we can do we can also come down to this Firebase and we can click on this login sign up again it will take some time for the loading okay now we can come to this Cloud fire store it will also take some time time for the loading now here you know what we can do we can basically uh come to this create database now keep it as it is now you know you have to start in test mode okay so in for production mode we can Define different rule set I'll be you know defining that particular things in our upcoming videos for now we can go with the test mode and we have to click on this create so it will be basically setting up our security rules like read write and everything okay now you know we are done with this also and we can start collecting the username password and emails for our future references and we are now ready so we can now navigate back to our Android studio and we can start with our project okay so firstly we have to come down and we have to remove this now we'll be also removing this greeting Android call from here now we have to remove this also and we have to do one more thing we have to remove this also uh so we'll be basically you know only keeping the set content over here so we'll be removing this and over here we are almost done now let us understand what is happening over here okay so over here we are basically having a class main activity which is inheriting from the component activity and and after this we are basically having the set content where we'll be basically setting the content now over here we'll be basically creating and composable function and the composable function will be app content now let us create that for this we have to use the composable Antion after this we can simply say fun we can say app content now here over here we'll be requiring one more thing which will be basically you know to have the instance of the odd for this we can simply say private and we can say well we can say odd and here in this OD what we can say we can say Firebase or and we can basically you know uh use the lazy one for this and then we can say fire base or uh it will Firebase do O Okay so we are done with this let us see what is happening uh so it is basically saying to import the Firebase object we can do that okay now we are done with this now let us focus on this app content over here we'll be basically having the O okay now what we'll be having we'll be basically opening this okay now over here we'll be basically having a mutable state which will remember whether we have to show the splash screen or we don't have to show the splash screen screen for this we can use a variable where and we can say show splash screen okay then we can say by Remember by remember and we can have this over here one more M okay now after this we can basically have the mutable table SE of and we can basically have for the starting as true so it will be true okay now here we have to basically import the function remember now we have to also import few more things like the state. get value and set value okay now we are done with this now the next thing will be that we have a launch effect now this launch effect you know it is basically a composable function which we be using to you know create a delay so we can say launch effect and in this launch effect we'll be having uh this just a second so if we can remove this and we can simply have this launch effect and here we can basically have this uh you know show splash screen okay and in the show splash screen we'll be having a delay and we can basically have a delay of maybe you know like 2 second for this we have to pass 2 millisecond now after this you'll be having you know this state change to True okay so we can simply say show uh Splash stren equals uh now we can make it false because we have already shown the screen okay now there are few things like we have to import this uh function launched effect okay so what we can do we can come over here and it is basically telling me to import the function launched effect okay so we are also done with this now this will basically you know it will basically create a 2C gap which will help us to show the splash screen now we can have the next thing which will be basically a Crossfade uh you know uh Splash uh or we can say a Crossfade you know composable function now this basically you know it will basically provide us a animation between the state based on the target values okay now over here the target state is basically being set to the show splash screen which means it will cross fed between the state when show spash screen changes okay now the next thing will be that we provide a Crossfade animation for this we can simply say cross fade you know and then we have a Target State we can say show splash screen now after this we will be required to provide a label and we will be having an empty label for now and then we can come down and here we can say is slash scen Vis okay now down here what we can see we can say if is splash screen visible then what we have to do we have to you know jump to the splash Tre and then we'll be setting the show splash scen to false as we have already shown the splash screen we can say splash screen and we can say show splash screen and we can make it as false okay now after this we'll be also having an lse statement which will basically handle uh uh the OD or main screen now if the splash screen is already true that mean the flash screen has been shown right now we have to navigate the user to the authentication screen or the main screen depend upon whether the user has been already been authenticated or he is a new user right so we can say OD or main so we'll be having this OS capital and then we can say main C okay now we'll be having few errors the reason is very clear that this or main screen is still not created so we'll be commenting this down now let us come to this and see what is it is saying okay so we haven't created the splash screen function also so we are also getting an error over here now let us focus and create our splash screen function next uh now this composable splash screen function will handle the splash scen okay so let us create the splash scen for this we have to come down and then we can create a composable function and we can name it as you know splash screen so we can say splash screen now in this splash screen we'll be basically having uh a Lambda which will be navigate navigate to VA or main so the reason is very simple when the splash screen will be shown you have to navigate it to somewhere right and will be na navigating it to either the sign up or the signin screen or we can say to the main screen okay for this we have to Define that the input will be nothing or we can say the parameters are nothing and then there will be a unit over here okay now over here the next thing which we have to you know show is basically the splash screen and we are basically having a rotation effect for this we have to you know have a remember State we can say where and we can say rotation State and in this rotation State we can basically say by remember you know and then we can have a mutable state or float state of we can say so we can have mutable Flat state of and the initial value will be ZF okay okay now the next thing will be that we focus on the launch effect okay so and that's basically what we are doing uh the same thing which we have discussed previously in this launched effect okay so we are basically you know creating a delay okay now let us focus on that so we can say launched so we can directly copy that out also okay so we can come down we can simply copy this and we can come down and we can say this okay now over here this laest effect will be a rotation state so we have to say rotation State and then over here we have to make this rotation state to + one okay so we can say rotation State okay and we can say plus equal 1f okay so we are now done with the rotation now the next thing will be that we you know uh have a scale okay so it will basically you know the splash screen UI with transition which we'll be using for for this now the next thing will be that we focus on this so we can say well scaled by animate animate float estate and in this we have to set the target value we'll be keeping it as 1f and the next thing will be to you know decide the animate spec so we have to come down to this and then we can simply say that we want a twen spec and in this twin spec we'll be having a duration so we can say duration uh and we can have a 500 millisecond and over here that will be you know a label and the label will be an empty label okay so we are also done with this and the next thing which we have to do uh is that we have to focus on the you know the splash screen so for this what we can do we can create a box so we can say box and over here we'll be having this box and in this box we'll be having a modifier so we can say modifier equals modifier and in this modifier we'll be basically having that we want to fill the maximum size so we can say modifier do fill Max size and with this what we can do we can have a background and the background which I will be setting is to a white color so for this we can say color white okay and we have set the background color to white now the next thing will be that we have to align everything for this what we can do we can simply align you know uh we can have a center alignment so we can simply come over here and then we can say content alignment and we can say alignment Dot Center okay now everything whichever will be in this particular box they will be in a centered okay and the next thing will be that we have the image right now for here what we have done we have considered a simple image for this what we can do we can you know come down over here and we can say image and over here we have to pass the painter so we can say painter resource now we have to pass the ID we can say R do dble dot now you have to have anything let us consider the IC launcher for now okay and we'll be changing this later on now the content description I will be passing nothing so NE you can have a string or you can pass null Simply Now the next thing what we have to do we have to come down over here have a comma and then we'll be having the modifier we'll be having modifier modifier now why are we using this modifier we are using this modifier to set the size of the image to have you know uh shape to this particular thing and we'll be using scale to fill the shape okay so we can say modify do size and let us have a size let us say 150 DP now DP is basically a unit Matrix which is basically help to measure the things now we'll be discussing more about this in our upcoming videos the next thing will be to have a clip now in this clip will be basically having circle shape so it will basically Define the shape of the image which will be circle now the next thing which we can have is basically you know we can have a scale okay so we can say scale and we can say scale okay and it will basically scale the image to fit to that particular screen uh or we can say that particular shape now the next thing will be to rotate it right and we can say do rotate and we can have this rotation State okay so we have done this now what we can do next okay so we have applied the rotation to uh rotation effect to that image and everything and finally what we are having over here is our you know project done and so we have completed our you know this Splash keed and the next thing which we have to jump in is basically on the o or main screen we can say so so let us jump into that particular part for this what we can do we can come down and we can have another compos over here which we can say compos and we can say fun and we can say or or mean so it was all or main screen okay so we have basically having this and here we have to pass the fire Bas or and we can come down now the next thing which we have to do we have to have a you know remember State for the user so we want to know whether the user is already been logged in or not so for this we can simply say where user by remember and over here what we can say we can say remember and then we can say mutable you know mutable State off we can use the and then over here we can have or do current user okay so we have done that now the next thing will be to check whether the user is you know already been authenticated or not so if the user is not authenticated then we'll be getting the user as null because there is no user so if there is no user what we can say we can say navigate to the O screen so you can say o screen and we are basically using Lambda now over here here we can have this on signed you know on signed in and this will be basically uh call back Lambda function now over here we can say sign and user and over here we can say user equals sign any user okay so we have have basically stored the sign in user uh from the you know OD screen so if the user click on that signin button then the user you know ID will will be storing it now the next thing will be to have one more thing which will be basically the else part so what if there is you know no user so we will basic we will basically navigating him so what if there is a user so we will be basically navigating him to the main screen so we can say main screen and I know there are multiple errors over here because the reason is that we haven't created the screens still now but we'll be creating them and this will be going on okay now the next thing will be that you know we pass the user information to the main screen now for this we can say on sign out so if the user when know clicks on the sign out button on the main screen then we have to sign out the user with this we have to make the user null because the user has signed out so we can say or and we can say to signed we can say sign out and the next thing will be that we make the user equals null okay so we have now made the user null now the next thing will be that we are getting this errors like cannot in infer a type of for this parameter please specify it explicitly so we have to do all of this uh you know for this what we have to do we have to basically create all of this functions okay so for now we are also done with this author main screen and the next thing will be that we focus on the all screen for now okay so we can come over here and we can say another composable and we have to say composable and we have to come to this fun o screen and in this o screen we'll be having that call back lambdas which we was all signed you know all signed in and it will basically you know have the Firebase user as the parameter and the return will be just a unit okay okay so now see we have started to you know uh eliminate this errors one by one okay now let us focus on this now the things which we will be requiring over here is that we'll be requiring few of the remember mutable State a mutable State for the email one for the password one for the first name one for the last name so all of this will be required so let us start so we can sayare email you know by remember so why are we doing it the reason is very simple and uh that when a user suppose say you know inputed his credential okay in the signin screen and let us suppose the user find out that he was new to this application and what we want is that if we click on the sign up button he doesn't have to fill that you know parameters again like the email and the password so you can directly fill up the you know name and his last name and he'll be able to sign up okay so we'll be having this m table State off we can say and we'll be having a string over here okay now we have to create the same thing one for the password one for the first name one for the last name so we can have this as password we can say we can have this as first name and we can have this as our last name okay just a second having this as our last name okay so we are done with this now there will be few more you know mutable State like for the loading for this we can say where is loading and we can say by remember and we can have another one of this and we can say mutable mutable spe off and we can have a false value for now okay for now we are basically having a false now there will be a few more thing like is sign it or we can say is sign in so if it is in sign in then we want to you know this will be basically being used to uh you know change from sign in to sign up okay uh so uh it will basically been used for toggle effect we can say so we'll be saying if sign in we can say by remember okay so we have to say remember and then we can simply you know have this as a mutable state of cre so at the start what we are trying to say that we'll be you know loading the user to the sign in screen from the splash screen if the user is not already been authenticated and upon clicking on you know that I don't have a account I want to sign up we'll be changing this is sign in fals okay so it will basically help us to toggle from one screen to another now we'll be having another one for uh is password visible for that password toggle password visible and we can have this attain as by remember remember and then we can have you know a mutable state of false so because we don't want to show the password at start so if user want to see it then we'll be showing it okay now we'll be having a state variable we can say for you know for uh error message we can say for this what we can do we can have another one my error message and we can say by remember remember and then we can have this mutable state of you know uh so it will be basically a mutable state of string you can say we'll be having the string and then we can have a value initially null okay uh so it will be basically a null mutable state of string okay so we are done with this uh my error okay so we have to fix this spelling so there will be another R over here okay so we are done and it will be G okay so we are done with our variables and now what we can do we can basically load the images for the background for this what we can say we can come down and we can have this Val image painter so we can say image just a second you can say print so we can say image printer and here in this image printer I will be basically having a painter so we can say painter pain and we can have this painter resource and here we'll be basically having that background uh you know image over here so we can say uh do triable and we'll be setting the this also uh in the next part okay so for now we have just set it to this IC launcher background so this will be basically the background okay now the next thing which we have to do is that we have to start by you know designing our screen so over here the screen which we'll be designing is basically the sign in and the sign up screen for this what we require we require basically a box so let us start by creating this box okay okay so before creating this box we have to import this painter we have to import this class painter now let us create the Box we can simply say box and in this box we'll be having few of the things like you know we can have a modifier now this modifier will basically help us to fill the maximum size we can say modifier. fill Max size now the next thing which we'll be having in this box at the starting we'll be having an image which will basically cover the entire background we can say so in this painter we can say image no image painter and the content description we can keep anything so you can have any description to this but now I will be having an you know an empty description after this we can have a modifier so we can say modifier and over this modifier we'll be basically filling the entire size we want the image to you know fill the entire size of the screen okay now after this we'll be having the content scale now for this we'll be having a comma over here uh let us bring this also down so we can you know clearly see the things okay now after this we'll be having this content scale and this content St scale we be saying content scale. crop so it will basically crop the entire image centered focusing on the center and it will scale it down okay now the next thing which we'll be doing is that we'll be creating our card and upon this card we'll be basically showing you know that uh the login uh credentials like the email the password we can say the first name last name and all of that so we we are having a white card so we are creating this now this card will be basically a transparent card for this what we can say we can simply say card and over here we can say card and in this card we'll be having a modifier okay so we can say modifier so it will be like modifier equals modifier fire dot you know we'll be having uh like a fil Max size we can say and after this what we can do we can simply say background background and in this background we'll be having this material theme which we can use and we can say material theme do color scheme dot we can have this surface and we can say copy then we can have Alpha value over here let us give it h 0.25 F so this is basically ke you know this Alpha value this 0.25 will provide us that transparent effect now the next thing which we have to do we have to have a padding over here we can say padding and the padding which I will be giving is of 25 DP now the next thing which we'll be requiring is that we have to clip it we can say clip we can say clip and in this clip you know we'll be using our rounded Corner shape so this will basically provide us a rounded you know Edge Edge uh we can say card and the value will be 16 DP now if you increase this value the roundness will increase okay so like if you keep it in 50 or 100 the the scard will be of a circular shape okay so we are keeping it as 16 DP so there will be a little bit of roundness at the corners now we can provide elevation for this we can say elevation we have we have to have a comma over here firstly and then we can say elevation elevation and we'll be having a card ele uh card default we can say so we can say card default and we can have this like card elevation okay so this will basically provide us a default card elevation so it will look like a elevated card okay now the next thing which we are requiring over here is that we have to create that first name text field that last name text field and all of that for this we can be using a column because everything in this particular thing will be basically in an you know in a vertical way so for this we can simply come down and we can say column okay so we can use this column now this column you know we can also have few modifiers over here so we can say uh modifier and this modifier which we'll be using we'll be using it to fill the maximum size so we'll be saying fill Max size and the next thing which we can do is have a padding to it and the padding will be of 16 DP okay now the next thing which we have to do we have to basically you know Define the horizontal alignment and vertical arrangement of this we can come down over here have a comma and then we can have you know this vertical Arrangement equals Arrangement do Center and then we can have this horizontal alignment uh so we have to have a comma down over here and then we can basically have this horizontal alignment and then we can say alignment do Center horizontally so it will basically align the entire content horizontally in the center and vertically in the center okay now the next thing which we require is the first name and the last name now the main thing over here is that the first name and the last name shouldn't be shown in the you know in the we can say in the login because it should only be shown in the sign up for this we can simply have a if condition and this if condition will basically check whether you know it is sign sign in uh if it is not sign in then we can say if it is not sign in and then what we can see and come down over here let us see what is we are getting so we have to check it again we can say if not sign in then we can come down and we can say we want a spacer so we uh the spacer will be basically use to you know have a height at the top so we can say modifier modifier Dot and then we can have this height and this height will be basically of a DP okay now the next thing which we have to do we have to create our text field uh just after this spacer so we can have this you know text field and in this text field we have to pass a value so the value will be basically first name so we want to store the first name in this particular place and this on change we can simply say first name equals it so whatever the input will be it will be basically stored in the first name okay now the next thing which we have to do we have to come down uh we'll be having a comma over here so we can have a comma over here and then we can come down and then we can say modifier fire dot okay so it will modified first modifier modifier we can have this start and then we can say fil Max with okay so we will filling the maximum withd and then we can give a padding and let's give a padding of somewhere 8. DP 8. TP and then we can bring everything like down so we have this cool looking thing okay now we have done this now the next thing which we have to do in this youu after this we can have a comma and we have to specify the label and for the label what we can do we can simply have a text over here and this text Will basically say that first name okay it will say first name so this this is basically the hint okay so this is basically the label which will be shown so it will basically show that you have to enter the first name okay now the next thing which we'll be requiring is uh you know again another spacer and then we can follow by a last name so for this what we can do we can simply copy this [Music] down so we can copy this down with this and then we can going come down and then we can have this okay we can remove this Extra Spaces we can remove this also and here it will be basically last name last name that will be also last name and here it will be last name okay so we are also done with this now the next thing which we'll be requiring is that we have to focus on you know uh the next part where we'll be having the email field and all of that for this what we can do uh we can you know navigate after this test and after this we can have this you know another spacer we can say and it will be basically modifier dot height and we can give a height of like 16 DP okay after this what we can have we can have a text field so we can have this text field and in this text field we have to define the value we be basically saying it email then on this on value change we'll be saying that email equals it okay after this what we can do we can basically you know have a comma over here and Define the modifiers so we can have you know something like this we can have modifier equals modifier and we can have this fill Max width and then we can have a pad and this padding will be of 8 DP okay so we are also done with this now the next thing will be to provide a label we can simply say label and we can have this label and in this label will be having a text we can say text and and this text will be basically having a text saying email okay and then we'll be providing an icon this icon will help you know to provide more beautiful look to it so we can have this leading icon so you can have a leading icon and then you can have you know a trailing icon we can see so here for email we'll be only having a leading icon we can use this icon and over here we'll be having this icon do default default do email and then we can have this content description description and we'll be having it to know empty we have to import this we have to import this object we have to import this also we have to you know use this one then we have to import this also okay so we are done with this uh now the next thing will be to you know Define the key uh keyboard options for this we can simply say keyboard action so we can have this uh keyboard action or we can say option okay so we'll be using this option and we can say keyboard options. default we'll be using this dot default then we can say dot and we can say copy and here in this copy you'll be having this keyboard type and in this keyboard type we can say that keyboard type. email so we are basically defining the keyboard type and we are defining that we want the email keyboard type okay now the next thing which we want is we'll be having a comma over here and then we can have a visual trans uh transformation for this we can say visual transformation and over here we can say if is sign in then we can have visual we can have this visual transformation and we can say dot null and else we can also have this none one now so we will be defining this things in our upcoming videos for now I am just having this things and be also having this to okay so I'll be showing you how you can basically set a visual transformation in our upcoming videos but now we are basically having this parameter over here okay now we have to focus on the next thing and the next thing will be that we create our text you know the password text field now for this what we can do we can have the same text field over here we can come over here and then we can have this okay now this will be basically used for the password now for this password what we have to do for this we'll be requiring a spacer right so we have a you know gap between both the text felds so we can have this spacer and in this spacer we'll be having a modifier modifier and then we'll be having the height and we can say 8. TP okay and now this email will be changed to password we'll be saying password okay and this will be also password now there are few more things like you know this text will be changed to password and and the leading icon it has to also go it will be basically I'll be using a log symbol now you know we can set multiple things as per your wish now the next thing which we'll be requiring is that you know this visual transformation okay it has to change before this let us focus on this so keyboard type we can say password okay and we have to import this also this log okay okay now this visual transformation we are saying that if you know this we are saying is password visible so we can have this is if is password visible so if the password is visible what we want we want the uh transformation none else we want the password visual transform uh we can say so for this we can have the SPs and we can say password visual transformation and then we'll be having this circular bracket and can have a comma over here okay now the next thing which we have to do we have to define the keyboard uh keyboard uh option and we have done this to password but let us have the training icon because that will be the next thing so after this we can come down and we can have you know uh trailing icon uh this trailing icon will be basically used to navigate uh between show password and uh don't show password so we can simply say failing ion and here we'll be having this trailing icon and we can say icon button so we'll be using a icon button and we'll be having this part to do and here what we'll be saying if you know if this button is Click so we'll be saying is password visible and we be making it to is password visible so what it will do it will basically toggle so if the password was visible then it will toggle to is not visible and if it is not visible it will toggle it to visible okay now we are having this and the next thing which we can do is we can have the icon we can say Val icon and we can say icon well icon equals f okay if is password visible then we'll be showing this icon which will basically icons. default. log it'll be showing this icon if the password is visible but if it is not visible then we'll be showing a search icon so this will basically show that you know the user can see the uh icon okay so we can say search okay so we are also done with this now the next thing will be to have the icon so we can say icon and over here we can have image vector and we'll be passing this icon only and over here what we can see so we'll be having a comma and then what we can say we can say content description and we can provide a Content description uh let us provide something like we can say toggle password prity okay so we are just providing this okay so we are also done with this and the next thing will be that we provide the remaining thing the remaining thing will be that we'll be requiring a button with this okay so here was the text field let us come down and Define another spacer we can say so we can say spacer and we can say modifier and we can have something like height and let us give it a height of 16. DP and then we will be having few of the other things now the main thing which we'll be having will be having the error message so we can say error error error message and over this error message message we can say if my error message okay so if it is says if my error message if my error message then we can say if my error message not equals null so if the error message is not equals null then we can say text so we can have this text and in this text you'll be saying my error message okay and then what we can have we can have a color to it so we can have a color to it come down and we can have a color and this color can be something like color color dot red have a comma and come down have the modifier equals modifier and then we can say do Cell Max withd and then we can have a padding and this padding will be basically of p. DP now we can arrange this things bring them down so it can be much more clearer now the next thing which we will be requiring is that we'll be requiring another spacer so the spacer will be basically of modifier do height and this height will be basically of 16 DP and then what we can do we can now create our sign in sign up button okay and for this what we can say we can say button and we can use this button we'll be having a on click now in this on click we have defined multiple rules we have to come down bring this down now see if it is sign in okay then we have to focus on the sign in and if it is sign up then we have to focus on the sign up okay so what we can say we can simply say if if it is is signed in and what we can do we can simply come down and we can say sign in we'll be having this sign in function uh now in this we'll be having to pass authentication email and password and then uh what we can have we can have this on signed it and over here what we can see we can say s 10 Cho which is basically a Lambda and over this Lambda will be having all signed in and here we have to pass this signed in user okay now the next thing will be to have the next l Lambda which will be on sign in error so what we can do can come down over here and then we can say on sign in error error okay and in this error what we can say we can say uh error message so it will be error message and in this error message what we tool we can come down and that way we can simply say my error message my error message equals error message okay so we are also done with this now we have to define the SSE part uh before this we have to bring this properly okay so uh this is where our if ends we can have this else and and in this lse she'll be having signed up this you will be Capital as of the camel casing and then we'll be passing the Au we'll be passing the email we'll be passing the password we'll be passing the first name you'll be passing the last name okay and then we can simply say that if sign in user so we can come over here and we can say if f sign and Chooser then we can say on sign in and we can say we can come down and we can say sign in user okay so we are also done with this so this will basically help us to toggle between sign in and uh sign up so we are not creating two different screen this will basically help us to do both the things in a same same screen okay so it will basically you know uh it will basically you know create uh what we can say change itself upon the things okay now the next thing which we have to do is that we can you know have a space over here to align [Music] them okay so this was our butter and now the next thing will be to define the modifier so after this you know after this on click we can Define the modifier so we can come down and we can say mod fire and we can say modifier then in this modifier what we can have we can have a fill Max width and then we can have the height let us give a height of like 60 DP to the button now the next thing will be to focus on the padding and let us give a padding of somewhere around 8. DP and then we can similarly provide the remaining things okay but uh for now this is enough now let us give the text to this p and we can have this text and in this text what we can have can basically have a text which will be saying if signed in so if if is sign in we can say if is sign in so if the user is already uh in the sign in screen then we'll be showing a different text so the text will be sign n we can say sign L else what we can SW well we can basically show sign okay so this simple quote will basically help help us you know to not create another we can say uh activity okay so we are not needed to create another similar screen for the signup both the things can be integrated on the same screen okay now the next thing which we have to do is will be having a font size with this we can say font size and the font size we can give it to 18sp it is also a unit measuring tool which is basically being used to measure the you know the text we can say the text this okay now the next thing which we'll be doing is that we are having [Music] this and we have you know completed our this part almost we can say so we are having this card and everything we are having this bottle now let us focus on the next thing so after this text we are you know or we can say this button we have only one thing remaining and that thing is that we require we can say we require one last thing which will be basically so what we can do is we can bring this to down over here and this was where text we can see this button came now okay perfect after this so we have to check one more time the indent okay so this was the column indent okay so after this what we can do we can come down and we can have another box now this box why I am using this box we'll be using this box to show that clickable text you know which will basically shares that if you don't have an account you can sign up or you if you don't if you already have an account account you can sign up for this we can come down and we can have a modifier to this box so we can say modifier and we can say modifier dot you know and we can have this fil Max fck and then we can again have a DOT and we can have this height and then this height can be of 8 DP and then we can have uh this padding and then we can give a padding at two of 8. TP okay now we can have a clickable text inside this we can say clickable text and in this text we'll be having a text right so we can have this Eno we can have this annoted string and in this annoted string we'll be having this build annoted string and in this SP annoted string what we can do we can have you know we can come down and in this we can simply say with style we can have something like style and in this style we can say span style and in this we can have a color and in this color we can simply say color dot blue and over here what we can do we can you know come to this color do blue and after this what we can have we can basically have this and we can say app and we can say if is sign in then we can have something like don't have uh account don't have an account we can see don't have don't have an account so if you don't have an account we can say sign up else we can say already already ready have an account we can say R in okay so we are done with this now the next thing which we have to do is we have to focus on this on click so we can come down and what we have to do we have to convert this to string so we can say dot to Str and this on click what we have to do we have to come down so we can have an enter and then we have to Define on click so if it is Click we can say my error message equals null okay now the next thing will be we have a email it will be also nothing for now now the next thing will be to have this password will be also empty then there will be S sign L and it will be not this sign why what are we doing okay so whenever this button will be clicked what we are doing we are basically removing the email and password which was you know inputed by the user in the signin so suppose we are in the signin screen and user has provided the email and password now if we are basically clicking on this text what we'll be doing you'll be basically changing this you know just remember to uh not sign in okay so we are basically saying that you are not now in the sign in which will basically recompose everything and now we'll be having that signup screen where we'll be having this you know this text uh text field for the name and we can say for the first name and for the last name which we were having down over here so wait a second see this first name and this last name so we have this you know this if for this which is basically saying that it will only be shown when we are not in the signin screen right so coming down when we are basically saying that we are not in the sign in then that thing will be recomposed and uh uh when doing that recompose before that we are basically you know updating the email and password to none so we are removing anything which was basically entered by the user and we are setting this error message to null the reason is that suppose the user have inputed a wrong credential in the sign page okay now he'll be getting that this account doesn't exist or we can say this you know this user email or password is invalid then he will be basically jumping to the sign up screen by clicking on this below text button now after that we want this error message to be gone right for this we are basically making this error message equals null okay now the next thing which we have to do we have to have a modifier over here so we'll be having this modifier just over here uh so we can say no we can have a comma down over here and we can say modifier and we can have this modifier and we can you know have this align and the alignment I want is Center okay so we can say alignment. Center so we want everything this text to be aligned in the center okay now we are done with this now the next thing which we have to do is we have to come down and we have to have a function to handle the sign in errors so we can come down and we can say private F and we can say on signed or we can say on sign in error so we can use this if you want but for now we are not using this but I have I am already writing this so we can you know use this in our future references so we can say error now we can have this error error message and on this n error message we can simply say string and over here we can simply come down and over here we can simply say print Ln uh so we'll basically having this print uh it will be basically B and then we can have this sign in error so we can say sign in error so you can have any text over and after this sign in error we're basically know using the string uh template we can say error message okay so any error message if there was it will be basically shown in the you know the basically console we can say okay now the next thing will be to design our main screen and it will be also a little bit lengthy but after that we'll be having our sign in and sign up and we'll will be having everything ready so now let us focus on that part the main screen part okay so for the main screen we'll be requiring another composable and in this composable we can simply save one main screen and in this main screen will be basically having a user now this user will be basically the Firebase user and then the next thing which will be on we can say on sign out the reason is very simple right because in the main screen we'll be having the sign out button so we are basically having the Lambda call function for that and we can simply say unit okay and in this unit uh after this what we can have we can basically have a user profile uh remember State uh okay so for this we can simply say user profile okay so we can say user profile equals remember so it will be remember and then here we can basically have a mutable stateof we can set and this state of you know it will be basically uh user null stateof so over here we can simply say uh user and it can be uh null okay so we can simply add this and then we can you over here we can simply say that we want another okay this user H will be capital okay now we are done with this now let us focus on the next thing let us see what is the error which we are getting over here we think saying import class user okay and there is nothing else okay now let us focus on the next thing now we have to fetch the user profile from the fire store for this you know what we can say we can simply say launch effect and in this launch def you know we can have something like user and we'll be saying user. uid and over here what we can say we can say Val you know fire store and in this fire store we can simply say Firebase it will be Firebase fire Base fire store do you can say get the instance okay now the next thing which we'll be using is that uh it will be another Val we can say and we can say Val and then we can say user doc add okay it will basically the user document reference and then we can basically have this fire uh store again and then we can say collection and in this collection we have to you know give the collection path which will be basically users and over here we can say Get it using the document we can say Get it user using the user ID so we can say user do uid okay and we are done with this the next thing will be to have our user doc ref so we can have user doc ref we can say not get so it will be get and after this what we have to do we can say do add on success listener and in the success listener we can simply say document and in this document what we can say we can say if document dot exist then we can simply have this you know inside this which will be syn that well first name we can say equals document we are basically getting the first name and last name from you know the fire store and we are basically checking whether that particular name is even you having there so whether it is actually existing okay so we can have this first name okay and the next thing will be uh last name so we can say well last name and we can have this document Dot get string so we can say get string and the field value over here will be the last name so we can say last and we can say name okay so we are also having this now the next thing which we'll be having is basically the user profile value so we can say user profile and we can say dot value and over here what we can say we can say user and embs user will be having our first name name we'll be having our last name and we'll be basically having the you know we can say user. email and and this basically you know that if it doesn't exist then we can simply say that you know have a uh what we say we say a empty string okay now the next thing will be to have a else over here so we can have this else and this can be used to handle the case where the document doesn't exist for now I am not focusing on this so if you if you want to you can do that now we'll be having you know another listener which will be basically one failure listener we can say one failure listener and in this failure listener what we can do we can you know we can use this it block if you want to but for now we are not have you know wanting to implement this but it can be you know useful for handling the failures okay now we are done with this now the next thing which we'll be requiring is that we'll be requiring the values over here we can come down after this particular launch effect and we can have the remaining thing so the remaining thing will be that will be using a column so we can say column and in this column will be basically having few of the things like the modifier we can say modifier equals modifier we can say modifier dot know filmax size you can say and then the next thing which we'll be using is that we'll be using a padding and the padding I will be giving it to you know a 16 DP now the next thing which we have to do is Define the horizontal you know alignment and the vertical arrangement for this we can say horizontal alignment and it will be basically alignment do Center horizontally now the next thing will be that vertical Arrangement and it will be also Arrangement do Center okay now the next thing which will be requiring is will be requiring this that uh the user profile so we can say user profile and here in this user profile do value we can simply you know say uh net and over here what we can say we can simply say text and in this text we can have velcome so we can say welcome and in this welcome what we can say we can say something like this so we'll be having it dot first name okay so it will be of this. first name and the next thing which will be having is you know the last name so we can say uh it okay so it will be it dot last name okay and then we'll be hand the normal thing CL okay so we are done with this we have to remove this one over here okay so now what we are basically having that it doesn't know that this first name last name so we'll be doing that you know hold hold on now the next thing which will be requiring as a spacer so we can say spacer and the spacer will basically you know uh we'll be giving a height so we can say modifier do height and this height will be of 16. DP and the next thing which will be requiring is a button uh this button will be basically the sign out button so we can simply come down and you know we'll be having this on click so we can simply say if it is then you can say on on sign out okay so if it is that you want to sign out else what we can do so else what we can do is that we can come down and uh there will be few more things like the modifier so we can have this modifier now uh you know we are basically having few of the things like filmax lid we can say and then we can also have the height let us Define the height to be of 60 DP so we are also done with this now we'll be having the text over here so we can say text then this text we can simply say sign out okay so we are done with this and there are few more things like the sign in function and the sign of function which will be the main thing you know where we'll be implementing everything now the next thing will be that we require a data class so we be creating the data class directly we can say data class and uh the data class will be of user and in in this user what we can do we can have F first name and we can say first name is of string okay so we can have another one we can say F last n and we can say string also and there will be one more thing and the the thing will be that weire have email we can say email it will be basically string let us see what we are getting it is saying add geta okay so what we can do you know we don't need this geta for now we'll be looking into the remaining things it is saying data class must have at least one primary Constructor parameter okay so we'll be focusing on this uh don't forry for now okay now let us jump into the next part and the next part uh was that we have to focus on the you know signing part for this what we can do we can come down and then we can say private fun and we can say we can say sign in and in this sign in what we will be doing we will be basically having this o Fire based or and then we'll be basically having this email as our string and the next thing which will be having is that okay wait a second we are writing it on the wrong place okay okay so we have to also add the function body let us add that part and let us focus on the remaining part so we are having this password so the password will be also of typ string and then we'll be having on sign in and it will be just this and then it'll be all having this on sign on sign L eror and in this error you be having this you know this string can say and it will be also unit now what is this you know this is basically a call back function for the signin error which we'll be using okay now let us focus on the remaining part and remove this extra space we can come down and then we can simply say or DOT sign in we can say sign in with email and password and here we can basically pass the email and then we can basically pass the password so now using this we will be basically able to sign in now we have to you know add a listener to understand whether the sign in was successful or not for this we can simply come down and we can say dot add on on and it will be complete listener and in this listener what we can do we can come here and we will be having a task we can see so this it is basically task so we can have this task and over here we can simply say if task we can say if task dot is successful we can use and then we can say if it is successful then you know we'll be having this body and here we can simply say well user equals or do current user and after this what we can say say we can say on signed in and we'll be say this user okay now let us focus on the else part so what if there is you know uh error so we can simply come down and we can simply say on sign in error and we can simply pass a string should be basically invalid email or password so don't worry about this arrows we'll be fixing all of that okay so for now what we are getting we are saying that you know we required a Firebase or but found a Firebase user so on signed in so it will be basically a user we can fix it say user okay it is fixed now focus on uh let us focus on the next part and the next part will be basically on the sign up and after that we'll be able to you know sign in and sign up okay so let us focus on that for this we'll be also having a private uh hello function so it will be basically prominate one sign H and in this sign up you'll be having this or so it will be or and in this or will be basically having a Firebase or we can say Firebase or and in this Firebase or we can simply say email and this email will be a string and then what we'll be having uh so we have to also Define this function body firstly and the next thing will be a password and it will be a string now the next thing will be first name we can say first mean and it will be also a type of string so you can say link and then we'll be having this last name you know and it will be also a string can say and the next thing which we'll be having is basically on signed in and we can say Firebase user unit okay so we are also done with this now let us focus on the next part which will be or dot create user you can say create user with email Emil and password and here we have to pass the email and password so this is the simple thing okay so you simply you know uh call this create user with email and password using this Au instance and pass email and password and hence you have been signed up just the one more thing is that you have to add that on compete okay so we can say add on completely s you can say and over here we be seeing this task and we can come down and now we say if task taught is successful then we can come down and we can say that the user is basically our o do current user and then the next part will be that we have to create the user profile so we can store his first name last name all of that credent ship okay so we can come down we'll be saying that create uh user profile in fire store okay and then we can simply say valid user profile and in this user profile we can simply say uh you know we can use a hashmap so we can say hashm off and in this hashm we can you know Define the type but we don't require that we can have first name you can say first name to first name so we have to do this uh for last name also so we can change this to last name so this is the label on the left hand side and uh the right hand side is the value which will be you know uh inserted for that particular label and the next thing which we will be requiring is we are also required a comma over here and a comma and the next thing will be email then we can say to email okay so we are also done with this we have created the user profile now let us you know do one more thing that is Val fire store and we can say Firebase fire store and then we can say get the instance of that fire store and then we can simply say fire store dot we can say collection we have to define the path the path will be basically users and here what we can say we can say dot dot document and in the document we can say shoer you know and we can say shoe ID and here uh what we can say is we can say uh we can say do set here we have to set the user profile and over here the next thing will be to add a you know listener whether it was successful or not so we can say on success or success listener and in this listener we can simply say on signed in and we can pass this user okay and the next thing which we be requiring is that we have to also Define the you know failure listeners so we can say add failure listener and in this failure listener we can basically handle you know all the exception for the failure and then we can come down over here uh which will be this s and over here we can handle the sign of failures we can simply say else know we can simply say handle sign of failure okay so we are also done with this now we are almost ready with our code and we have to just focus on the errors which we are getting we try to fix all of that so you know we are not left with anything okay so what I have done I have fixed all the errors so you don't have to waste your previous time watching me fixing the errors so let us see the final code over here we were basically having this main activity glass which was inheriting from this component activity after this we basically have this o inst of this Firebase after this we back actually called this app content from the set content okay and we have passed the authentication which was basically the Firebase or now we have this remember State variable which was basically being used to recall whether this we have to show this splash screen or not we are having this launch effect to delay the effect by 2 second after this we have this Crossfade effect you know for the transition effect between the state now after this we were having this splash screen function in the splash screen function we were having this you know Lambda after this we were having this rotation State remember for remembering the rotation effect state after this we were having this launch effect to delay the time uh so we can see that particular you know uh rotation effect after this we were having this navigate to or or main screen as soon as we were able to show that effect after this this was the rotation effect animation here now after this we are having this splash screen UI uh with transitions after this we have this box and this box was basically you know having an image this image was the image which we was showing and we have you know replaced the image uh from the previous one so if we come down over here now we are having this back image and Logo so this logo was the image which was basically being shown on you know this splash screen after this if you come to this Au or main screen you'll be finding this user now this user was basically the you know we can say the current user now after this we were checking if the the user uh doesn't exist if it doesn't exist we're navigating it to sign in else we will be navigating it to the main screen where uh it will be having a call back function of the sign out after this we are having this spot screen if we having this remember State variables for remembering the email password first name last name is loading is sign in is password visible My error message after this we were having this you know uh thing for uh loading the resource for the background image and we have this box inside this box we were having this image which was set in the background after this we were having this card and in this card we were basically having all that you know text F now this text field like first name last name will be only shown if the user is not sign in else it will not be shown after this we were having this email text field first we were having a spacer and then we were having this email text field now you know uh the visual transformation was none then we were having this password text field and here we were having a spacer then we were having the text field now after this uh you know we were basically having the icons like the trailing icon you know the leading icon and all of that after this we were having this error message now after this we were having this button which was basically the sign in sign up button which will toggle itself automatically after this we are having this you know text which was basically shown on the button so if the it is signed in then we were showing sign in else we were showing sign up now we were having this clickable text for this we were having basically a box and a clickable text inside this box now it was also getting toggled uh if we were in the signing screen this message will be shown else this particular message will be shown after this we were having this on click and we were basically toggling uh the signning to not sign in now the main thing over here was this we were you know uh replacing the email and the password which were inputed by the user we are also replacing the error message with a null after this this was the function to handle sign in errors now we having this main composable you know main screen composable where we were basically fetching the user profile from the file store after this we get this doc reference if document exist we are basically having the first name last name and then we were basically showing them after this we were having this column and showing that particular first name and last name using this string template after this we are having a spacer and the button for the sign out and the sign out was called earlier as we seen now we are having this sign in this is the main thing that we are having this you know Firebase or instance this email pass password and this on sign in and on signin error so on sign in basically we are passing the Firebase user okay now using this we were signing in then we were having an listener to listen whether the uh you know the operation was successful or not if it was then we were updating the user uh with the current user else we were handling this know signin failure now the next thing was the sign up using which we are basically signing up we are having this o create sign user with email and password we we are passing this email and password and after this we are having this on complete listener if it was completed only and only then we were basically you know creating the user profile using the hashmap after this we are basically passing the values to the fir store and we are also listening to that whether the data we written or not after this we were having this preview function and then we are basically having this data class user now if you run this code so it has been installed successfully now it is loading you can see this code looking animation and we are now loaded with our project now if we come to this sign up and let us suppose the you know insert any name like coding and then we can come to this and we can say Hub and now we can have this email we can simply say something like you know uh like deep learning I don't have this gmail.com and then we can have anything like 1 2 3 4 5 6 7 89 and if we go back and if we try to sign up see if we are able to you know sign up now one thing we can come to this part and if we you know see this we were able to you know sign up the user we can see this email first name last name everything being stored over here we can also come to this authentication part so this uh when we came to this fire fire St we are able to see that now we can also see this deep learning uh this mail so this user ID everything was done now the next thing which we have to do we have to check whether the auto sign in is working or not but this we can you know restart the application or we can say the app if we do so because the user was already sign in we were getting this welcome sign uh welcome coding Hub now if you sign out let us to skip anything like we can say de learning so we can use this and the password was 1 2 3 4 5 6 7 8 and if we try to sign in see because the password was having bline and we only give till 8 it shows us invalid email or password if we give this nine we will try to sign in again see the user was able to sign in so this was the basic application which we created throughout the process we were able to understand how sign up sign in basically Works in Firebase and we were also able to see how we can store information of the users like his first name your last name email phone numbers all of that in festone with this we were also able to know how we can basically you know create that cool looking we can say the splash screen and for this video we have covered a lot of things it will take you some time to understand all of the basics but believe me after you know coding this for one to two time try to also code it by yourself it might take some time okay but it will basically help you to get a much deeper understanding about the topic we might have you know done much better code we might have you know created all of this sign up signin screens in different cotlin files which would make it it much easier but it would have also made it it much more time consuming so I have tried to keep it in much you know much lesser time so in this video what I have discussed I have discussed how do you basically use Firebase authentication how you can store values in fire store how you can navigate using a splash screen how can you animate your splash screen till then subscribe to the channel hit the Bell icon and never miss any update from [Music] us [Music]

Channel: Coding Hub

Views: 1,933

Keywords: coding hub

Id: 6AZCGPtHc5g

Length: 95min 57sec (5757 seconds)

Published: Thu Jan 18 2024