3.3 Writing the Login Client Code
We have a login form, but it doesn't do anything... we didn't write the code! So in this lesson, we'll flesh out the code we'll need in our client project to log in.
1.Introduction2 lessons, 12:18
2.Getting Started2 lessons, 20:32
3.Users and Authentication5 lessons, 54:30
4.Managing Currencies5 lessons, 46:15
5.Managing Our Portfolio5 lessons, 50:13
6.Security1 lesson, 10:49
7.Conclusion1 lesson, 00:38
3.3 Writing the Login Client Code
In the previous lesson, we created our log in view but it of course doesn't do anything because we didn't write the code to do anything. So in this lesson, we are going to focus on doing just that. And I like to write the code that I want to write first. Instead of sitting and thinking about okay, well I need this, this, this, and this. Because I tend to overthink, and I tend to write more code than I really need. So if I just start writing code that I want to write and then make it work. I find that I have cleaner code, I find that I only have the code that I need, and yeah, that's just what I do. It might be right, it might be wrong, it doesn't matter, because that's what I like. So here, inside of the login method, what I want to do Is have an object that we would use to interact with our RESTful API because that just makes sense to me. So we'll have an API object. It might be broken up into properties to where we would have login or currencies, or things like that. But for right now, let's just keep things simple and let's have a method called authenticate where we would pass in the email, and the password, that's kind of important to provide. And then, hopefully we would have some data to work with. And I don't know what we would want to do there. Probably we would want to emit a global event. Because whenever you login, that's something that the entire application is to know, because if you'll remember from the previous lesson maybe? I don't remember, whenever we pasted in the code for the app component, there's this is authenticated. There are some things that's need to change as far as the UI is concerned based upon whether or not the user is authenticated and whether they are an admin. So, it kinda makes sense to emit a global event in this particular case. So we will have an event bus and we will get to that. But something could go wrong, either connectivity issues or the user could have just provide invalid information. So in that case, what we'll say is, there was an issue logging in. Now, when it comes to providing error information for a login, you don't want to be too specific. Now, if there's something that is out of your control like connectivity, then yes, it's okay to be specific there. But I'm referring to the credentials that the user provides. If they provide a valid username but an invalid password, you don't want to say that you provided an invalid password. Because that tells any potential attacker that, okay, if I provided an invalid password then that means that the email is correct. So when it comes to giving error messages for credentials, it's just better to say something like, the credentials you provided are incorrect. Don't be too specific there because it gives potential attackers too much information. So now that I know that we want this API object, I'm going to create a new file directly inside of the source folder for the client and I'm just gonna call it API. And we will export an object that is going to have an authenticate method. It is going to accept the credentials and of course, since this is going to interact with our RESTful API, we need axios, so let's import that from axios. We also need the base URL, now if you'll remember whenever we first set up our application, we wrote this .env.development file, and we provided the base URL for our API. It has this VUE_APP_API value. So we can use that here so that we will have another variable, we'll call it apiUrl. And we will get that value with process.envm, and then VUE_APP_API_URL, so there we go, we have that. So that's now inside of our authenticate method. What we will do is we will use axios. We will make a post request and then we will specify the URL. Now, we could, you'll concatenate this, however, I love the string interpolation feature. This is something that just makes our lives so much easier, but it is a little bit, I'm not gonna say a paint to type. But it's not comfortable for me. So what I want to do is perhaps have a function called buildUrl, we would pass in the path that we want to append to our base URL. And then that would give us the full, absolute URL. So, we will have function, buildUrl, we will have the path, and we will essentially do this, where we will return our apiUrl combined with the path. So it saves us a little bit of typing, and that's okay with me. So we will pass in the URL, we will pass in the credentials and then in this case, let's just return back the JSON data. So we will return that there. And that means that we need to import this so inside of our login view, we will import API from API and that will get us started. Let's go ahead and write the event bus code here. So we will have an event bus where we will emit an event called login and we would pass the data. So that's something else that we need to write, so we're here, let's go ahead and do that inside of our source folder, we'll create a new file, we'll call it event bus, And it's going to be very simple, we will first of all import Vue from vue, and then we will export const EventBus = new Vue. That way, we will have EventBus. And we will import that here as well, so we will import, EventBus from same path EventBus, and that will give us access there. So one thing we did not do in the previous lesson is set up the values that we are going to be using. This is authenticated and is admin, so these are simply data points. So let's add our script. We'll have our data, which we will return here, isAdmin. We will initialize that as false, we will initialize both of these as false, and then in the created hook, we will listen for the login event. So let's go ahead and add that. We do need to import EventBus from, and in this case, we are in the same path, so event-bus. And so inside of created, we will listen for that, so on login, we will call our own login method. And let's go ahead and initialize that so that we don't have any errors in the browser. And we are going to accept data here. Now this data is going to contain two, maybe more but primarily two things, a token that we will use for authenticating all of our other requests, and then user information. So we are going to store those in local storage so then other parts of our application that need access to those things can access them. And let's make sure that we aren't getting any errors. So here in the browser, our property and method is authenticated, it's not defined. It helps if you type things correctly so that should fix that. We have no errors, so this is a good stopping point. So, we have the client code ready to go as far as authentication is concerned. Now we need to write the server code and we will do that in the next lesson.