Calling Auth Endpoints

[00:00:00]
>> We don't have the endpoints server side and we have in api.js, we have defined the calls to those endpoints but we are not calling the API yet. So let's try to understand the flow. So I'm going to use a very old method, okay? Of doing event binding with Java Script that is using directly the HTML event.

[00:00:25]
Of course, we can use add event listener API if you want, but I wanna focus here in the form directly. As I mentioned before, there are a lot of developers out there. They're just doing something like this, like on onclick, they are calling auth.login, a function that we need to create, okay?

[00:00:44]
But that's not a good idea. I mean it's gonna work, and in most password managers it will work but it's much better instead of doing this, it's much better to go and add onsubmit over the form. Does anyone know the differences between or the advantages of using submit on the form instead of click on the button?

[00:01:09]
Does anyone know?
>> All the form data gets sent.
>> All the form data gets sent but that's only if you're are getting out of the single page application, but you will see that I will keep myself under a single page application. So actually we are going to prevent the form to be submitted.

[00:01:29]
But by the way, that also happens with the button because the button by default is type submit. So it will happen also on the click. So it will happen anyway. Yeah.
>> Is there a specific event type for form submits that is different and distinct from button click?

[00:01:52]
>> Yep. So these events is not something I'm creating. It does exist and it has existed since probably 98, something like that
>> Which means that you should utilize that onsubmit event from the form because most tooling, including password managers would be designed to be triggered from form submits as opposed to normal button clicks?

[00:02:15]
>> That's one possible advantage. So that means that actually if you are using a password manager and you are selecting a username from there, you want that selection to trigger submission. Yeah?
>> Largely driven for accessibility because there are multiple ways that you can ask the form to be submitted.

[00:02:38]
You could hit the Enter key or through some other command, not just clicking the button but-
>> Yeah, that's one of the reasons. What happens if I'm using the Enter key in the form, right? Or if I have a virtual keyboard on an iPhone. So I'm typing and I'm using the Return key.

[00:03:03]
So if you're just listening for the click event of a button, you might not have that situation when you use the key. Or for example if you're just telling a voice assistant hey, submit the form. It's not actually click on the button. So it's always a good idea to do this.

[00:03:25]
I'm going to pass an event, the event that we'll receive as an argument because one of the things that we are going to do is prevent this form to be submitted with standard, classic, multi-page solutions. We're going to keep this within the same page navigation so that's why I'm passing the event, okay?

[00:03:44]
So I'm going to do something similar on the registration form. So onsubmit, I'm going to call Auth.register and I'm going to pass the event. And now we need to go and create the register and the login functions within the Auth event that we have in the auth.js file, okay?

[00:04:08]
Make sense? Again, if you want to use other event binding mechanisms, that's fine. And if you of course if you're using any library, it's going to be different how you're going to do this connection. If you're using React.jsx or if you're using Vue.js, it will change that but the whole idea works.

[00:04:27]
Remember that everything that we are doing here in vanilla.js can be adaptive to any library because we are using or we will use during the rest of the day just client side browser APIs that can be used from any library. So now back in Auth JS, so then I can add here the register functions that again I can use this syntax or I can use colon, event and then our function.

[00:05:00]
It's up to you. It's exactly the same, okay? If you want to be more compatible with all the browsers, maybe their syntax will work better. They have a function syntax, so we use colon and arrow function. I know that when you're using a transpiler, you typically don't care about that, okay?

[00:05:19]
But here we are not using a transpiler, why? We are directly brave JavaScript developers, so we are directly executing our ECMA script code directly in the browser. But if you want the other APIs, it's okay. If you want the other syntax, it's okay. So the first thing, let's start with register.

[00:05:39]
The first thing is to prevent default. So event.preventDefault will actually prevent the browser from being submitted to the server I've seen that PHP error, okay? Where you're sending directly an HTTP navigation to the server, okay? Because this is a single page application. And then I'm going to create that user object taking the value from the form.

[00:06:03]
I can use the form data API or just plain get element by ID or query selector, okay? Whatever you prefer. GetElementById and I'm taking from the register form the name and the value. Then we have the email and the password. Register email and the same for password. Those are the three input types that I have here.

