All language subtitles for 016 Setting up the Login_en

We're finished with the registration form.

The next thing to tackle is the login form.

A lot of what we'll be doing is the same as before.

Unlike last time, I won't draw this out into about a dozen lectures.

We'll fly right by this.

We'll start by opening the login form component.

As you may recall, we separated the forms into separate components for easier management.

In the previous section we've taken care of validating the login form.

The next thing to take care of is to send the login data to Firebase.

The logic for performing a login will be outsourced into an action.

From this component, we are going to run the action function.

Let's prepare the component before defining the action function at the top of the script.

BLOCK.

Import the map.

Actions function from the package.

Next import the user store with a name called Use User Store.

Let's map a function called authenticate.

This function doesn't exist, but that's perfectly fine.

We're just trying to prepare the component.

After preparing the components, we'll define this function inside the methods object.

Run the map.

Actions function with the spread operator.

Passing the user store.

Lastly in an array, add the authenticate function.

We can call this function from within the login method.

After updating the alert message, let's call the this dot authenticate function with the values argument.

The values argument is where we're keeping the email and password input values.

This argument is provided by the V form component when the form is submitted.

One last thing.

We'll add the await keyword before dispatching the action.

The action we're going to write.

We'll have a synchronous code.

We want to wait until the action is complete.

Make sure the async keyword is added before the name of the function, just in case we're going to wrap

the dispatch with a try and catch block.

If an error occurs, we'll want to handle it.

Inside the catch statement, we're going to update the login and submission data property to false.

Will update the login alert variant property to BG Read 500.

Lastly, we're going to update the log and alert message property to the following message.

Invalid Login Details.

Be sure to return the function to stop the function from further execution.

We won't need to make any more changes to the login form component.

We'll next move on to the store file to define the action inside the actions object.

Define the authenticate function.

Since we'll be making an asynchronous request to Firebase, the function should have the async keyword

before it.

We are being passed down data from the component.

We'll want to accept it.

Add the values argument to the function.

The function will be straightforward.

There are two tasks will perform.

First, we'll send a request to Firebase with the payload data.

If the request is a success, we'll want to commit a mutation to log the user in the state inside the

action.

Call the function off.

Sign in with email and password.

I'm introducing a new function.

It comes with the authentication object.

We import it.

It'll assign the user into the application with their email and password.

It has two arguments the email and password.

These exist within the payload.

We'll set the arguments to their respective payload values.

This request is asynchronous.

We'll need to add the await keyword before calling the function.

If the function successfully authenticates the user, we can toggle the user logged in state property

to true.

Otherwise the function would throw an error.

The next line of code would never run.

We are done.

We don't have to wrap the asynchronous function with a tri catch block because it'll throw an error.

If the authentication was unsuccessful, errors will stop the function from executing further.

Let's try giving things 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.

In addition, we should check the mutation log.

The action did not commit the mutation because the request threw an error.

Even though we didn't return the function ourselves, the error stopped the function from executing

further.

Now let's try logging in with valid credentials.

We will receive a success message.

If I were to refresh the page, we'd continue to be logged in because Firebase stores the token.

It will take care of verifying if the user is logged in afterward.

That's great.

We've successfully created a login and registration form.

After confirming everything, patting yourself on the back.

We've had to do a lot to get this working.

I know we flew right by this pretty quickly, but this shouldn't be anything new.

Almost everything was the same except for the function for assigning 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'd like to learn more about it.