Integrate WordPress rest Api in Reactjs
By: Mohsin Ali Soomro
Tags: React, Authentication, Rest Api, Reactjs, WordPress

Hi There Hope you are fine

Demo http://wp-api-site.surge.sh/

I will integrate rest API in react js using JWT authentication for that you need a plugin to install in your WordPress and active it.

JWT Auth — WordPress JSON Web Token Authentication.

WordPress JSON Web Token Authentication allows you to do REST API authentication via a token. It is simple, non-complex, and easy to use. This plugin probably is the most convenient way to do JWT Authentication in WordPress.

by useful team

The react app is integrated with wp rest API and crud operation on the posts

steps

1: Open the .htaccess file in the root folder of wordpress and paste

RewriteCond %{HTTP:Authorization} ^(.*)

RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

2: Open the wp-config.php file in the root folder of WordPress and paste

get the secret key from the given link or you put your own

https://api.wordpress.org/secret-key/1.1/salt/

define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');

define('JWT_AUTH_CORS_ENABLE', true);

Now you get endpoint for authentication

Using Axios

Promise based HTTP client for the browser and node.js

const loginData = {

username: "Username",

password: "Password"

};

axios.post('http://yourdomain/wp-json/jwt-auth/v1/token', loginData)

.then((res) => {

console.log(res.data);

localStorage.setItem('token', res.data.token);

localStorage.setItem('user_nicename', res.data.user_nicename);

localStorage.setItem('user_email', res.data.user_email);

localStorage.setItem('user_display_name', res.data.user_display_name);

})

.catch((err) => {

console.log(err);

});

Crud Operation Endpoint for posts

Get All post (For get all post you does not need any token)

axios.get('http://yourdomain/wp-json/wp/v2/posts')

.then((res) => {

console.log(res.data)

})

.catch((err) => {

console.log(err);

});

Create post (You need authentication token from login)

const formdata = {

title: title,

content: content,

status: 'publish'

};



axios.post('http://yourdomain/wp-json/wp/v2/posts', formdata, {

headers: {

'Content-Type': 'application/json',

'Authorization': `Bearer ${localStorage.getItem('token')}`

}

})

.then((res) => {

console.log(res);

})

.catch((err) => {

console.log(err)

});

Edit Post (You need authentication token from login)

const formdata = {

title: title,

content: content,

status: 'publish'

};

axios.post('http://yourdomain/wp-json/wp/v2/posts/'+id, formdata, {

headers: {

'Content-Type': 'application/json',

'Authorization': `Bearer ${localStorage.getItem('token')}`

}

})

.then((res) => {

console.log(res);

})

.catch((err) => {

console.log(res);

});

Delete Post (You need authentication token from login)

axios.delete('http://yourdomain/wp-json/wp/v2/posts/' + id, {

headers: {

'Content-Type': 'application/json',

'Authorization': `Bearer ${localStorage.getItem('token')}`

}

})

.then((res) => {

console.log(res);

})

.catch((err) => {

console.log(err);

});

Code the Github link

If there is any difficulty feel free to comment I will reply to you asap

Thanks for ready if this will helpful for you then comments and star my repo