Authentication Methods

This post outlines how the standalone NextJs application implements authentication for the WordPress REST API. From my time implementing this I have learned that WordPress is not designed to be used as a headless CMS although it is possible, meaning that certain security tradeoffs have to be made in order to handle authentication. This post will not cover the persistence of a login state as this is covered in another post.

The main issue is that WordPress by default uses cookies for handling authentication(WordPress, n.d.) which creates some issues with authentication when treating WordPress as a headless CMS. If for example the React application is running at www.example_react.com and the WordPress site at www.example_wp.com then cookies can not be set cross domain. 

Logging into www.example_react.com will not log the user into www.example_wp.com meaning a different approach must be taken. If the login attempt retrieves a HTTP 200 OK response then not all cookies will be set and the user will still not be authenticated. The following screenshot shows an example of this.

The following screenshot shows the cookies set for the same browser for the domain hosting the WordPress site. The user is still not logged in, so this approach does not and will not work as it attempts to violate the way cookies work.

An alternative method for authenticating the user involves the use of a WordPress plugin called JWT Auth(Useful Team, n.d.) that provides an alternative route for authenticating that returns a JWT to the client. The web page for the JWT Auth plugin provides configuration steps that must be completed before the plugin can be used, otherwise the JWT can not be signed as a secret key has not been specified. Additionally, the servers .htaccess file must be modified to allow the use of an Authorization header.

The following screenshot provides an example of a response to a successful login attempt. The body of the response contains some information about the user such as their display name, email address. Additionally, a JWT is supplied that is to be contained in the headers of any following requests.

An example of decoded contents from a JWT can be seen below in the following image. The payload of the token is verified by the WordPress server by checking it using the signature combined with the secret used within WordPress for signing tokens.

This JWT is then sent with subsequent requests in an Authorization header in the format "Bearer token". The following screenshot provides a short example of how this is performed within the React application.

This post has covered the authentication process within React for logging into WordPress via the WordPress REST API. The following blog covers the persistence of login states.

References

UsefulTeam (n.d.). JWT Auth – WordPress JSON Web Token Authentication. [online] WordPress.org. Available at: https://wordpress.org/plugins/jwt-auth/.

WordPress (n.d.). Authentication | REST API Handbook. [online] WordPress Developer Resources. Available at: https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/.

Comments

Post a Comment

Popular posts from this blog

WordPress Modifying A Child Theme & Using The OpenWeatherMap API

Image
The modification of a WordPress child theme can be accomplished in multiple stages. For my child theme modification users can search the name of a city and are provided some current weather data from openweathermap. To accomplish this I used TypeScript to make my requests and perform DOM manipulation. Child Theme Creation & OpenWeatherMap API To create a child them, navigate to the directory where WordPress themes are stored. Create a new directory that uses a similar name to the parent them you wish to extend, however append the text "-child" to the end. This text does not do anything, however this is considered best practice (WordPress, n.d.). This directory requires several files in order to be operational. Firstly, a CSS file that contains a description of the theme is required. This should be named style.css and contain text similar to the following extract. The child theme will now be available for activation thro...
Read more

Creating A WordPress Post Using The REST API

Image
The created NextJs application allows for the creation of a new blog post using the WordPress REST API by sending a HTTP POST request to  /wp/v2/posts  using the schema defined on the WordPress developer website(WordPress, n.d.). A custom built page was created that contains a form for creating blog posts. This page can only be accessed if the user has a currently authenticated session.  The Create functional component reads the state of the login session by accessing the AuthContext using the useContext hook. More can be read about the implementation of the persistence of an authenticated session by  accessing this blog entry. Creating The Posts Content Users can provide a blog with a title, an excerpt and can create HTML content for the post within the Post Content textarea shown in the following image. Each form input on this page uses the useForm form validation hook that was created for performing real time, reactiv...
Read more

Consuming The WordPress Posts Via The REST API

Image
WordPress provides a REST API that has good online documentation that includes information such as type definitions and route information(WordPress, n.d.). Fetching & Server Side Rendering As the data is stored on an external storage system, the server hosting the WordPress application, the page can not be directly served with the data if it is rendered on the client. By rendering the page on the client using Reacts default rendering technique the user will have to wait for the data to be fetched, parsed and then rendered.  A small subset of the post information is rendered for this page as the entire post is not required. To reduce the amount of fields returned from the REST API the ?_fields?= query is used, as shown below. To avoid this issue the data for the blog index page, the page that renders the posts and their excerpts, is rendered on the server. The data fetching is handled by the server meaning that when the client receives the page all of the data fetching has alrea...
Read more