All language subtitles for 005 Adding User Signup_en

So let's now get started

with adding authentication to this demo application,

which you found attached to the last lecture.

And for this, I start here in my Firebase project,

since we'll use Firebase as a dummy back end.

And there, you need to go to this authentication part,

because we will use this Firebase Auth REST API,

which I showed you a couple of minutes ago.

But in order to use it, and to send requests there,

we need to unlock authentication

in one of our Firebase projects.

And that's why I switched to one of my projects here.

And then here in authentication,

we can click on Get Started

to get started with setting up authentication.

And then you should be redirected to this screen

where you can choose a sign in method.

Now it turns out that Firebase supports logging in

with a broad variety of authentication services

but here I wanna simulate that we have our own API

with our own database,

where we store our own users

with email password combinations.

And that's why we'll use this email password provider.

If you wanna add sign in with Google or Facebook

to your app,

then you can look up the dedicated docs for that,

or simply google for react Facebook authentication,

to find dedicated instructions for that.

Here, I wanna show you this generic authentication flow

as you could have it with your own back end.

Therefore, here, I'll choose email and password

and click on added configuration,

and then choose enable here.

I don't enable the passwordless link,

I just enable the email password authentication overall,

and then click Save.

Now once that is done,

we can start signing up with users

and start logging in with users.

And for that, of course,

I wanna use my application and there it is, login screen,

which we can reach here.

As a side note, throughout this course section,

we will of course,

make sure that this user interface

also reflects whether we are logged in or not.

So that for example,

the logout button will only be shown if we are logged in.

Currently, that's not happening.

But we're going to add that functionality

through out this section.

Now, therefore,

now we wanna make sure that we can actually

create a new account and send a request

to this REST API here,

Firebase provides for our Firebase project,

where we did now enable authentication.

And for this, we need to go to our code

and there are to the auth components folder

and there to the auth form.

There, I render this form which you see here.

And here, in the end,

we wanna react to the user clicking this Submit button,

if we are in sign up mode to create a new account.

And therefore,

I actually wanna extract the entered values

the user provided,

then check whether I'm in log in or sign up mode,

of course we can toggle between these modes here.

And then if we are in signup mode,

I wanna send the entered data

to the appropriate API endpoint by the Firebase REST API.

For this, we should first of all add a new function here

in this off form component,

which is the Submit handler function,

which should be triggered when the user submits this form.

No matter in which mode we are,

there will get an event object,

and we should call event prevent default

to prevent that browser default

of sending a request automatically,

which we don't want here, we wanna send our own request.

Now that we're doing this,

I then wanna extract the entered data

and you learned that here we got two main approaches,

we can either log every keystroke with use state

and then get the data from there.

Or we use a refs and connect refs to these input elements

to then get the entered data with help of that.

And I'll use the latter approach but of course,

you can use either of the two.

I will use the use ref hook here

to then create the email input ref here

by calling use ref and to create the password input ref

by calling use ref like this.

And now we need to connect these refs to the JSX code.

So here on this email input,

I'll set the ref property,

the ref attribute and point at the email input ref.

And for the password,

I'll do the same but point at the password,

input ref, like this.

Now the refs are connected.

Now in submit handler, we can extract the entered data.

So here we get the entered email

by reaching out to the emailinputref.current.value.

And we get the entered password

by using the passwordinputref.current.value.

Now we could add validation here,

we could validate the user input

and make sure that the entered email

is a valid email address.

And that the passwords,

for example is at least seven characters long.

But I'll skip this here since this is nothing new

and has nothing to do with authentication

or the Firebase back end.

And instead,

I wanna check if the mode is currently is log in.

So this state if we are currently in login mode,

in which case I wanna do something different

than I wanna do if we are in sign up mode.

So if we are not in log in mode.

And I wanna focus on this else case for now,

and send the request to the appropriate endpoint

if we are not in log in mode.

And now here the request which I wanna send

is a request to this sign up with email

and password API route,

which we find here

in the Firebase Auth Rest API documentation.

Here, we learn that we can send a POST request

to this URL with this data attached to it

to create a new user.

So, therefore, I'll grab that URL, go back to my code,

and send that HTTP request with this fetch function,

which we also used multiple times in this course.

And of course, here, you can build your own hook,

you can do whatever you wanna do,

I really wanna focus on the authentication part.

So I will just call fetch here directly in this component,

without custom hooks, without Redux,

without anything like that.

Here, I just wanna send the request,

and I want to send a request the this URL.

Now in this URL, we got one special thing,

this API key thing here.

That is a part of this URL,