[00:06:37]
The trailing comma is fine. And then with that, I can call my API. So I can await API.resister passing that user as an argument. And because this is promise based, when I use await, I need to I async to my register function. So I can use async await.

[00:06:59]
So I'm taking the response and if we want for now, we can do a console log for the response chart for the first step. So then we can see if something's happening, okay? And something actually pretty similar has to be done on the login event. So it's prevent default as well, because it's another form, a different form.

[00:07:24]
By the way as we mentioned before, it's a very good idea to have two different HTML forms when it's a single page application. If you use the same form, password managers will get a difficult time to work properly, okay? So it's much better to have complete separate forms when you are sharing those forms in the same HTML, okay?

[00:07:48]
When in the same DOM. Even if they're not both at the same time in the DOM, okay? So it's a good idea to use different forms. And if they have different IDs, even better. So after, this I'm going to create also my credential. I can call your user your credentials.

[00:08:05]
That is just the email and the password. So I'm going to be similar to the previous one so just I'm not taking it from the register form but from the login form and it was email and password. So I'm creating this object that we are passing through post through HTTP To the server login_password.

[00:08:30]
And in this case, I'm also going to get the response and waiting for API login with those credentials that they have a typo. So I'm solving the typo like that. And again for now, I'm going to do console log response. And because I've used await, I also need to async join function.

[00:08:57]
Okay, make sense? So that's the first step. Now we will see what to do with when we have the response. Okay, but maybe it's time to try these because so far, we haven't tested this, so anything can happen. So girls your fingers. By the way, of course you can use postman or any other tool first to actually check your web services.

[00:09:21]
And the idea here is to try this and because I have already my server running, and this server is using Nodemon, it's taking automatically my changes so I don't need to stop the server or run the server again. So we can go and directly use this. So I'm going to go back here.

[00:09:45]
So I'm going to just refresh the browser just in case. So if I try any email address like email@email.com with any password, remember I'm not validating anything here and if I try and hit continue, okay? We can just try to open the console. So here I can try to log in with any password, continue and I am getting a response from the server saying credentials are wrong.

[00:10:10]
So well at least we have something, okay? So we can try to register a new account first, and here you can see that first when I'm trying to change the page, the password manager says hey, you're changing the page. So is that a confirmation of a login? Maybe, so do you want to save these credentials?

[00:10:33]
Maybe it's not the case so I will say no, not now. But you can see that when the page changes, even if it's the single page application when there was a push a state, that was the moment where the password manager said hey, maybe we don't have those credentials stored.

[00:10:51]
Do you wanna save them? Well anyway, I'm going to register an account. So I'm going to use my name Max, just because we're going to take advantage of not having strong validation so far. I'm going to create an email m@m.com, okay? Just for faster typing, I can use my strong password suggestion which is fine or not.

[00:11:15]
It's up to you. Remember the first time you do that in your browser because it's a clean browser that I'm using, it's saying hey, we should save this, so maybe you need to log in. So we are going to save this under your account or we can just use any password, okay?

[00:11:33]
I'm going to use any passwords such as Frontendmasters, okay? So you don't see that of course. If I register my account, it says okay true. So it seems like my flow worked. How can I check if this works? Well, I can go back to my code, to my project, and try to find the database.

[00:12:02]
And the file is there, auth.json. If I open that, I have my object. I have an array of users and Max is there and you can see the password is not in plain text. I cannot see the password, it's hashed. So this is the hash that I can take from here and try to see if I have a database of hashes or if I can try to find which password belongs to that hash, okay?

[00:12:33]
So it's not 100% secure, but at least someone that is opening this file, someone that has access for five minutes in the server and is opening the file will not see the password easily, okay? So it's one step, okay? So the register is working. So let's see the login.

[00:12:55]
Now I can save my password, okay? So this is the time where you decide to save the password, okay? Do you have a password? I can say yes, I can say no, it's up to you. And now if I try to log in, it was m.m.com. Let's try first, any password.

[00:13:14]
I'm getting credentials wrong at the bottom. Remember that also if I have a wrong email, I'm getting the same message, the same credentials are wrong. And if everything works fine like frontendmasters, continue, I'm getting okay true, my name and my email. So, registration and login processes are working.

[00:13:40]
I just need to adjust the UI. So if I can see that on the screen.