Welcome back. Today we're going to be talking about how
to log in the actual users that we're registering.
So what I want to do for that is create a new function that is going to be using
Firebase for logging user in using their email and password.
So let's export const here and let's call it login user.
And this is going to be an asynchronous call taking in the email and password
that the user entered and then we're going to be using the try catch to make sure
that we get errors just in case we have any.
And if we get an error we're just going to say that success state is set to false
and actually let's make it a status and then let's say that error is going
to contain error message that comes back with the firebase.
Otherwise what we're going to do is get the response from the firebase and we're
going to await for its response and we're going to say auth
sign in with email and password and we're going to give it the email that user
entered and we're going to give it the password that user entered.
And then what we're going to do is get the token because we're going to need it
to make sure that we let the user stay logged in after they quit the app.
So let's get token using response user
get id token.
And then we want to return
an object saying that status was true and that our data is an object containing
display name of the user, which we can get from the response user display name.
And that we want to know what their email address is when they're logged in.
So let's use response user email and here
we're just going to place the token as well.
Great. Now that we have that,
we're going to use the login user function on our login screen.
So let's go here we have email and password states.
Let's make sure that we use our button with is disabled just in case email
length is less than five or length is less than eight.
This should match our requirements here.
And now that we have that we will see that our logging button is disabled
because user hasn't entered anything here and we want some error handling on this
page as well just in case we get any errors.
So let's just copy this and paste it
in our login's styles and we can also grab
the error state from here and we are going to place it right above
our button and let's create the error state.
I'm going to copy this and paste it here and just say error set error.
Great.
And now we are ready to log in the users.
So what I'm going to do for that is create an account.
I'm going to say that my first and last name is Nata VAcheishvili
and I'm going to say that my email address is nata3@vacheishvili.com.
And then my password is going to be numbers from one to nine.
So let's click registration.
And now I'm going to be redirected back to the login page.
Now that we have that,
what we're going to do is make sure that on press of a button we call
the Login user function and we give it the email and password field and this
should be an asynchronous function that we await.
And let's make sure that if we get any errors with that, we handle this.
So let's get User and then what we want
to do is if user status is false,
we want to set error to the user message.
I think that's how we set it up.
Let's make sure, okay, it's called error, so let's set it like this.
Otherwise we are going to set the error
to an empty string just in case it contained an error before.
And then if everything goes well, we want to navigate the user to the home page.
So let's say navigation, navigate routes home.
Let's make sure that this function is imported and I will enter some incorrect
stuff here to get our error handling and see how it works.
So I'm going to click Login now and it says auth wrong password.
The password is invalid or the user does not have a password.
And this is a good message but it contains
this here and we don't really want to show that.
So let's go here and say if error
code equals auth wrong password,
we want to have a custom message saying that please enter a correct
password and then let's save this and let's make sure that we return status
false error here and say something went wrong and let's console log.
What would be the case for entering an email address that doesn't exist?
Let's say I entered this email address.
Now let's open our terminal, try to log in and it says auth user not found.
So let's copy this and say here that user was not found.
The email you entered does not exist.
Please create a new account.
Let's save this.
And now we get the message saying that the email you entered does not exist.
Please create a new account.
And now I'm actually going to log in correctly and let's click Login.
And now we're redirected to our homepage.
So this is all for logging in
in and in the next video we're going to be discussing the authenticated and not
authenticated flow to make sure that user doesn't have access to the screens
that they shouldn't have access to when they're not logged in.
Thanks so much for watching and I'll see you in the next video.