React WordPress Nonce Example: A Complete UK Developer's Guide
17 August 2026
Learn how to use WordPress nonces with React in 2026. Step-by-step example, REST API security tips, and common pitfalls explained.
What is a WordPress Nonce and Why React Needs It?
A WordPress nonce is a security token that verifies the origin of a request. It is not a timestamp but a hash tied to your user session and a specific action. When you build a React front-end that talks to the WordPress REST API, nonces protect against Cross-Site Request Forgery (CSRF). Without a valid nonce, the API will reject state-changing requests like POST, PUT, or DELETE. This is particularly important for UK developers handling user data under GDPR. The nonce ensures that only authenticated users from your own application can perform sensitive actions, adding a critical layer of security to your headless WordPress setup.
Setting Up the Nonce in PHP (wp_localize_script)
To pass a nonce to your React app, use wp_localize_script in your theme's functions.php or a custom plugin. First, register and enqueue your React script, then create an array with the nonce using wp_create_nonce('wp_rest'). This function generates a nonce specific to the REST API. The array is passed as a global JavaScript object, typically named 'wpReactSettings'. For example: wp_localize_script('react-app', 'wpReactSettings', array('nonce' => wp_create_nonce('wp_rest'))). This makes the nonce available on the window object. Ensure you enqueue the script on pages where the React component is used, and always verify the user is logged in if you require authentication.
Accessing the Nonce in React (with Hooks)
Once localised, you can access the nonce in any React component. The simplest way is to read it from the global object, but for better maintainability, create a custom hook. For example, useWordPressNonce() can return window.wpReactSettings?.nonce. This hook centralises access and handles cases where the nonce might be missing. In your component, call the hook and store the nonce in a variable. You can then pass it to fetch calls. If you are using a state management library like Redux, you can set the nonce during initial load. Remember that the nonce is tied to the logged-in user, so it will be null for visitors unless you provide a separate nonce for public requests.
Example: Sending a Secure POST Request from React
Here is a practical example. Suppose you have a form that submits a comment. In your React component, retrieve the nonce, then include it in the fetch headers as 'X-WP-Nonce'. The code should look like this: const nonce = useWordPressNonce(); fetch('/wp-json/wp/v2/comments', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': nonce }, body: JSON.stringify({ post: 1, content: 'Hello' }) }). The WordPress REST API checks this header and returns 403 if invalid. This works in both the block editor and front-end. Always use the full REST endpoint and ensure your URL is correct, especially when using a subdirectory installation. Test locally with browser developer tools to verify the nonce is present.
Common Mistakes and Security Best Practices for UK Developers
A frequent mistake is reusing a nonce across different actions or pages. Always create a nonce for the specific REST route, and avoid hardcoding it in your JavaScript bundle. Also, remember that nonces expire after 12 to 24 hours, so implement a way to refresh them. For UK developers, data protection is paramount. Never log the nonce or send it to third-party analytics. Use HTTPS to prevent man-in-the-middle attacks, and consider adding additional authentication like JWT for highly sensitive operations. A nonce is not a substitute for user authorisation – always check capabilities on the server side. Finally, keep your WordPress core updated to ensure the nonce hashing algorithm remains secure.
FAQ
In your theme or plugin's PHP code, use wp_create_nonce('wp_rest') and pass it to your React script using wp_localize_script. This creates a secure token tied to the current user and the REST API action, ready to be used in your JavaScript fetch calls.