WordPress REST Nonce Authentication with React: A UK Developer's Guide
17 August 2026
Learn how to authenticate WordPress REST API requests from React using nonces. UK developer tips, common pitfalls, and code examples.
Understanding the WP REST Nonce and Why React Needs It
When building a React front-end with WordPress as the backend, making authenticated requests to the REST API requires more than just a logged-in user. WordPress uses nonces, a type of security token, to verify that requests originate from a trusted source. Without a nonce, attempts to create, update, or delete posts—or even fetch private data—will fail with a 401 or 403 error. In the UK, where privacy and security compliance are taken seriously, understanding nonces is vital. React applications often run separately from WordPress, breaking the default cookie-based authentication. The nonce acts as a bridge, allowing your React app to prove it's legitimately tied to a logged-in user session. This guide will walk you through the entire process, from generating the nonce in PHP to sending it from React.
Setting Up Nonce Generation in WordPress (Theme or Plugin)
The first step is to generate a nonce in your WordPress environment. You can do this in your theme's functions.php file or a custom plugin. The REST API uses a special nonce action called 'wp_rest'. To create one, use wp_create_nonce('wp_rest'). For example, add this to your theme: <?php $rest_nonce = wp_create_nonce('wp_rest'); ?>. You then need to expose this nonce to your React application. A common approach is to localise a script using wp_localize_script(), passing the nonce as a global variable. In a UK development context, make sure your theme is properly enqueued—use wp_enqueue_script with a dependency on wp-element if you're using React. This ensures your script loads after React and has access to the nonce value. Remember to call this function on every page load to keep the nonce fresh.
Sending the Nonce with React (Using Fetch or Axios)
Once your React app has the nonce, you need to include it in every REST API request. WordPress expects the nonce in the 'X-WP-Nonce' header. If you're using the global fetch API, your request might look like this: fetch('/wp-json/wp/v2/posts', { method: 'POST', headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' }, body: JSON.stringify(data) }). With Axios, which many UK developers prefer for its cleaner API, you can set default headers: axios.defaults.headers.common['X-WP-Nonce'] = nonce. Alternatively, use an interceptor to add the header dynamically. Be careful with the nonce value—if you encoded it in a localised script, ensure you retrieve it correctly via a global variable like window.wpRestNonce. For UK-based sites using custom domains or subdirectories, always use relative paths to avoid cross-origin issues.
Common Authentication Pitfalls (and How to Avoid Them)
Even experienced UK developers hit snags with nonces. One classic mistake is using the wrong action name—always use 'wp_rest' for REST API calls. Another is forgetting that nonces expire after 12 to 24 hours, depending on your WordPress configuration. This can cause mysterious failures for users who leave the site open. A third pitfall is caching. Many UK WordPress sites use caching plugins like WP Rocket or server-side caching, which can store an old nonce. Ensure your theme or plugin does not serve cached nonces—generate them dynamically via an endpoint or refresh them periodically. Also, if you're developing locally, be aware that nonces are tied to the session cookie, so you must be logged into WordPress. In a React dev server on a different port (e.g., localhost:3000), you'll need to proxy requests or use CORS headers to send cookies correctly.
UK-Specific Considerations: GDPR, Localhost, and Hosting
For UK websites, data protection and privacy are not just technicalities—they're legal obligations under GDPR. When passing nonces between React and WordPress, you're handling session tokens, so ensure your connection is HTTPS in production. Never expose nonces in client-side code that could be misused; they are tied to user sessions, so a stolen nonce could let an attacker impersonate a user if the session is also compromised. On localhost, many UK developers use tools like Local by Flywheel or Lando. These create a trusted environment, but you must test in a production-like setup to catch nonce issues, especially with mixed HTTP/HTTPS content. Also, be mindful of UK hosting providers like 123 Reg, Fasthosts, or Krystal—some have aggressive caching or security firewalls that may block nonce headers. Whitelist your API routes if necessary.
FAQ
In your WordPress theme or plugin, call wp_create_nonce('wp_rest') to generate a nonce. Expose it to your React app using wp_localize_script(). This nonce must be sent with each REST API request via the X-WP-Nonce header. Always use the action 'wp_rest' to ensure WordPress accepts it for REST routes.