7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Performing Authentication

Now that we have the auth groundwork complete, we can finally authenticate users! In this lesson you'll see how.

4.3 Performing Authentication

In the previous two lessons we got everything set up so that we just need to write a little bit of code in order to authenticate the user and then do something with that authenticated user. So the first thing we're going to do is write a function called store. This is what we are going to use to get and set data into our session storage. Now you can make the argument that we don't really need to do that because it's already easy to set and get data from storage. But this is going to save typing in the long run. So if we have a value then we are setting. If we don't have a value, then we are getting data. So we're going to check if value is undefined and if it is then we are getting data. So we're going to say return sessionStorage you want to get item and then we need a key. So let's make a constant here, we'll call this token key and we'll set it to ApiTokenValue. That's going to be fine. So we will use that variable whenever we set or, in this case, get data. Otherwise, we are going to set data. So we will set sessionstorage SetItem we will use a token key and then the value that we've passed in. So this makes it just a little bit easier to retrieve that information. And as far as is authenticated is concerned what we will do Is, we will call store, and we will make sure that, that is not null. If it is not null, then we are authenticated, at least as far as our application is concerned. But if it is null, then we are not. So, for the authenticate method, what we want to do is make an actual request to retrieve the token. If that token request was successful, then we will set that token into sessionStorage, otherwise, we will do something else. So I went back and forth as to whether or not we should put something inside of this off file, as far as sending the authentication request, or if we should put it inside of API. I'm going to opt for the latter, because this is part of the API and if we keep everything here then it should be a little bit easier to maintain. So we are going add another constant up here and we are going to call this the authurl and it's going to start off the same way, localhost. And wp.json, but then we are going to have jwt-auth, and then v1. And so we're going to write a method simply called authenticate, and we need a user name and a password. So let's go ahead and have those as our arguments. Now in the previous lesson we sent the user name and password as form data, but we can also do so as json and that's what we're going to do. But in order to do that, we need to send in some headers. So we're going to new up headers and then we are going to set at least one, the content type. So we're going to say headers, we want to append the content type header. That is going to be application slash jason and then we want to make our request. So we are going to call fetch. We're going to include our AuthUrl. And then we want to go to the token end point. And we need to make this a post request. So we're going to create another object. The method is going to be of course post, the headers are going to be included as well. But then we also need to send the body. The body is going to be in JSONs so we will say stringify. We'll pass in an object that has username and password properties. And that's going to be our request. We can go ahead and call the first then, and we're going to work with the response. Let's first of all check to see if response is not okay, because if it's not then we don't want to take any data and assign that or store that rather in our session storage. Because if we do that, then even if it is something other than null. It's going to consider us logged in, and we don't want to do this. So we're going to throw an error and we'll take the response and we'll pass in the status text and we might do something with that, you know we would like to display a message and in a real application we definitely would do that but we might get there, we might not, we'll see. So if everything is okay, we're going to return JSON, and that should be all that we need to do there. So inside of auth, we need to import our API, so let's do that. We want API from, and then API. And inside of our authenticate method, we're going to new up API. Then we are going to call the authenticate method. Now we need a username and a password, so let's go ahead and add those parameters to this method and then we will pass those on to our APIs. So we'll say username password. We will go ahead and call then, in this case we should have an object. And we will just store that. So we will call store, pass again obj.token. I believe that key is and then we will our callback function. Now if we received an error, then we'll have the catch handler and let's just add a To Do, do something with error. As I said, ideally we would display a message but we'll see if we get there or not. So as far as the sign out is concerned, we just need to call store, we pass it null and that should be fine. Because null is not undefined we are doing a hard check for undefined so setting that has no we'll log our user out, and then of course, we can call our callback function as well. So, now we need to take the username and the password from our form and pass that on to our authenticate. And we can do this with state. So, let's add two properties to our state, we'll have password, we'll initialize that as null and then we will have username and initialize that as null as well. And then, we're going to handle the change event on both of these, so Let's write that function, we'll just call it handlechange. And we need our event object. We'll say target equals e.target. We'll say the value is equal to target.value and then finally we need the id, because we're going to use the id, in order to set our state. So let's say, that is equal to target.id, and then we all simply say this.setState, and we will pass in which ever property that we want, to set with ID. That is going to be the value, and that should be fine. So whenever we call the log in method, the authenticate method is going to execute, we'll say this.state.username, this.state.password. And that should be good to go, let's also set up the binding for handle change so that that is bound to this object. And then we'll just set up the on change listener so on each of these input elements we'll say on change this handle change and that should be it, at least as far as logging in is concerned. We can check to see if this is actually going to work. We actually see something here, so that's good. We don't have any issues. We don't have anything inside of session storage. So, if we click on login, if we type in something that is not correct, we shouldn't see anything happen. Now, as far as the console is concerned, well this should not have happened. API is not a constructor. Okay. It's not a constructor, how is that possible? So let's look at the imports and there it is, that doesn't need curly braces around it. And we also didn't save API so that could have been a problem as well. So let's go back, let's type in something is not correct and we will log in, and we see that that is a 403. This is what we wanted to see. And if look at the pay load, then we see that it is an invalid username. So that is okay. Now, let's log in. So we'll say user, password, we will log in. And that took us where we wanted to go. Let's look at the sessions storage we now have an API token. So we can use that in order to perform admin stuff. And let's see. We have a few minutes left but we don't have enough time in this lesson to go ahead and implement the delete portion, but there are some changes that I want to make, so let's go ahead and do this. One of the things we did a couple of lessons ago is create this delete host component, and all it did is really display a link. So let's change the name of this to delete post week because we are going to create another one called delete post. So we want to export delete post link. We use that inside of post list. So let's change that in the import. Let's also change the usage of it which was also here. instead of the render method for the post component. So make sure that everything still works okay. Looks like it does, so we are good to go for the next lesson. So, in the next lesson we are going to write a component for deleting a post. So we need to write a method that is going to issue that request. It needs to include our bearer token in order to prove that we are authorized to do that. And once we get that up and working, we will be done.

Back to the top