All language subtitles for 007 Adding User Login_en

So let's work on logging the user in.

Now, for this I'll keep this signup code

the way it is for the moment

and work on this if part here.

And here we now wanna send

a different HTTP request to a different URL.

To be precise if we have a look at the Firebase

of the rest API documentation,

we now wanna send a request to this sign in

with email and password URL, so this URL here.

And it's still a post request with JSON data,

and the JSON data we do add

actually has the same format as for signing up.

It's just a different URL to which we sent the request

and therefore different things will happen.

Now, since we do have these similarities,

we can share some code though.

Because we'll basically send the request in the same way,

it's just the URL that's different.

And since this is very similar

I'll work with a helper variable, a URL variable,

which we set to the log in URL here,

which I copy and paste it in the login case,

and which we set to this sign up URL here,

in the sign up case.

And for the log in URL,

we also need to add that API key

which we can copy from the sign up URL,

and then use the log in URL as well, like this.

So now I'm just changing the URL.

And we can now grab all that fetch code

and to then block there after and cut that

and move that out of this if else statement

and do that thereafter.

Because again we execute the same logic,

we send this request

and we handle this request in the same way,

at least we can handle it in the same way.

The only thing that differs is the URL.

And therefore I'll remove this hard coded URL

in this fetch function

and use this URL variable instead

which we set before.

And then we send the post request with that data,

which is the same data for logging in,

and signing up as we saw in the documentation.

And we then, well do log in or sign up.

Now we just also wanna handle the success case differently.

Because if logging in succeeds,

we get back a response with this kind of data,

and you see that we get the user email again,

which we logged in and that we also get this ID token.

And that's this authentication token we're interested in

which we then will need in the future

to attach it to our requests to protected resources.

And we also can of course use this ID token

on the front end, in the react app

to use it as proof that this user is logged in

because we only get this token

if a valid email password combination is sent to Firebase.

We can ignore the other data for now.

And we get the same response payload in the end

for signing up.

It's not exactly the same,

but we also get an ID token there.

And that's why we can handle their response in the same way

for both signing up and signing in.

So here if the response is okay,

I then here wanna return response json,

without a nested promise, so not as in the else case,

but just response json.

And on the upper hand here in the else case,

I now wanna throw a new error

with my error message as a message.

And then here after this overall then block,

I wanna add another then block

where I get my response data and the success case

or where I catch any errors we might have,

like the error I'm throwing here

so that I can then copy or cut this alert code

and use that here in the catch block,

to show my error message here.

So now I just restructure this to forward

the error message to this catch block

by throwing an error here,

which will cause this promise

and the other promise to be rejected.

And then we'll make it in here

and we'll make it into this then block here

if we have no error.

So here we'll end up if we have a successful request.

And for the moment I'll just console log that data then.

And with those adjustments made,

we are sharing the logic for a login and sign up

with different URL's though.

And therefore now if I go back.

Let's first of all verify that signing up still works.

If I try to sign up with an email address

that already exists,

I still get my authentication failed error here.

If I switch to log in though here,

and I then log in with let's say invalid credentials,

then I get an error.

If I do log in with valid credentials though

and I clear the console,

you'll see we get no error,

but we get this response object

which has the shape described here in your official docs.

We have a response with these pieces of data

and here you'll also find explanations

of what's in the response.

In the end what matters most to us here is the ID token,

which is this authentication token,

this long string with all that encoded data

that was generated by the Firebase server,

and that can only be verified

by the Firebase server therefore.

And now we know that if we get the this kind of response

with this ID token,

the user did provide valid credentials

because otherwise we would have gotten back an error

and therefore we cannot only use this ID token

to attach it to future requests, to protected resources

but we can also use it as proof

that this user is authenticated

and update this UI accordingly.