Calling the Authentication APIs

[00:00:00]
>> Maximiliano Firtman: So that's working, now I need to connect this. Okay so first in APIs, I need to create calls to these new two endpoints, okay? So in this case, it's going to be register, that receive something, okay? We can say I know it's async, because I know it's gonna be asynchronously.

[00:00:26]
So for register, I'm going to receive name, email, and password, email and password, and I will do something with it. login async that has only email, password as input arguments, and then it will do something. So I'm not sure if you remember that we have this API.fetch this kind of this utility function that is converting that into JSON, doing some stuff, going in and out this.

[00:01:00]
The problem we have is that we cannot use that one because for a login and registration, we need to send data and that fetch is not sending data. I mean, we could add a third argument here for data and change that, but also we can create a new one called send.

[00:01:21]
That will do a fetch, but particularly with sending data, okay, makes sense? That we will call from login, register, and maybe for another one later. So it's another async function that receives a serving name, maybe one use. It's difficult to actually mix query string, arguments, and data and body at the same time, we can, I mean, we, I mean, you can do that, it's up to you.

[00:01:50]
But have you mind that we can just call this data instead of arguments or arguments its up to you. So, and we're going to also do something very similar to this. So we can start with this as our placeholder. Maybe again, I'm not going to mix query string here, so I will just have the serviceName.

[00:02:10]
In case you will mix both technologies, go ahead, keep them. And actually, the fetch API has a second argument. That second argument is where you can actually say, for example, that I wanna use the method POST and that you wanna set some headers. For example, I'm gonna use JSON, if you're a member from Postman I was selecting JSON as my format.

[00:02:39]
Actually, Postman is doing that for me, but it's adding a header. I'm not seeing it because they are hidden, but they are adding, it's sending content type application/json. When you pick JSON from that list, it's actually sending to the server, hey server, I'm sending you a body in JSON format, okay.

[00:02:59]
So we should keep that. So we are a good HTTP citizen. What happens if we don't send that? It depends on your server implementation, maybe nothing, but it's a good idea to always send that. So the header is Content-Type, then we say application/json as the argument. And finally, we pass the body, and the body should be a string, so I will stringify my data.

[00:03:32]
So now on login, I will just call that one, so I will say login or authenticate, you can use any name there. I can return the await of API.send to account and the name of my service that is, authenticate, okay, authenticate. And then I need to pass an object with the email and the password.

[00:04:03]
I'm getting those from here that someone is going to send me, okay? And something similar happens on registration. I will say register, and the only thing is that I need to add the name to the arguments, okay? So now there are still one missing point. So from one side, we have HTML that is calling app.login or app.register, and then we have the API.

[00:04:27]
We are still missing the controller of this operation that is actually in the app, app.login, app.register. So I need to go here, and we have all the search, close, error, I need to add these two register that receives an event, if you remember, because it's from the form submission and login.

[00:04:53]
And the first thing that I know that I need to do is event.preventDefault, because by default, what happens if I click here, okay? Well, first it needs something there, so I need to type something that's the validation. But if I click here, it's reloading the page, okay? And I don't wanna reload the page.

[00:05:14]
So I need to preventDefault on both registration and login, okay? Make sense? Well, here are the parties I need to get the data and maybe try to validate the data somehow. There are many ways to do that, or validation, okay? But something I will do, for example, I need to create the name and I will say document.getElementById.

[00:05:39]
I'm not sure if you know that you can do this gEBI. And so, just the parentheses, but they say.gEBI, and it works, okay? So, you can do that with CamelCase on any language in VS Code, it's really pretty cool. So, a document.gEBI, okay? And then you specify the ID, so we have the register, it was a register name, I think, .value, so that's the name.

[00:06:12]
And by the way, sometimes you feel when you're doing vanilla JavaScript, and this is something that I spend more time in the other course that I have Frontend Masters, this vanilla JS, you might not need that framework. Where you say, I need to write a lot of time documenting by Id.

[00:06:30]
You can quickly get around that by just creating something like this. Then you say, you know what, document.getElementById. There is more complicated than this, but that one will make it real quickly. So then instead of document.getElementById, use the dollar sign, something like that. So you can work with JavaScript and make JavaScript be more or closer to what you want, okay?

[00:06:55]
It's a pretty dynamic language. So I have the name, then I have the email and the password, it's a sitting in plain text because we are in the client. So register-email, register-password, and now I need to validate this, okay? So how can I make a really quick validation system?

[00:07:17]
I mean, but that will show whoever messages and all the stuff. There are many ways to do that, but I will do something really, really quickly. I'm going to create just an array of errors as I start as an empty array, and then I start adding some quick Boolean conditions here.

[00:07:39]
So things like if the length of the name is less than 4, I will push a new error message here saying, enter your complete name, okay, something like that. And then you can say, okay, for the password, remember this is a client-side validation, enter, say at least, enter a password with at least 7 characters.

[00:08:10]
And of course, you can use regular expressions and llms to help you, we create the regular expression for your validation. But remember, this is client side validation, which means that you can always override and bypass this and go directly to a server. So a bad actor cannot do that, so don't rely only on client-side validation.

[00:08:31]
So we see how to do on the server to add more data validation there, okay, this is really important. So we have the password and the email we should check if it's email you need a regular expression for that. So enter your complete email, something like that, and we can add more.

[00:08:49]
And also we need one for the if the passwords don't match, so actually, I need the other password. So password, not sure if I called it confirmation or validation, let me check. So it's here, it's closed, so password confirmation.
>> Maximiliano Firtman: So that's my Id, so it's password confirmation.

[00:09:16]
So if they're not the same, password are not the same, I will push another error, password don't match, okay, something like that. [COUGH] You can make it better, nicer, but I'm using this because now I will check if I do have an error, how do I know if I have this one error?

[00:09:42]
I will check the array length, so if it's 0, it's like, we're okay, we can do the work, and if not, we can show an error. We already have a way to do that, okay? And for the error, I will do this, I will take the array, and I will join the array with a space.

[00:10:03]
Also, if you don't use dot at the end of the sentences here, you can add the dot here, it's up to you. So join, we'll actually join all the array in one large string with everything inside.
>> Maximiliano Firtman: That's a quick way to add some validation you can work on that.

[00:10:22]
And if it's okay, well, we need to go and get a response from the server. So I'm going to await for the API.register that receives the name, the email, and the password, okay? And because it's await I need to go back to our function, I need to add async, okay?

[00:10:46]
And I will check if the response it's a success that's how it looks like from this point of view. So if you go back to go to our handlers, our account handler, so if you look at the data types that we are responding.
>> Maximiliano Firtman: We are responding with success and a message, okay?

[00:11:09]
So that's the property that I'm reading now client-side. So I will say, if success then it is a Boolean, what should you do? Well, for now, I can just go to my account home that doesn't exist yet, okay? You're logged in, you're in, and if not, we can show an error, and we can even use the message that is coming from the server,
>> Maximiliano Firtman: Okay, like that.