In this lecture, we are going to authenticate users through the login form.
We're finished with the registration form.
Users shouldn't have to register an account every time they want to log into our app.
The next thing to tackle is the log in form.
A lot of what we'll be doing is the same as before.
Unlike last time, I won't draw this process out into a dozen lectures will fly right by this solution
in your editor.
Open the log component class file.
As you may recall, we separated the forms in two separate components for easier management in the previous
section.
We've taken care of validating the log in form.
We can move on to sending the log and data to Firebase and handling their response.
First, we'll send the data to Firebase inside this class.
We have a method for handling the form submission.
We will handle the request in this method.
Requests are asynchronous.
Let's have the async keyword to the log in method.
Typically, we would outsource the request to a service.
However, the request can be handled with one line of code.
It's perfectly fine to write this logic inside the component class, replace the console log function
with a try and catch block.
Next, we should inject the service for sending me request at the top of the file import, the angular
fire off service from the angular fire off package.
In the constructor function, we will inject the angular fire off service as a private property.
The name of the property will be called off.
The authentication service will expose a method for authenticating a user into our app.
Let's give it a try.
Inside the try block of our login function, call the following function asks sign in with email and
password.
I'm introducing a new function.
It'll sign the user into the application with their email and password.
It has two arguments the email and password.
These exist within the class.
We will set the arguments to their respective values from the credentials object.
This request is asynchronous.
We'll need to add the await keyword before calling the function.
We're finished with a single function we can authenticate a user into an application before we test
our login system.
We should provide feedback to the user during this entire process.
We can reuse the alert component for the login form.
A lot of the logic will be similar to the registration form as an exercise.
Try adding the alert component to the login form.
The behavior should be the same.
It should be hidden by default after the form is submitted.
The alert component should inform the user.
They are being logged in.
If successful, render a success message.
Otherwise, render an error message.
The forms should be disabled during submission.
Pause the video and good luck.
Welcome back.
If you were successful with wiring the alert component, then congrats.
If not, that's fine as well.
Let's walk through the solution together.
First, we should create properties for controlling the behavior of the form and alert component at
the top of the class file.
We will add a property called Show Alert with an initial value of false.
This property will toggle the visibility of the alert component.
Next, we will create a property called alert message.
The initial value for this property will be the following.
Please wait.
We are logging you in.
Afterward, we will create a property called Alert Color with an initial value of blue.
Lastly, we will create a property called in submission with an initial value of false.
The end submission property will toggle the buttons disabled attributes we should disable the form if
the user has sent a request.
These properties should be updated during the form submission process.
We will toggle their values in the log in function before we initiate the request.
We should display the alert component and reset the properties.
Keep in mind, it is possible to submit the form multiple times if there are subsequent submissions.
We should reset the alert component at the top of the function.
We all set the show alert property to true.
The alert message and alert color properties will be reset to their initial values.
Lastly, we will set the in submission property to True.
We've handled the first step of the form submission process.
We need to update these properties when our response is given.
There are two possible responses.
The users login submission can be successful or end in an error.
The sign in with email function would throw an error if the authentication was a failure in the catch
block.
We should handle the response if there's an error.
First, we all set the in submission property to false.
This value should enable the form again for submission.
Next, we will set the alert message property to the following value An unexpected error occurred.
Please try again later.
Lastly, we will set the alert color property to red.
We should return the function after updating these properties.
We don't want to continue executing logic.
If you would like, you can log the error for debugging their response if you run into problems.
The last step is to handle the response, if it was a success after the try catch blocks.
We will update the alert message property to the following value success.
You are now logged in.
The alert color property will be set to green.
Awesome.
We're finished with the class.
We can wire these properties to our template.
Open the log in template file.
Above the form, we will load the app alert component.
We can toggle the components visibility with the NGF directive.
Let's add this directive to our component.
The condition will be the show alert property.
Next, we will bind the color property to the alert color of property.
Inside the component, we will write an expression, the expression will render the alert message property.
There's one last step before we can call this component complete.
We need to disable the button during submission at the bottom of the form on the button element.
We will update the condition.
Add the following or in submission.
We're finished.
Save your changes.
Let's try giving our app a test.
Before you do, I recommend clearing the site data to start with a fresh slate in the Chrome developer
tools.
Navigate to the application panel on the sidebar.
There will be an option to clear the storage.
Click on the clear site data button.
Once you've got that settled, refresh the page, then try logging in with an account that doesn't exist.
Will receive an error message if we look in the console.
An error will be logged from the request sent by the Firebase SDK.
Now, let's try logging in with valid credentials.
We will receive a success message if we were to refresh the page.
We continue to be logged in because Firebase stores the token.
Firebase can verify if the user is logged in.
That's great.
We've successfully created a log in and registration form after confirming everything pat yourself on
the back.
We've had to do a lot to get this working.
I know we flew right by this solution, but there shouldn't be anything new.
Almost everything was the same except for the function for signing the user in.
In the resource section of this lecture, I provide a link to the sign in with email and password function.
I recommend checking it out if you like to learn more about it.