Implementing JWT Authentication Login with React.js and WordPress

What is JWT Authentication?

JWT (JSON Web Token) is a token-based authentication method commonly used in web applications. JWT is generated when a user logs in, and the server uses this token to verify that the user is authenticated. Subsequent API requests must include this token, allowing the server to confirm the user’s authenticated status.

Now, let’s dive into the detailed process of implementing this login feature using React.js and WordPress.

1. Installing the JWT Authentication Plugin in WordPress

First, you need to install the JWT Authentication plugin on your WordPress site. This plugin adds authentication functionality to the WordPress REST API.

• Log in to the WordPress admin page, and go to “Plugins > Add New.”
• Enter “JWT Authentication for WP REST API” in the search bar, then install and activate the plugin.

After activating the plugin, add the following code to the `wp-config.php` file in your WordPress installation folder.

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

Depending on your server configuration, you might also need to add the following code to your `.htaccess` file.

RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

Once this process is complete, the WordPress API will be able to handle authenticated requests through JWT tokens.

2. Calling the Login API from React.js

To implement the user login functionality in React.js, you need to call the API to authenticate the user’s email and password and retrieve a JWT token for the authenticated user.

1. Project Setup

Set up a React project and install the axios library.

npx create-react-app my-app
cd my-app
npm install axios

2. Creating a Component

Create a component called `Login.js` and handle the login request as follows.

import React, { useState } from 'react';
import axios from 'axios';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      const response = await axios.post('https://your-wordpress-site.com/wp-json/jwt-auth/v1/token', {
        username: email,
        password: password
      });
      
      if (response.data.token) {
        localStorage.setItem('token', response.data.token);
        alert('Login successful!');
      } else {
        alert('Login failed!');
      }
    } catch (error) {
      console.error('Login error:', error);
      alert('Login error!');
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <input 
        type="text" 
        placeholder="Email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <input 
        type="password" 
        placeholder="Password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

This code takes the user’s email and password and sends them to the WordPress server’s login API. If successful, the JWT token is received and stored in the browser’s localStorage.

3. Accessing Authenticated APIs

Once the JWT token is obtained, you can access APIs that require authentication. This is useful when the user requests protected resources while logged in.

import axios from 'axios';

const fetchProtectedData = async () => {
  const token = localStorage.getItem('token');

  try {
    const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Now, after logging in, users can access protected resources on the WordPress server. Any requests requiring a JWT token should include this token.

4. Token Storage Precautions

Storing the JWT token in `localStorage` is a convenient way to keep the user logged in. However, this method has security vulnerabilities. The token could be stolen in an XSS (Cross-Site Scripting) attack. To avoid this issue, consider using HTTP-only cookies in certain situations.

Conclusion: Implementing Login Quickly and Easily

Combining WordPress and React.js to build powerful web applications is no longer a difficult task. By following the steps outlined above, you can implement user authentication quickly and easily. Leveraging JWT authentication in this process allows you to build a flexible authentication system that can be expanded to meet various requirements.