which you should replace with your project specific API key,

your Firebase project specific API key.

Because this is a generic API endpoint.

In order for Firebase to know to which Firebase project

this belongs, and for which Firebase project

you wanna create a new user,

you need to add your Firebase project API key here.

And you get that key in the Firebase project console

by clicking on this gear icon,

Project Settings.

And then here, it's this web API key,

which you find here.

This key, that's what you need to grab here.

So let's grab that key.

And with that grabbed, we replace API key,

including the square brackets here with that key,

without a line break, like that.

And of course, you need to bring your own API key here,

mine won't work anymore when you're viewing this.

So that's not sending such a request,

but it's sending the wrong kind of request.

If we have another look at the documentation,

we learn that this should be a POST request

with some JSON data attached.

And at the moment, it's neither of that,

we're not sending a POST request,

and we're not attaching any data.

Of course, we learned how we can change this in this course.

We set this second argument on this fetch function

and here we pass an object that describes

and configures this request which we're sending.

And we can, for example, override the default HTTP method.

And instead of sending a get request,

which is the default,

we can now send a POST request.

When sending a POST request,

we should also set our body for this request.

So the data which you wanna add.

And that should be in JSON format here.

That's what this endpoint once

and then it wants an object with these three keys

with these three properties.

And we also see the types of values which are expected here.

So here are I'll then called JSON stringify,

to create some JSON data, and to JSON stringify,

we can pass an object,

which will then be converted to JSON.

And there, we should set an email, a password,

and a return secure token key.

So we set email and that's, of course,

our entered email here.

We set password, and that's our entered password.

And we set this return secure token key,

which we can simply set to true here.

Because this is a Boolean,

and we see that it should always be true.

So that's the data we wanna set.

Last but not least,

I'll add some headers to this outgoing request.

And specifically,

I'll add the content type header

and set this to application JSON,

to ensure that the Auth REST API

knows that we got some JSON data coming in here.

And this will now send such a sign up request.

Now, that alone, of course,

is not everything we wanna do.

This will send the request,

but we're not handling any errors

and we are also not doing anything with the response.

Now, as you learn fetch returns a promise

and therefore, you can add catch here to handle errors,

or then to handle regular responses.

And here, I'll add res then, to handle the response.

And I wanna check if the response is okay.

In which case,

we can do something with this success response.

Or if it fails,

in which case, we probably wanna froze some error.

Now, if it does fail,

it turns out that this response data,

which we get back will hold some extra information.

So we then might wanna look into the response data

by calling response JSON.

That's how we get that data that's coming back

with the response.

And response JSON also returns a promise.

So we also might wanna call then here

to get access to the actual response data.

And then here, we could, for example,

show an error modal or anything like that.

Here I'll just keep it simple and console log that data

for the moment.

And I'll then return this new nested promise chain here.

And you'll learn all about sending these HTTP requests,

and also how you could use async await in the HTTP section.

Here I'm using promises with then catch,

but you can absolutely also use async await.

This is also not the final state of this,

it's just an intermediate state.

With that code added, though,

we should be able to send that request

for creating a new user.

Now for that to work, though,

we of course need to connect the Submit handler.

And there for now on that form,

I'll add the on submit,

prop here and point at the Submit handler.

With that, if we save everything,

we can go back to our page and on that login page,

if we click on Create New Account,

we should now be able to create a new user.

For this, I'll enter a valid email address here.

And then a password,

which is only four characters long.

If I now open the dev tools here,

and I click Create Account, I get an error here,

I get an error with some error details

sent back by Firebase,

where I then see that I get this weak password message

that the password should be at least six characters long.

That's simply a restriction

or a security mechanism enforced by Firebase.

And that's why I wanted to show this to you here.

Now, of course, you might wanna show such an error

to the user.

And you can do that,

we are getting that error message here.

We're logging it to the console at the moment.

That's where this log is coming from.

And of course,

nothing is stopping you from setting some state here

with that message,

which is part of this data object

or with doing whatever you wanna do.

You can show this error to the user.

It's just not the focus of me here at this moment.

Instead, now I wanna show you that it works

if we enter a correct password.

So if I make this password a bit longer,

and I then click Create Account,

we don't get any feedback here at the moment,

because we haven't added any code for this yet.

But if I go to this Firebase project

to authentication there,

you should now see this user under users,

maybe click this reload icon here if you don't.

And that's that user,

which we just created with that email we just chose

and some unique user ID,

which was automatically generated by Firebase.

So that shows us that creating a user does work.

Now let's enhance this feedback which we show to the user

before we then work on logging users in.