Headless WordPress: Logging with JWT

Headless WordPress is an idea that is being used more and more. I am going to try and cover a few topics that might be interesting when working with Headless WordPress setup. In this tutorial, we are going to see how we can login a user using JWT.

We are going to make a simple App that will enable the user to login. Once logged in, we will show the user their information.

To be able to login with JWT, you’ll need to install and activate the plugin JWT Authentication for WP REST API.

Preparing our Application

Let’s now create our own React App with the Create React App. Open your terminal (command prompt) and place yourself in a folder where you develop sites or where you want this app to reside.

Then use this command:

npx create-react-app my-app

You can replace my-app with your own choice. This will be your folder where all the code will be. I’ve named my own headless.

Then, place yourself in that folder, you can then start the app with npm start. Before we do that, we will also install Gutenberg Components, the npm package @wordpress/components. This will enable us to use those components in our app.

You can install them with this command:

npm install @wordpress/components

Since Gutenberg components do not provide us with layout classes, we could create our own layout CSS guide or we can use existing frameworks so we don’t waste our time on that. If you’re building an app that will be used in production, then rethink this and you might want to build your own CSS layout 🙂

We will use Bootstrap 4 for that and we can also install that using this command:

npm install bootstrap

You will also need to process SASS (SCSS) so we need to have that here so our app can process such files. To have that installed, you need to use this command:

npm install node-sass --save

As we will use the Bootstrap and Gutenberg styles, we can delete the App.css and create App.scss. Inside of this new file, put this:

@import '~bootstrap/scss/bootstrap.scss';
@import '~@wordpress/components/build-style/style.css';

This will now compile into a CSS file that includes both Boostrap styles and also Gutenberg styles.

Since we will have to peform POST and GET requests to our WordPress site, we need to have a way to do that. You can use the browser API fetch or a library. We will use the axios library. Install it with this command:

npm install axios

Adding Login Logic to our Headless WordPress

Open the App.js so we can start adding our login logic there. We will check if the user is logged in. If it’s not, we will show the login form. Otherwise, a dashboard will be shown.

Let’s change the imports of the App.

Don’t worry about errors for now. Components Dashboard and Login don’t exist yet so you’ll get compile errors.

You can now replace the whole App function with this:

So, what are we doing here?

• We are using React Hooks useState to handle the login information globally,
• We are using also the Effect Hooks useEffect to handle the change on the login part,
• If we are logged in, we will show the Dashboard component here,
• If we are not logged in, we will show the Login Component.

With the useEffect, our app will login our user (if we have the token saved) once the App is rendered.

We pass the setLogin function, that controls the global state for login information, to both components, so we can sign the user or even logout.

Creating the Login Component

To login a user with our Headless WordPress application, we will need to pass the username and password on the first try. To do that, we need a form. Create the folder components in your app folder and create a Login.js file.

Put this code in there:

We are importing the Gutenberg components TextControl and Button that we will use to create the login form. We will also have 3 more methods. Those methods will be used to store the information into the state and also to login the user.

Let’s now create the render method and the 2 methods to save the information into the state. You’ll now see how we will use the Gutenberg Components.

The second TextControl is also receiving the type as password. When each control has changed, it will use the appropriate method to store the information into the state.

When we click on the Button component, we will try to login the user. Let’s create that method now.

We are posting the username and password to the REST route for the jwt token. If the user exists, it will return the token to us. We will then set the token to the local storage so we can retrieve it on refresh.

If there are any errors returned from that REST route, we will display it without the HTML tags.

This will now enable our users to login into our WordPress Headless application.

Creating the Dashboard Component

Within our Dashboard component, we will show the information of our user so we know we are getting the correct user in our WordPress Headless application.

Create the file Dashboard.js inside of our folder components and put this into it:

We are also requiring the axios here because we will get the information about the currently logged in user. We want to get that information when the component mounts, so it is available as soon as possible.

We are using the route wp-json/wp/v2/users/me to get information about the current user. When doing that, we are passing the Authorization header with our Bearer token.

If we don’t provide such header, the JWT plugin won’t be able to define which user is logged in.

Let’s now display the information of the logged in user.

We have the button to logout the user that will also use the passed method setLogin. Since we are setting the login to an empty string, the App will re-render and display the login form.

Get the code

When you download the code, you’ll have to install the packages by running npm install.

Conclusion

Headless WordPress is becoming the new standard, slowly. With that, you can create a Web App that can be easily transformed into an Android or iOS app. By using the Gutenberg Components, we can save our time by using useful components.

Become a Sponsor