React, Redux & Firebase App Tutorial #23 - Logging Users In

alright then gang so we want to know how to log a user into our application so currently on the signing component if we add an email and password and press login it's going to log that information that you mail in the password to the console over here but what we want to do is we want to take that email and password and sign a user in using them okay now it's a sign that user in we're going to have to make some kind of asynchronous requests to our firebase project to sign them in and if we're making an asynchronous request where did we do that well we can do it inside our action creators so let's make an action creator for sign it so over in the code inside actions let's create a new file and that new file will be called off actions jas okay so inside here will export a new constant and that is going to be called sign-in so this is our action creator and inside here we'll take the credentials and the credentials are just going to be the email and password what we're going to sign in with okay so now because of thunk we can halt the dispatch process and return a function instead we take the dispatch as a parameter we also take get States and we take a third object remember which we can D structure from and use get firebase inside to communicate with our firebase project and we're going to use this to sign the user in okay so inside this function what we like to do first is initialize our firebase instance so what's a Const firebase equals get firebase so this will give us this firebase instance so we can use it to communicate with our project and Sammy use it in now the way we do that is pretty simple all we say is firebase dots off and that is a function then we use a method called sign in with email and password now I always spell this incorrectly because it's so long but that looks pretty good okay and then we need to pass in the email and password into these parentheses so the email is going to be stored on the credentials because we're going to pass that in so that would be credentials dots email and we've not passed these in yet but if not called this action creator but we will do in a couple of minutes anyway we need the password as the second parameter and that will be stored on credentials as well so credentials dot password so now we're using the firebase authentication service to sign in with an email and password and if that email and password is correct then it's going to successfully sign the user into our firebase application and it's going to give us a response now this will take some time to do and it returns a promise therefore we can use the dot then method which takes a callback function and inside this function this is where we can dispatch an action such as login success so I'll do that I'll dispatch and the type will be login success now we don't need to pass any additional data here so we're just passing the type and then underneath that we can catch if there's been any errors and same again this will take a callback function and pass the error internet callback function so this will fire if the authentication failed for example if the password is wrong or they don't exist these credentials in our firebase project we're going to receive that error then we could dispatch a different action the type of that will be login error and we can also pass in the error as the second parameter so we receive that in the reducer okay then so now we've created this action created over here and that's pretty much all there is to it so now let us handle these actions in the reducer so save that and go 2 or 3 juicer because this is the reducer for any authentication actions and we've already created the bare-bones of this over here but what we'll do now is just fill this out so inside this reducer we need to check the action type and again we'll use a switch statement to do that so we'll take in the action type to evaluate and then inside for the case where its login error we'll do that first then what we're going to do is return the state now we could just return the state and nothing happens but what I'd like to do is return some kind of authentication error on our earth object on the state now that remember this earth reducer inside the reducer is associated with this auth property so whatever we attach to the state inside this reducer that is going to get populated on the auth property there not only firebase off but in our own custom earth property does that make sense so what I'd like to do is attach some kind of error some auth error to that earth property so I'm not going to just return the normal state I'm going to return dot dot state which will take whatever is up here currently and spread them so we don't override them then I'm going to add on the auth error so I'll make a property called off error and that is going to be equal to login failed now if we wanted to we could use the error attached to the action because we sent that over here but for now I don't want to do that I just want to assign it a generic error such as login failed that will do for now so in here will create that property so auth error and to begin with it's gonna be null because we've not tried to login you but then if we do get a login error action then it's gonna update the state so the auth error is now logging failed okay alright so now we have the case of login success so let's just scoot this in first of all then underneath we'll say case and this case is going to be a login success like so and underneath what I'll do is I'll first of all console dot log login success so we know this is word and I'll do the same thing for the error in fact so let's paste that just above the return statement like so and we'll change this to error just so we can see in the console what's happening as well okay so after that what we'd like to do here is make the auth error null again because it's been a success there shouldn't be an error anymore so let's return this object and we'll spread the state so we don't offer add anything which we may add later on and then we'll say the off error is gonna be not again we don't have one anymore because we've logged in successfully all right now remember at the end of a switch statement we need our default case just in case none of these matched okay so let's say the default case is just going to return the state as is and then what we can do is get rid of this final return at the bottom because it will never be reached all right then so that's the reducers sorted the only thing left we have to do is call this action creates a sign in from our component so then let's go to our signing component that's under earth and sign in so currently when we input to the form and then click Submit what it's doing is preventing the default action then just logging the state to the console we no longer just want to do this instead we once you actually sign the user up so to begin with we have to map some dispatch to props so that we have access to the signing method so let's do that so to do it we need to import connect at the top first of all so we can connect to redux and that is going to be from react - redux but we also want to import this action creator right here signing so let's now import sign-in and that's going to be from and it's doc Doc's come out of this folder then dot again it's come out of the components folder then it's a store then into actions and then we want the all actions okay so we've imported that as well now let's connect this component to redux at the bottom so down here we'll say connect like so and then surround silent all right so now we need our map dispatch to props so that we can make a dispatch from this component and call this action creator so let us say Const and then map dispatch to props and then this is going to be a function where we take in the dispatch and inside the function we return an object which represents what we want to attach to the props of this component now we want to attach the signing method that is going to be a function and it's going to take in some credentials so just Koretz and then that in turn is going to dispatch an action creator and that action creator which is what we import it at the top up here sign in so we pass the crits in there as well I remember we received those credentials right here they don't have to be the same name but these credentials are going to match to what we have a pass in here so now we've done that we need to pass this in to connect so let's pass in null for the first parameter first of all because that would be map state to props and then for the second parameter map dispatch the props alright then so now up here we can access the sign-in method from our prop so let's try that let's go to the handle submit and instead of logging this to the console instead let us call this dot props doats sign in and we'll pass in this state because that will be the credentials the email and the password makes sense okay so let's save this and view it in a browser now over here if we try to sign it with that dummy account that we created a minute ago and remember that's in your authentication tab so we can see test at the nettinger code at UK and the password was test one two three four let's paste that in here and say test one two three first of all that's not correct let's see what happens login and we get a login error remember over here in the reducer if it's an error we'll logging that to the console and what we've done is we've returned this on the state this earth error so I'll tell you what why don't we inside this component over here sign in why that we map the state to props so that we get that earth era back so to do that lets do another constant over here Const map state to props set that equal to a function and inside here we get access to that state and inside the function let's return that object we want to attach an auth error property to our props and that will be equal to state dot dot auth error and the reason it's state dot off the auth error is because first of all in the root reducer is stored on the auth property because we're using the Arth reducer so that's why we say state the auth to begin with then in the earth reducer the property is called auth error which is why it's auth error right here so now we're mapping this to our props let's pass it in as the first parameter down here so we should be able to access the auth error now inside our component inside the props so why not why don't we output this at the bottom of the form if there is an error so beneath the button let's do another div and let's give this red text so red - text and then also a class of center now then inside this div we want to check is there an auth error first of all well let's do a bit of D structuring to get that author up here inside the render method I'm just going to say Const and then auth error is equal to this dot props remember we're just D structuring the auth error property from the props racket so now we can check if this actually exists or if it's null so in curly braces since what outputs some kind of dynamic content here we say oath error and then question mark will do an eternal operator so this is going to evaluate to true or false if a value exists such as a string like logging failed then this is true we do have an auth error if it's null when there's no or therer then it's false and we don't have a North error now then if it's true and we do have an error we want to output that error so let's do a PTAC and then inside will output off error like so does that make sense and then : for the false case if we don't have an error we'll just return null and so nothing is output so let's save this now view this in a browser and now if we try to sign up again let's use test the net ninja code at UK and test one two three not one two three four as it should be one two three login now we get that error over here to say login failed but if we change this to one two three four and then login then we should see that disappeared because the o'the error should have gone to null and we also see login success over here all right so in our reducer when a login success occurs we lock this to the console and we set the auth error to null which is why we don't see it over here anymore so now we can see over here that our authentication status if we look at the firebase property and remember we get this because we logged it out inside the nav bar the authentication so let's have a look at the firebase and now in the earth property we can see who is logged in the API key the email of the logged in person when they were last logged in this is a timestamp the UID of the user etc so now we're successfully logged into the application