Awesome Open Source
Awesome Open Source

React with WordPress

🔥 Example of react application with WordPress REST API


Please follow me 🙏 on twitter

Dashboard Demo

Pagination 📹

Post Listings Demo 📹

Live Demo


  1. CRUD operation with WordPress REST API
  2. Authentication with JWT ( Login Logout )
  3. Accessing public and private routes
  4. Handing WordPress REST API custom end points.
  5. Creating Dashboard with React for CRUD operation.
  6. Pagination


  1. Clone this repo in git clone

  2. git checkout branchname

  3. Run npm install


git clone [email protected]:imranhsayed/rest-api-endpoints.git


Add your wordPress siteUrl in src/client-config.js

const clientConfig = {
	siteUrl: 'http://localhost:8888/wordpress'

export default clientConfig;


1. login-with-jwt-wordpress-plugin

A React App where you can login using the endpoint provided by JWT Authentication for WP-API WordPress Plugin. So you need to have this plugin installed on WordPress. The plugin's endpoint returns the user object and a jwt-token on success, which we can then store in localstorage and login the user on front React Application


i. Add the last three lines in your WordPress .htaccess file as shown:

# BEGIN WordPress
   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /wordpress/
   RewriteRule ^index\.php$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /wordpress/index.php [L]
   RewriteCond %{HTTP:Authorization} ^(.*)
   RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
   SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

ii. Add the following in your wp-config.php Wordpress file. You can choose your own secret key.

define('JWT_AUTH_SECRET_KEY', '&BZd]N-ghz|hbH`=%~a5z(`mR=n%7#[email protected](8h$og%-IbI#>N*T`s9Dg');
define('JWT_AUTH_CORS_ENABLE', true);

iii. Now you can make a request to /wp-json/jwt-auth/v1/token REST API provided by the plugin. You need to pass username and password and it returns a user object and token . You can save the token in localstorage and send it in the headers of your protected route requests ( e.g. Create Post /wp-json/wp/v2/posts )

iiv. So whenever you send a request to WordPress REST API for your protected routes, you send the token received in the headers of your request

	'Accept': 'application/json',
	'Content-Type': 'application/json',
	'Authorization': `Bearer putTokenReceivedHere`

This repo also demonstrates how to create posts in React Application by sending request to protected endpoints ( passing the token in the header )

2. jwt-verify-with-node

A React(front end) + Node(back end) application. It uses jwt.sign() ( from jwtwebtoken npm package ) to generate a token using the username and password sent from front end( React ) and returns it as a response, which we then store in localstorage to login the user. This token received by frond end, will be sent with all further request for protected routes, which will then be verified in node route using jwt.verify() Besides generating the token, the end point in node also accesses the WordPress rest api to confirm the credentials and returns the user object or errors if any.

It also has functionality to create post where we make a request from front end along with token( React ) to a node end point. The node endpoint verifies the token and then makes a request to WordPress REST API endpoint to create the post and then returns the new post id, or error if any.


  1. Branch master and build-app-for-heroku
  • start Runs node server for development ( in watch mode ). The server.js sends all front end route request to index.html and then all front end route requests is handled by reach router
  1. Branch jwt-verify-with-node and login-with-jwt-wordpress-plugin
  • dev Runs webpack dev server for development ( in watch mode )


  • prod Runs webpack in production mode

Free Courses


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,156,493
Reactjs (175,205
Plugin (113,347
Express (32,847
Wordpress (29,680
Token (29,382
Rest (29,185
Authentication (27,096
Rest Api (17,978
Jwt (10,345
Jwt Authentication (2,324
Jwt Token (928
Wordpress Development (705
Post (312
Wordpress Rest Api (40
React Wordpress Theme (9
React Wordpress (6