All language subtitles for 009 Using The Token For Requests To Protected Resources_en

So now that we are able to login

let's make sure we actually do send this request

to a protected resource

so that we see how that authentication token can

and should be used in such cases.

And for this, I wanna stick

to this Firebase auth REST API,

though, of course a protected API end point

could be any kind of end point.

It could be from the Firebase REST API

for talking to that real time database as well.

There you could also end force authentication

through those rules here.

We haven't done this yet,

but you could do that here as well.

But I wanna stick to this basic example

of changing the user password.

And for this we got this extra API end point here

in the Firebase Auth REST API docs.

And it's this URL we need to send the request to.

The important thing here

is that in the request body,

we need to attach such a ID token

that identifies the user

for whom we wanna change the password.

And that makes a lot of sense

because for changing the password,

we need to know which user that is.

And you could of course think that

we could also specify the email address here

instead of the token for identifying a user.

But if that would be the case,

any user who knows that email address

would be able to send such a request to change the password

for that email address;

even if that's not your email address.

And that's of course definitely nothing we want,

definitely nothing to Firebase team wants.

And that's why instead, we need to send this ID token

which we only have after logging in.

And therefore it's now this profile page.

Here's the profile form,

where we get to the user input

where we wanna send such a request.

For this I'll first of all quickly start

by handling this form submission

and gathering that user input.

And uh, for that all again use, useRef here.

Of course, you could also work with state,

instead if you prefer that.

But I'll just quickly get my new password input ref here

with useRef

and then add my submit handler function here,

where I also get the, that event object

and where we then call event

preventDefault as we did it before.

And it's just separate handler, which we bind

to the onSubmit event on that form, like this.

Now in that submit handler

we want to extract the enteredNewPassword the user provided

by reaching out

to the new password inputRef dot current dot value.

And for this, of course

we need to connect this Ref to the input.

So, let's grab that Ref

and bind here to this Ref Prop on the input.

Now, we can add validation here if you want to,

but that's again not the focus of this course section,

and therefore instead I now wanna use that password

to send the request.

We could now send that request here

in this profile form component

or we do it in the user profile component

by basically emitting an event.

So by taking a function as a prop

and calling that function from inside profile form.

But I'll send the request right away here

from insight profile form, and for this,

we need to send the request to this URL.

So let's grab that URL.

And then, again, we can use the fetch function

to send that request.

Again here we also need to API key.

This has nothing to do with the user authentication.

This just identifies the Firebase project,

in which that user is stored.

And of course that API key is that same API key

we used before, here in the auth form,

so we can copy that API key from there.

Alternatively, you can of course store it

in some global constant variable and reuse stat.

But here I'll just copy and paste it again.

Now we do want to send a post request

with some Jason data here to this URL

and therefore I'll set the second argument on fetch,

set the method to 'POST'.

Set the body, to some Jason body with Jason stringify.

And before we add the actual body,

I'll already set my headers to an object

where a content type is set to application Jason.

Now to Jason stringify we can pass it, this object here.

And now that object, which makes up our request body,

should have this ID token field

the new password we want to set

and this return secure token, uh field,

which uh, in this case doesn't have to be true,

but it could be true if we want to get a new token

in response.

So therefore I'll do that.

I'll add this ID token field, that password field

and then thereafter this return secure token field,

which is wanted here.

Now we need that ID token

and that is stored in our context.

So we need use context here

in this profile form component

to tap into our context.

And then we can call use context

as we did it before to then tap into the auth context

which we therefore of course also needs to import.

And then here we get the auth context

from which we can get our token.

Now here, ID token is off context the dot token.

The new password is the entered new password here

and then returned secure token, all set this

to false here and see if that works as well.

Now this sends a request and again,

we can handle success and error cases,

and we definitely would want to check again

if Firebase throws an error

because of the new password is too short.

Then of course, we, again, will fail

to set that password.

Now to keep things a bit simpler here.

Since we already went through that error handling

in the auth form component here, I'll not do it here,

though you can add that, also with a sync await,

and instead here on this input for the password.

I'll just add the built-in min length

attribute and set this to seven here

so that we enforce a minimum password length

of seven characters here by the browser,

which is not the only form of validation

you should rely since this can be disabled

with the Def tools

but it's a basic validation we have here.

Of course you would want to add

proper error handling up here,

but to keep things a bit simpler as mentioned,

I'll just add to this then block where we get the response

and I will simply assume here

that this always succeeds.

Which of course is not realistic

but saves us some time here

to focus on the essence of this module.

And the essence is, that at this point,

we know, since we assumed

that the submitted password is correct.

That changing that password, worked.

So therefore, soon we can redirect the user then

if we want to.

At the moment, I'll not do anything here.

And instead, I'll just save this

and I'll give this a try now.

For that I'll log in again.

So I reloaded the page and I log in again

to ensure that I have a fresh token,

click login, go to the profile

and then I'll enter a new valid password here

and I'll click change password.

Now we don't get any feedback here

for the reasons mentioned,

but if we have a look at the network tab here,

then we see that a request was sent down there,

a post request,

where on the request we sent that token and so on.

And then we got no response back,

uh, probably because I said returns secure token to false.

But we can of course validate wherever that worked

by reloading again and going to the login page.

And now I'll try logging in with that old password

and that fails; I get authentication failed here

and we get this error request

where the respond says invalid password.

And only if I switched to the new password, it works.

So changing the password worked.

And that's how we can use stat token

for requests to authenticated API end points.

Now it will depend on the end point

how the token should be added.

Here we added in the request body.

For other endpoints, you might need to add it

as a query parameter,

like this here, that you add a token query parameter,

which then holds the token.

And for yet our API end points,

you might need to add it in the headers,

maybe with the authorization header

which is something like Bearer,

and then your token.

That is also something you'll often see

for a certain APIs.

So that depends on the API you're using.

If you are building your own API,

you can of course decide

where you expect that token.

If you are working with some third party API

as we're doing it here,

you'll have to check the API docs

to find out how the token should be added.

I mentioned it before, but I'll mention it again.

In my Main course, where we build a full stack application

with react and node and express,

there we also build an API.

So there you also see that other side

and you see how you could also provide the token

with help of the headers.

Here we added in the request body,

and that's how we can now use the token

for such a protected request.