Okay, we have our login already.
We haven't done much with it yet.
We haven't connected yet to our API.
So we'll do that in this video.
So what we have here is the username and password input and whatever I will type in here you can see
one strange things like this is auto capitalize.
So whenever we start a new sentence here, it will be capital.
We don't want to have that for a user interface, so we would like to keep it a lowercase.
Maybe you would like to have it.
So whatever you will, maybe you will register your users with capital and it will also would like to
have a login with capital.
But if you don't like to have it like this, then we can go to the text input here and in the text input
we can do auto capitalize here and then we can do it as none.
So we have a few options and I can also do that for a password here.
Also the password.
If we go here and we start doing password, you can see the password is visible.
Usually we would like to hide the password not to be seen so we can do a secure text entry.
And then we can say it's true.
So once this is refreshed, you can see I'm start typing and it's a small letter at the beginning.
And also whatever I type in here, this is hidden by the these dots.
So we have that sorted.
So the next thing, what we need to do is we need to authenticate.
So I copy the fetch method from the previous component.
So we'll need to uncomment it now and then we need to change it a little bit.
So first the URL needs to be out like this.
We don't need to provide any ID here, so that's our URL.
The method for authentication will be post.
We don't need to provide authentication here because at this point we don't have the token.
So we can leave the content type only.
And what we need to do here is need instead of providing title and description to our authentication,
we need to have username and username, which is using this state.
And then we'll have also password like this and password.
So we will have that.
But I can show you the quick way with the newest addition of JavaScript.
If you have username and then username here.
In fact, what you can do is you can provide it like this and maybe it's not that readable for you,
but it is kind of shortcut in JavaScript you can do now.
So instead of repeating username is username and password is password, you just provide like this and
it will work in the same way.
So if you prefer this style you can keep it like this.
And whenever we actually authenticate what we will have here with we will have a response here.
And what instead of going to details like we did with this fetch before, what we can do is for now
we can do console log and see what's actually inside.
So we'll do response and we'll console log it.
So we have that.
I will try to authenticate with my credentials.
So Christian and then Christian and then I click log in and here it's a response here.
So we have our object and inside we have token.
So basically response token is what we are interested in.
So how we can actually save it to be reusable in other components.
For that we can use async storage and we need to import that.
I think storage like this.
Then once it is imported, we can actually do that here.
But there is important thing to know about async storage.
Well, as the name it's telling us this is async.
So what we need to do is we need to await for it.
So what we can have is we can have another function here.
So I will do save data, We can have a save token or whatever, and that's going to be an arrow function
here.
And the save data, we can pass the token to that data and then we can use the async storage queue.
So I will have a value that's going to be our token and then I will have async storage and then I will
have I have a few options and we can see a list of them here.
What we are interested in is asset item here and then we need to provide a few things.
So first thing will be a key and key.
It's up to us.
How are we going to name it?
I will do movie rater underscore token like this and the second one will be a value.
And a value is something that will pass to this function.
Actually, I mistype it here so constant like this.
So we have our option here.
But I said that async storage is asynchronous, so that means we need to wait for it.
If I would like to have here a save data like that.
And then after that, I would like to navigate to a new component.
It's not going to wait for me to save this as this.
So what we need to do is we need to do a mark this function as async, and then we will do await here.
So once I have this, that means it will await for this function to finish and then it will go and do
the second line.
So actually, we don't need to do anything here and we will just put it this in the storage, so I'm
not going to put it in the variable.
So we will save the data.
That's a thing that will await until it will finish and then the next line will be executed.
And.
In the next time.
What we can do is we can do props, navigation, navigate, and then we can navigate to our movie list
like this.
So we have that.
And once we get this here, we'll save it.
This will wait until this will be saved in the async storage and then this one will be executed.
So let's give it a try.
So this is saved and I can do
grace and Christian and we have some problems and it cannot actually, what we have here is we have
this null.
And the problem is I forgot actually to pass this rest token there into our function.
So we save the data and we pass the token here.
So I don't have this anymore and we need to do it like this.
So that was my mistake.
I'll do Christian and then Christian and then log in and you can see here, I'm here.
So we have at this point we have stored Mr. Token and whatever we will access the this application.
Again the Mr. Token will be available there in this in the storage.
So how can we actually check it.
We can do at the moment we don't use use effect here in this component so we can implement use effect
and I will do use effect and that's going to be an arrow function.
Here.
So use effect will be triggered whenever we render something.
So we can actually limit that to render only once.
So I will provide an empty array and it will be done only once, Once for the first time we run the
application.
And what we can have is in the similar way as we had the uh, this uh, function we can have actually.
Get data.
So save data will save it and get the data will actually retrieve the data.
We don't need to provide anything.
It's still going to be async.
So this time we can actually have a constant some value.
Let's say it will be token and then we can get an item, uh, like that and then we don't need to provide
any value here.
So we will get an item and it will be here in the token.
It is also a way, so it will wait until this will be executed.
When it will be executed, We can say if we have a token.
Then what we can do is we can navigate to the movie list like this.
So we have that option.
And whenever we run the application, we don't want to user to login every time we do that.
So we can actually ask for for that data.
If we have that data, then we will automatically redirect to our movie list.
So if I will save it now you can see we are in the movie list, despite the fact that login is the first
component that we load, so we can pre check it for the token.
And then once we have that token, then we can redirect to movie list.
Okay, so that's login done, but we haven't yet used the token that we have storage in the, in the
async storage in the real fetch.
So we'll do that in the next video.