Original subtitles

Let's improve the feedback

we show to the user.

And I will start by showing up a proper error message

if we have an error.

Because it is convenient that Firebase

gives us a nice error message actually,

for example, if the password is too short,

I just wanna output that error message to the user

or show some kind of error message to the user,

no matter if it's this specific message or my own message.

So what I wanna do here is I wanna get that message

Firebase is sending back, and for this,

we need to drill into this data object here

and we see that it will have an error key

which then holds another nested object

which has a message key with the actual text message.

So for this here, we can get the error message

by drilling into data.error.message.

Of course, you might wanna add some checks here

to ensure that you really have an error property

and that distant is an object with a message property.

And that in case that's not the case,

you set error message to something else.

So let's maybe do that as well.

Let's define our error message variable here

where we say authentication failed

as a generic error message.

But then we check if we do have data

and data has an error property and that's truthy,

and that then in turn has a message property,

which is truthy, if that's all the case

I'll set error message to this more specific message.

And if that's not mat, if we don't have this error object

or it's undefined or message is undefined

we don't set our error message like this.

And then there after we could set some state

and shows them modal, but here I'll keep it simple,

and I'll just use the built an alert function

which we can use in the browser to show this built in alert

which all browsers support

and show the error message with that.

And if I do this and I now enter an invalid password

for a new email address, I get this alert.

If I try to set or create a user for an email

that does already exist, I get this email exists message.

Now of course we can argue if that's really the kind

of message we wanna show to our users

and dear friend's of course up to you

to kind of parse this message and look into it

and look for identifiers like email exists,

or weak password to then show

your own custom error messages.

Or you simply always show authentication failed.

And that's what I will fall back to here

but I showed you this alternative

so that you know, all the possible options.

Now I will just always show authentication failed instead.

We also might wanna show some loading state

whilst the request is on its way.

And for this, we can actually manage extra piece

of state here which initially is false

because that is loading state

and set is loading is the state updating function.

And I wanna start this loading state,

I wanna set it to true if we are starting to send a request,

which you can do right before we make it into this,

if else block because I will also soon send the request

in the if case, and that here I wanna set is loading to true

to start loading.

And once we got a response, so here,

no matter if it's an error or not,

I wanna set is loading to false.

Now we can use this loading state down here

to only show this button, this create account button here,

if we are not loading.

So I'll check if not is loading

in which case I'll show this button.

If we are loading, we can show a loading spinner

or here I'll simply show a paragraph

where I say loading or sending request

or something like this.

And with that, if I switched to creating a user

and I then try to send this request,

we briefly saw sending requests down there

actually with some black text color

of course we can change the styling

to make that white for example, in auth for module

in this auth class selector, by setting color to white here,

the text color to white.

And now with that, we see sending requests in white there.

That's something we could do.

Now that's some basic feedback which we're providing

to the user, of course you can change this,

you can make that more elaborate,

but that's how we can provide some basic user feedback here.

Now however, let's also implement user log in

so that we can log in if we already created the user

and let's make sure that we then step by step

also changed this application and the user interface

once a user is logged in.