All language subtitles for 010 Logging the user in after Signup_en

In this lecture, we're going to log the user in after they've registered.

The registration is taken care of in the register form component.

In the register function, we're using the create user with email and password function to create the

user.

It's also authenticating the user if their account was successfully created, the response from the

function will be the user's credentials.

We're storing the returned value in a variable called user credentials.

We don't need to do anything with the variable.

In the previous lecture, I discussed how we'd need to store the token returned by the authentication

functions.

Luckily, since we're using the SDK that's taken care of for us, Firebase will store the token on our

behalf.

In addition, it'll send the token if it's available to any service that needs it.

This includes Fire Store.

Below this, we're making the request to the database to insert the form data.

We recently changed the rules to restrict writing permissions to authenticated users.

The Firebase SDK will send the token along with this request.

The code will continue to work as it did before.

Let's try testing that out in the Firebase console.

Navigate to the authentication section.

We're going to delete the user we've already registered.

This is so we can start fresh all the way to the right click on the dropdown button.

Delete the user from the app.

Next navigate to the database.

We're not going to delete the collection.

We want to delete the document.

Documents can be deleted on the right column at the top right corner.

Click the dropdown to delete the document.

We're ready to test the registration.

Open the app in the browser.

Try registering a new account.

We can't successfully create an account.

We didn't have to modify the code because Firebase sends the token to the database on our behalf.

This process is the most significant benefit of using the Firebase SDK.

It'll store the token and send it for us.

There is one important point I want to make clear.

Back in the register function, we're registering the user in the authentication service before we insert

them into the database.

We must perform these sequences of actions in this order.

The token will not be available until the user is authenticated with the authentication service.

If we were to swamp the order, Firebase would throw an error because the user does not have permission

to write to the database.

We're going to make one more modification to the register function, even though Firebase is keeping

track of everything for us.

We will store a boolean value in the state to keep track of if the user is logged in.

Let's look at our app in the browser for a moment.

If we were to look at the navigation menu, we have a link for logging in.

However, if the user is already logged in, then we'll want to change this to say log out.

We can toggle the links by keeping track of the user's current authenticated state in the store.

Switch over to your editor in the store directory.

Create a new file called User JS.

For this demonstration, we're going to create a new store for users.

It's completely possible to create a single store.

However, it's common practice to organize the state into separate stores for better management.

In this file, import the define store function from the penny package.

Next export this function from the default namespace.

The ID of the store will be called user.

Passing in an object in this object, define these state function.

Lastly at a state property called user logged in with an initial value of false.

The next step is to toggle this property after the user successfully registers and accounts back in

the register form component.

We're going to update the register function.

First, the store needs to be imported and registered with the components at the top of the script block.

Import the map writable state.

Function from the Linea package.

We're going to update the state of the component.

Therefore we are importing the writable function to allow us to do so.

Next import the user store with the following name.

Use User Store.

We've got everything.

We need time to register the state inside the components exported object.

Add the computed object.

Within this object called the map writable state function with the spread operator.

Pass in the use user store variable as the first argument.

The second argument is an array of state properties to map the components and the user logged in state

property.

It's time to update this property.

The state should be updated after the user has been registered.

I'm going to update this property before updating the alert message set the user logged in property

to true.

As simple as that, we've authenticated the user into our application.

Firebase handles most of the complexities on our side.

We just need to keep track of the user's authentication status with a boolean value.

Let's give this a test.

Open the Firebase console.

Delete any users in the authentication service or users collection.

We want to start fresh one more time, then try filling out the registration form in the app and submit

it.

We will receive a success message.

Great.

We are successfully keeping track of the user's current authenticated status in the state.