Have you ever considered how to strengthen security when developing web applications? Especially when it comes to login systems, security is crucial. In this article, we will explain in detail how to store JWT tokens using HTTP-only cookies and implement secure login authentication via the WordPress API and React.js. By applying this method, you can create a convenient authentication system while protecting user data securely.
1. What is an HTTP-only Cookie?
First, let’s understand what an HTTP-only cookie is. An HTTP-only cookie is a cookie that cannot be accessed via JavaScript in the web browser. Simply put, this cookie is used only in communication between the server and the client, and it cannot be modified or read by client-side code. The greatest advantage of this cookie is its high level of security. It is especially useful in defending against Cross-Site Scripting (XSS) attacks. For example, even if malicious scripts are injected, the information stored in the HTTP-only cookie is safely protected.
2. Setting JWT as an HTTP-only Cookie on WordPress Server
Now, let’s look at how to set the JWT token as an HTTP-only cookie on the WordPress server. To do this, you need to add custom code written in PHP. This code can be added to your theme’s `functions.php` file or a custom plugin.
function custom_jwt_login($response, $user) {
if (!is_wp_error($user)) {
$token = $response['token'];
setcookie('jwt_token', $token, time() + 3600, '/', '', true, true); // 1-hour expiration time
}
return $response;
}
add_filter('jwt_auth_token_before_dispatch', 'custom_jwt_login', 10, 2);
The above code sets the JWT token as an HTTP-only cookie when JWT authentication succeeds on WordPress. Through this method, the user’s login information can be managed securely.
3. Sending Login Requests in React.js
So how can you send a login request in React.js? Fortunately, since the cookie setting is automatically handled by the server, there’s not much extra work needed in React.js. However, you must use the `withCredentials` option to allow the server to set the cookie.
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
}, {
withCredentials: true
});
if (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 allows the user to send a login request with their email and password, and by using the `withCredentials: true` option, the HTTP-only cookie is automatically set. If the login is successful, a success message is displayed to the user.
4. Accessing a Protected API
After a successful login, let’s try accessing a protected API. When accessing a protected API, the cookie is automatically included in the request. Refer to the example below.
import axios from 'axios';
const fetchProtectedData = async () => {
try {
const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts', {
withCredentials: true
});
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
};
By using the `withCredentials: true` option in this code, you can securely access protected data.
5. Handling Logout
Now let’s look at how to handle the JWT token upon logout. You’ll need to add code to the WordPress server to delete the cookie.
function custom_jwt_logout() {
if (isset($_COOKIE['jwt_token'])) {
unset($_COOKIE['jwt_token']);
setcookie('jwt_token', '', time() - 3600, '/');
}
return true;
}
add_action('wp_logout', 'custom_jwt_logout');
This code deletes the cookie when the user logs out, ensuring they cannot access protected APIs unless they log in again.
6. Security Considerations
Finally, there are a few additional security considerations to keep in mind to further enhance security.
- Use HTTPS: HTTP-only cookies can only be securely transmitted over HTTPS. Therefore, your WordPress site must use HTTPS.
- SameSite Attribute: You can prevent cross-site requests by setting the SameSite cookie attribute. For example, you can set it to `SameSite=Lax` or `SameSite=Strict`.
By following these methods, you can build a secure and efficient login system.
Conclusion
In this article, we’ve explored how to store JWT tokens using HTTP-only cookies and implement secure login authentication in React.js. By using this method, you can better protect user data and significantly enhance the security of your website. Try applying this method today!