4.2 Configuring JWT in WordPress

When it comes to authentication for WordPress' rest API, we have several options to choose from. Unfortunately, there is only one built-in solution, and that is using basic authentication. No, no, we are, no, we are not going to do that. Now if our headless WordPress application was on the same origin, as our WordPress installation, then we could use cookies. However, it probably, in most cases, that's not going to be the case. So thankfully, we have the ability to install plugins that will give us, basically, different ways of authenticating using the REST API. So let's go to Plugins, and we are going to Add New. And the one that really strikes me as the solution that we want to work with, because we are doing JSON, and all of that stuff is, JSON Web Tokens. JWT is in the house. So we are going to just search for JWT authentication for WP REST API. That is what we want, let's install it. Now the installation instructions, well, they tell you what to do, they don't tell you exactly how to do it. Let's go to more details, let's see if it takes us to the page, and it does, because it's a lot easier if we can just copy and paste. So basically, we need to modify our .htaccess, if you are using WP Engine then you need to use this. Although, I should say, if you are using WP Engine, I'm not sure if you need to do this and this. I just don't know, it's not clear here. So I assume this is, if you have your own installation, or you are not on WP Engine, and this is if you are on WP Engine. Don't know, we'll just have to find out. So we need to modify our .htaccess file. We need to then add some configuration. [LAUGH] I like this Configurate, what the heck is that? So we want to add some configuration options to our wp-config file, and really that's it. Once we do that then we can make some requests, and do the things that we need to do. So let's start by modifying our .htaccess. So we are going to do this, and basically we want to do this after this RewriteEngine on command. So let's go to our WordPress installation, which for me is MAMP -> htdocs and then .htaccess. So let's fire up Notepad, put that on the right, put the files on the left and drag that over. Now we want to put this before any of these commands that end with L. Because basically what this says, if it ends with an L here then it's not going to process anything else, so we definitely want to do this very early on. So we're going to do this right after the RewriteEngine on command. And we are just going to put, for JWT, and we're going to paste in those lines. We, of course, don't need that other command for RewriteEngine on. So we, of course, want to save this, and we're good to go there. Now we want to go to wp-config, and let's open that file. Now unfortunately the instructions don't tell you where you need to do this, and so if you put it in the wrong place, it's not going to work. So my first attempt was to put it at the bottom. Yeah, no that was not going to work at all. So what we're going to end up doing is putting this, and then the CORs enable option, somewhere close to the top. So after we set the DB_PASSWORD, and host and charsets, and, that's okay. Before we get to this AUTH_KEY, or maybe after the AUTH_KEY. Let's do it right here, that looks good. So let's copy and paste that, so we would grab that. And, of course, if this doesn't work then we just need to fiddle around with where we put these define calls. So we'll add that there, let's add a comment at least, JWT. I don't know why I do that but anytime I see JWT that's the first thing that comes to my mind, JWT. All right, so now we have this set up. We should be able to go to this new endpoint, and see something there. So let's fire up Fiddler or some other HTTP debugger, whichever one that you want to, but make sure that you type it correctly so that Windows won't pull up the wrong thing. And we're going to go to Composer. So as far as the URL is concerned, we still go to wp-json, but instead of going to wp, and then v2 and so on, we have jwt-auth/v1. So we're just going to make a GET request here, let's see what happens. We get a 404, and of course we do, because we did not activate the plugin. So let's do that, and now that that is activated, we can go back, let's issue a request and we get 200, yay, that's great. Okay, so whenever we want to authenticate a user, we have an endpoint that is jwt-auth/v1, and then /token. We are going to send it a username and a password, and then it's going to give us a token if the username and password were correct. So this needs to be a POST request. We're going to set the Content-Type to the form-urlencoded. And then we need the request body. We have two things here. The first is username, which is going to be equal to user. And then we have password, which is equal to password, and I think that's it. Let's run it, let's see what we get, we get a 403. Now, we get a JSON structure in response, we get a bad config, JWT is not configured properly, please contact the admin. So this is where we need to play around with where we put these define things. So let's do it after all of the DB stuff. So let's go back, let's re-run this request. And what do we get? We get a 200, so it looks like you definitely don't want to do it after the Authentication Unique Keys and Salts, you want to do it before them. So I don't know why, I'm not going to find out why, that's just how it is. So whenever you send in the correct username and password, you are going to get this JSON structure back. You're going to get the token that you are going to then send with every request that requires authentication. And if you wanted to use any of this other information, then you could. So we're going to copy our token, and we're going to make some requests here. So let's edit one of our posts and, we'll just go through the history here to find which one, that one will be fine. We'll say posts and then slash the ID is going to be 1, I think that is the first post with the Hello World, as the title. So we're going to use that, this is going to be a POST request and let's go ahead and set the Content-Type to application/json, because that is what we are going to be sending it as. We also need the authorization header, Authorization, that is Bearer, and then we need our token. But we do need to get rid of token= in front of that. And then we're just going to send in our request body. So we're going to say that the title is going to be, Hello, Auth. And if this works, then we will have successfully changed that title. So let's send it, hopefully, we get 200. We do, and let's see what the payload is. The payload is, well, it looks just like a normal POST payload. The title was changed to Hello Auth! So let's make sure, let's look at this inside of WordPress. Let's refresh our posts, there's Hello Auth!, and of course it's going to be here as well. But let's just look, and Hello Auth! Okay, so as far as authenticating a user, we hit that token resource. If we look at that URL once again, we send a POST request to token, username and password are the keys, and of course we send in the appropriate information. We get a token back, and then we use that token for any other request, requiring authentication. So here's my plan. Whenever we log in, that is inside of our auth, we are going to authenticate. So we are going to issue a request to the token endpoint. We are going to send in the username and the password. And hopefully, we get a response that says, yes, you are good to go. And we will get that token. We will store it in local storage, and we will use that to determine if we are logged in or not. Now, that sounds kinda dangerous, and it kind of is. However, thankfully we have to include that token with every request that requires authentication. So whenever we go to delete a post, we're going to have to add that token in the header. So while somebody who is going through our code and says, hey, I can look at the admin stuff by having something in local storage, and then add something to local storage. They'll be able to see the admin stuff, but there's really not going to be much there, just a link and if they click the link, then of course it's not going to work. So that's the plan, and we will implement that in the next lesson.