WordPress Nonces and React: The Complete 2026 Guide for UK Developers
17 August 2026
Learn how to use WordPress nonces securely with React and the REST API. Practical UK-focused examples for 2026, including setup, validation, and best practices.
What is a WordPress Nonce and Why It Matters for React Apps
A WordPress nonce is a one-time security token that verifies the origin of a request. It’s not a silver bullet, but it protects against cross-site request forgery (CSRF) attacks. When you build a React front-end that talks to the WordPress REST API, you’ll often need to send a nonce to prove that the request came from an authenticated user. For UK developers, this is especially important because the Information Commissioner’s Office (ICO) expects you to implement proportionate security measures under UK GDPR. A nonce is a simple, effective layer that shows you’re taking data protection seriously. Without it, your React app could be vulnerable to malicious actions, such as unauthorised content changes or data theft.
Setting Up a Custom REST Endpoint with Nonce Verification
To use a nonce with React, you first need to expose a REST endpoint that verifies it. Start by registering a custom route in your theme or plugin. Use the `permission_callback` to check the nonce with `wp_verify_nonce()`. For example, a callback might look like this: `return wp_verify_nonce( $_REQUEST['_wpnonce'], 'my_action' )`. Remember to send the nonce via the `X-WP-Nonce` header or as a query parameter. For UK developers, it’s wise to follow the WordPress coding standards and avoid putting raw SQL queries in your callbacks. Instead, use `$wpdb` or an abstraction layer. This ensures your endpoint is robust and maintainable, which is crucial if you’re building a site that complies with UK accessibility and data protection regulations.
Sending the Nonce from React (Axios and fetch)
Once your WordPress backend is ready, the React side needs to send the nonce with every request. The standard approach is to localise the nonce into your JavaScript via `wp_localize_script()`. This exposes it as a global variable, for example, `window.MyApp.nonce`. In React, you can then use Axios or the native fetch API. With Axios, set a default header: `axios.defaults.headers.common['X-WP-Nonce'] = window.MyApp.nonce`. For fetch, add the header to each request: `fetch('/wp-json/my/v1/data', { headers: { 'X-WP-Nonce': nonce } })`. UK developers should treat this nonce like a sensitive credential – never log it or expose it excessively. Also, be aware that the nonce is tied to the user’s session, so if you use server-side rendering, ensure the nonce is generated fresh for each authenticated user.
Common Pitfalls and Security Considerations for UK Sites
One common pitfall is using the wrong nonce action. WordPress nonces are action-specific, so the action used to create the nonce must match the one used to verify it. Another issue is mixing up the nonce with authentication. A nonce does not prove identity; it only prevents CSRF. For UK sites, you should also consider the impact of caching. If you cache pages, a nonce can expire or be cached for a logged-out user, breaking forms. Solutions include using the `Cache-Control` header or excluding authenticated requests from cache. Also, always use HTTPS – UK GDPR and the ICO expect encryption in transit. It’s a good practice to use a security plugin like Wordfence, but remember that nonces are a fundamental WordPress feature that you shouldn’t disable.
Putting It All Together: A Full React + WordPress Example
Here’s a minimal but complete example. In your theme’s `functions.php`, register a script and localise a nonce: `wp_localize_script( 'my-react-app', 'MyApp', ['nonce' => wp_create_nonce('wp_rest')] )`. On the React side, create an async function that fetches a protected endpoint. For instance, to update user meta, send a POST to `/wp-json/wp/v2/users/me` with the nonce header. In your component, call this function when a form is submitted. Always check the HTTP response status – if you get a 401, the nonce may have expired, and you can ask the user to log in again. For UK developers, ensure your error messages are clear and actionable, as this improves usability. It also helps with accessibility, which is a legal requirement under the Equality Act 2010.
FAQ
Use `wp_create_nonce()` in PHP, for example `wp_create_nonce('wp_rest')`. Localise it into your JavaScript using `wp_localize_script()`, then access it in React via a global variable like `window.MyApp.nonce`. Send it as the `X-WP-Nonce` header in your Axios or fetch requests.