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.1 Getting Ready for User Auth

We can do some administrative tasks using the WordPress REST API, but we need to authenticate and authorize users in order to do so. We'll lay the groundwork for user auth in this lesson.

4.1 Getting Ready for User Auth

Up to this point we have done nothing but easy stuff. We have retrieved data from WordPress and displayed that data in the browser. And for the majority of headless WordPress applications, that is going to be sufficient. Because the whole idea of having a headless WordPress application is to completely separate the UI that the user sees and interacts with with the content, and really the whole CMS aspect of WordPress. So when it comes to performing administrative tasks, you typically wouldn't want to do that through your headless WordPress installation. That kinda defeats the purpose. So instead, you would just go to the normal WordPress administration and do whatever it is that you needed to do there. Because they have written a lot of code and put a lot of time into making the administration portion very usable and flexible, and stable, I might add. So, there is that. However, you could make the argument that there is some benefit to adding some aspects of administration tasks to a headless WordPress application. So for the remainder of this course we are going to do just that. We are going to look at adding authentication to our applications so that we could authenticate our user, and then we would perform an administrative task. We are going to be able to delete posts from right here within our application. So, it's not going to be very usable but it is going to give you an idea of how we can go through the process of authentication and making requests to perform administrative purposes. So we're gonna start by creating a new file, simply called auth.js and this is going to have practically everything regarding authentication. And we're going to have a few components here, so let's go ahead and import React from 'react'. And we also want to work with some of the things with React Router. So we are going to import Route, although we might not do anything with Route, we'll go ahead and have that just in case. We will import Redirect as well as Link from 'react-router-dom', and that's really all that we are going to do. So what we want to be able to do is of course allow users to log in but we also track when a user has been logged in. So for the sake of simplicity in this lesson, we are going to stumble all these and then in the next lesson we are going to set up authentication in WordPress so that we can use it with tokens. And then we will finally get everything else involved. So, for right now we just need some easy way of tracking if a user is authenticated, and we're just going to do that with a variable. Eventually we're going to store data within local storage and we are going to use that to determine if a user is logged in or not. So the next thing we need is an object that's going to give us the ability to first of all check to see if this value is true or false, because we don't want this to be changed from outside of this file. So we're going to have an object called simply auth, and we're gonna have a getter, we'll just call it isAuthenticated, and this is simply going to return the value of _isAuthenticated. So we have that, that's how we are going to check if a user is authenticated or not. And then we're going to have a method for actually authenticating the user. This is going to accept a callback function. And we will eventually do something here but ultimately we're just going to set isAuthenticated to true or false, if it failed. But hopefully it will be true, and then we would want to call the callback. Now, as far as authentication is concerned, we are going to be issuing a request to WordPress. So, that's going to be asynchronous and all that stuff, so let's simulate asynchronous here. And it's not going to be that special but we're just going to set a timeout. So we would at least have something that would emulate asynchrony. And we have authenticate and then we have signout. So we're going to do the same thing except that we're going to set our isAuthenticated flag to false, and then set timeouts. We'll parse in that function and there we go. So, as far as our application is concerned, we are going to export this. So let's go ahead and do that. Before I forget to do so, we'll export auth and we will be able to determine if the user is logged in. If they are not, we will have the ability to authenticate and to sign out. And so the next thing we need to do is add a log in link here in our navigation bar. So let's write a component to do that. This can be a stateless component, so it's just gonna be a function. We'll call it loginLink, and we will get the props but we're not really going to do anything with those props. And basically we're just going to check to see if we are authenticated. And if so, then we aren't going to display anything. Ideally we would have a link to logout. But for right now we aren't going to display anything. And if we are not authenticated then we're going to have a link to login. Now we haven't set that route up yet and we don't have a component to handle that route, but that's okay. This is at least just going to give us something that we can see in the browser, and then we will go to our Sitenav import the login link and add that to our nav bar. So let's go ahead and do that. So we'll go to Sitenav. We want to import loginLink from './auth', and then way down here, we have our drop down menu, and then after that Li, we are going to say, loginLink. Now one thing I have noticed is we need to use the link component here for our nav bar brand. So let's go ahead and add that as well. I think we are pulling in link, yes we are because we have that there. So let's go a head and do that, we want to go to just the root, set Classname="navbar-brand" and then we will have Headless WordPress. And that would be our link. Let's get rid of that a element, let's save this and let's go look at the browser and we of course now have a login link, but whenever we click on it nothing happens. So let's write the component that is going to handle this route. It's basically just going to display a form. So we're going to write that inside of our auth.js file. We'll make this a class LoginForm. This will extend React.Component and let's write a constructor. So we want to call super first of all, and then we are going to set the state. Now as far as the state is concerned, we're just going to have a single property called redirectTo. And we are going to set this to false because here is what we're going to do. We're going to display a form. When the user fills it out and submits it, it is of course eventually going to go to the WordPress API and validate that. If the user did successfully authenticate then we want to redirect the user back to some place. And we're just going to send them back to the root of our application. So whenever that happens, we're going to set this redirectTo property to true, so that whenever we re-render this component it's going to redirect the user back to the root. So that's what this property is for. So let's go ahead and write the render method. So the first thing we want to do is check to see if the state.redirectTo is true, and if it is then we are simply going to return redirect to- and we're going to go to the root. And that's it as far as our redirection is concerned. This is coming from React Router and we don't really need to do anything else. Now if we wanted to make this a little bit more sophisticated we could check to see where the user was before clicking on the login link. And then on a successful login, we could redirect them back to wherever they came from. But this is going to suffice in that case. So if we are redirecting, then we redirect. Otherwise, we are going to return our form. And I'm just going to copy that and paste it, because it's quite a bit of typing, but it is very straight forward. Most of it is just plain ordinary HTML. We are using bootstrap's classes in order to organize our form into groups. So we have one group that has the label in the text box for the user name, we have another group for the password. Let's change that to password. And [LAUGH] so we have a label and a text box for the password. And then we have a submit button. Now the submit button is going to call a method called login. Now we don't have that, so let's go ahead and write that. So we will say login(), and the purpose of this method is, well, to login. So we're going to use our authenticate method. And if that was successful, then we want to set the state. So we'll say this.setState, we want to set the redirectTo property to true, and that will redirect the user. Now before we can call this method, we need to bind it to this object. So we'll say this.login = this.login.bind and we'll parse in this. So there is that. We need to export this, so let's do that, LoginForm. And then we need to add a route to our app.js, so let's open that. We want to import our LoginForm from the auth file, and then we will simply add our route. So, let's just copy what we have for the category. We'll change this to simply login, and our component is going to be LoginForm. So, that should be it as far as getting all of this setup. So now we see form, that's great. But let's go to our roots, of course our existing routes work. Let's go to the categories, I just like to make sure everything works even though we didn't touch this, [LAUGH] still like to do it. So, now let's click on login, we get our form and right now we are just setting everything to true as far as if the user is authenticated. So let's just login, it should redirect us to root, and there we go. However, let's go ahead and stub out a place where we will have a link for the delete link. And we're going to do that inside of post, so let's go to our post-list. And we want to import, right now just {auth} from part './auth' file. And let's see, whenever we render our post let's just add in another div, although let's do it like this. Actually, no. My first thought was let's do this, we'll say let deletePost = and then we'll say, auth.isAuthenticated, and then so on and so forth. But let's do this, we're going to have a component, DeletePost. We will need to know what the id is, so let's grab that and we'll just say, let id = that, so that will say id. And then we will let the DeletePost component determine whether or not it needs to display. So let's go back to our auth file. Well actually let's make sure that we import DeletePost so that we don't have to do that again. Let's go back to auth, and let's just make this a normal function. So we'll say DeletePost, get our props and we will, well, we can't do that. If auth.isAuthenticated, then we will return a Link to- and let's say /post/delete/ and we'll then want to incorporate the id. So we are going to use a back tick /post/delete/ and we will have our id from our props id. And then as far as the text is concerned, we'll just have Delete post, we'll close the link, and that will be good to go there. Otherwise we'll just return null, and actually we don't need the else in that case because if we have gotten that far then we are not authenticated. So, let's go to the browser, of course nothing works the first time we write it. Let's see here. We see element type is invalid, that's probably because we did not export that. That is always my problem, I either fail to import something or export something. So by adding the exports, everything works. Let's log in, let's just fill out the form, press Login. We will go to one of the forms or one of the posts rather, and there we have the Delete Post. So, we have stubbed out authentication for our application. There's still some things that we need to do like actually performing our authentication, but this will at least get us a long way towards doing what it is that we want to do. And that is have authentication in order to perform something. One other thing I'm going to change is inside of LoginLink. Instead of using the _isAuthenticated, because that's just temporary, we are going to use auth and then isAuthenticated so that we don't have to worry about any other changes. I think that's the only other place that I used it, but let's just do a quick check, and it is. Okay, so we have this stubbed out. In the next lesson, we are going to spend most of our time setting up WordPress so that we can use authentication through the RESTful API. We can by default using basic authentication, but I don't want to do that. Instead we're going to use bearer tokens.

Back to the top